누구든지 하는 리액트 (by velopert) 강의와 블로그 글을 보고 정리한 글입니다.
Ⅰ. 프론트엔드 라이브러리
웹 사이트를 만들 때는 프론트엔드 라이브러리 도움 없이 만들 수 있다.
정적 페이지를 만드는 거라면 Javascript 없이도 그냥 HTML, CSS를 사용해서 만들 수 있다. 동적 페이지라면 Javascript를 추가해주어 유저의 행동 흐름에 따라 동적으로 화면을 보여주게 한다.
그.러.나
단순히 요즘의 웹은 웹 페이지가 아닌 웹 애플리케이션이다.
🙄 웹 페이지 vs 웹 애플리케이션
이때, 유저인터페이스(여기서는 웹 어플리케이션)를 동적으로 나타내기 위해서는 정말 수많은 상태를 관리를 해줘야 한다.
EX
<div>
<h1>Counter</h1>
<h2 id="number">0</h2>
<button id="increase">+</button>
</div>우리가 버튼을 눌러서 숫자 0 값을 바꿔주려면 각 DOM element(HTML element를 의미, 여기서는 h2, button)에 대한 reference를 찾고 해당 DOM에 접근해서 원하는 작업을 한다.
var number = 0;
var elNumber = document.getElementById('number'); // h2 dom 레퍼런스를 id로 접근
var btnIncrease = document.getElementById('increase'); // button dom 레퍼런스를 id로 접근
btnIncrease.onclick = function() { // 이벤트 설정
number++;
elNumber.innerText = number; // 업데이트
}만약 프로젝트가 사용자와의 interaction이 많지 않다면, 사실상 프론트엔드 라이브러리는 필요하지 않다.(직접 구현하는게 더 좋을지도!)
그러나 프로젝트 규모가 커지고 다양한 유저 인터페이스와 interaction을 제공하게 된다면 많은 DOM element를 직접 관리하고 코드를 정리하기엔 힘든 일이다.
따라서 웹 개발할 때, 귀찮을 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발과 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 하기 위해 여러 라이브러리 or 프레임워크들이 만들어졌다. 우리가 프론트엔드 라이브러리 or 프레임워크를 사용하는 것은 개발 시 생산성과 유지 보수와 관련이 있다.
대표적으로 Angular, Ember, Backbone, Vue, React등이 있다.
Ⅱ. 라이브러리/프레임워크의 선택
사실 가장 잘하고 좋아하는 도구를 사용하는게 좋은 거다~~
Angular
- UI를 구현하게 되면서, 앵귤러만의 문법같은 것들이 다양하게 존재
- 다양한 기능들이 이미 내장되어 있음
: HTTP 클라이언트, 라우터, 다국어 지원 등등 - 앵귤러 1의 경우 만들어진지 오래 되었고, 기업에서 많이 사용이 되어서 유지보수하고 있는 프로젝트가 많아 사용률이 높은 편
- 주로 타입스크립트랑 함께 사용
React
- Component 라는 개념에 집중 되어있는 라이브러리
- Component는 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줌.
- 페이스북에서 개발! 현재로 라이브러리 성능업데이트 중!
- Angular와 다르게 사용자에게 전달되는 view만 신경쓰고 나머지 기능들은 서드 파티 라이브러리를 활용
서드파티 라이브러리
개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리, 즉 제 3자 라이브러리
React 개발 팀에서도 개발 중인 서드파티 라이브러리도 있음.
EX) React Router, Redux - 생태계가 넓고 사용하는 곳도 많음
- HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어 있지 않음
- 공식 라이브러리가 있는게 아님, 개발자가 원하는 스택을 맘대로 골라서 사용하거나, 라이브러리를 만들어서 쓸 수 있음
Vue
- 입문자에게 추천
- Webpack 같은 모듈 번들러를 사용하여 프로젝트를 구성해야하는 Angular와 React와 달리 CDN에 있는 파일을 로딩하는 형태로 스크립트를 불러와서 사용함 (==HTML에서 스크립트 태그로 불러옴)
Webpack?? 모듈 번들러??
웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 각각 모듈로 보고 다른 종류의 모듈을 모두 자바스크립트 코드로 합쳐서 import할 수 있도록 만드는 도구 - HTML을 템플릿처럼 그대로 사용할 수 있어서 마크업을 만들어주는 디자이너/퍼블리셔가 있는 경우 작업 흐름이 매우 매끄럽다.
- 공식 라우터, 상태관리 라이브러리가 존재
- Angular처럼 Directive 라는 기능이 있고 React처럼 Virtual DOM 기반 컴포넌트가 존재, 또한 JSX도 사용할 수 있다.
