web application의 발전
규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.
Fronted Framework(library)
Angular
2010년에 구글에서 개발한 framework. Typescript 기반으로 매우 안정적이고 탄탄한 fronted app 개발이 가능. framework답게 다양한 기능이 내장되어있다. 하지만 무겁고 배우기 어렵다는 단점 또한 존재한다.
Vue
2014년 Evan You라는 개인이 개발한 framework. 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장속도가 정말 빠르다.
React
2013년 facebook에서 개발한 library. MVC(Model-View-Controller) Architecture와 다르게 오로지 view만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(react-router, Redux)를 함께 사용한다.
library와 framework의 차이점
라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있다.
즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있다.
프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣으며 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있다.
다시 말해, 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재(내포)하고 있습니다.
프레임워크는 가져다가 사용한다기보다는 거기에 들어가서 사용한다는 느낌/관점으로 접근할 수 있다.
React의 정의
React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리다. 리액트와 같은 프론트앤드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유는 하나는 UI를 자동으로 업데이트해 준다는 점이다. 리액트는 가상 돔(virtual DOM)을 통해 UI를 빠르게 업데이트 한다. 가상 돔은 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술인데 이 기술 덕분에 불필요한 UI업데이트는 줄고, 성능은 좋아진다.
Node.js
Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다. Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 되는데 npm을 사용하기 위해서는 노드(Node.js)가 설치되어 있어야 한다.
npm
Node 기반의 패키지를 사용하려면 npm(node package manager)이라는 패키지 도구가 필요하다. npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.
CRA(Create-React-App)
CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다. CRA에는 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 준다. 이러한 개발 환경을 직접 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야한다. CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.
