Front-end library란?

요즘 웹은 웹페이지가 아니라 웹 어플리케이션이다. 브라우저 상으로도 많은 흐름으로 매우 빠르게 많은 것들을 할 수가 있다. 어떠한 유저인터페이스를 동적으로 나타내기 위해서는 수많은 상태들을 관리해줘야 한다.

밑에 코드와 같이 버튼을 눌러서 숫자 0값을 바꿔줄려면 각 DOM Element에 대한 레퍼런스를 찾고 해당 DOM에 접근하여 원하는 작업을 해야한다.

<div>
    <h1>Counter</h1>
    <h2 id="number">0</h2>
    <button id="increase"></button>
</div>

이렇게 한다. 아까전에 봤던 id값 number를 찾아와서 가져왔고 button도 increase값 찾아와서 가져왔다.

이벤트설정하고(onclick) 업데이트하고(elNumber.innerText = number)

 

여기서는 예시로 var를 쓰지만 이제는 머릿속에서 지우자

 

var number = 0;
var elNumber = document.getElementById('number');
var btnIncrease = document.getElementById('increase');

btnIncrease.onclick = function() {
    number++;
    elNumber.innerText = number;
}

프로젝트의 규모가 커지고 다양한 유저인터페이스와 인터렉션을 제공하게 된다면 많은 DOM요소들을 직접관리하고 코드도 정리하고 그러면 갈수록 코드관리가 힘들어진다.

 

웹 개발을 하게될때 귀찮은 DOM관리와 상태값 업데이트 관리를 최소한으로 하고 오직 기능개발 그리고 사용자 인터페이스를 구현하는거에 대해서 집중할 수 있도록 많은 라이브러리들 또는 프레임워크들이 만들어졌다. 프론트엔드 라이브러리나 프레임워크를 사용하는 것은 개발하게 될때 생산성과 깊이와 관련이 되어있고 더 높은 유지보수성과도 관계가 있다.(Angular, Ember, Backbone, Vue, React...)

 

Angular

다양한 기능들이 내장되어있어서 앵귤러 하나만으로 엄청나게 많은 것들을 만들 수 있다. 예를 들어서 Http 클라이언트, 라우터, 다국어지원 등등 앵귤러에 모두 내장이 되어있다. 혹은 공식 라이브러리가 있거나 한다.

Typescript사용이 기본이라고 보면된다. 즉 Angular과 typescript사용은 하나라고 볼 수 있다.

 

React

컴포넌트라는 개념에 집중이 되어있는 라이브러리이다. 컴포넌트는 데이터를 넣으면 지정한 인터페이스를 조립해서 보여준다. 페이스북 개발자들이 라이브러리의 성능과 개발자의 경험을 개선하기위해서 많은 연구를 하고 앵귤러와 달리 사용자에게 전달되는 뷰만 신경쓰고 나머지 기능은 3rd party library를 활용한다.

 

물론 3rd party library 중에서는 리액트 개발팀 멤버들이 섞여있는 라이브러리들도있다. Reduc, React Router들 이런것들이 있다. 다만 공식 라이브러리 이런 개념이 없다. 한 가지 문제를 해결하기 위해서 여러가지 솔루션 방식이 있다. 그리고 생태계가 굉장히 넓고 광범위하다.

Vue

뷰는 입문자가 사용하기에 정말 쉽고 webpack같은 모듈 번들러가 없어도 그냥 CDN을 불러 사용하는 형태로도 이용된다. CDN으로 불러온다는 것은 Html에서 script태그로 불러온다는 것을 의미한다. Html을 템플릿처럼 그대로 사용할 수도 있어서 Markup을 만들어주는 디자이너나 퍼블리셔가 있는 경우에는 작업흐름이 매우 매끄럽고 공식 라우터와 공식 상태관리 라이브러리가 존재한다.(리액트는 라우터나 상태관리 라이브러리가 3rd party여서 여러 종류가 있다.)

 

뷰에서는 앵귤러처럼 디렉티브라는 기능도 있다. 리액트처럼 Virtual DOM기반 컴포넌트도 있다. JSX라고 리액트에서 사용하는 것을 뷰에서도 사용할 수 있다. 즉 리액트에서 좋은 것들 앵귤러에서 좋은 것들 몇가지를 가져와서 섞어놓은 느낌이다.

 

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의