React
Frontend Framework(Library)의 등장
보여지는 것인 UI(User Interface)와 할수 있는 것인 UX(User Experience)가 많아지면서 요즘에는 웹 애플리케이션(Web Application)이라는 단어를 많이 사용된다.
애플리케이션의 규모가 커지고 다양한 UI,UX를 구현하기 위해서는 이전의 방법으로는 개발하고 코드유지보는 하는게 어려워짐에 따라 👉🏻 “규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장”하게 된 것이다.
Frontend Framework(Library)
- UI를 자동으로 업데이트 해주는 장점을 가지고 있음
Angular
- 2010년 Google에서 개발한 Framework
- TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App개발 가능
- 다양한 기능 내장
- 무겁고 배우기 어려움
- MVC(Model-View-Controller) Architecture
Vue
- 2014년 Evan You라는 개인이 개발한 Framework
- 코드가 깔끔하고 배위기 쉬움
- 급 성장중
- MVC(Model-View-Controller) Architecture
React
- 2013년 Facebook에서 개발한 Library
- View만 담당
- third-party 라이브러리와 함께 사용(ex. React-router, Redux )
- 생태계 활성화
React란
- 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
- 가상돔(Virtual Dom)을 통해 UI를 빠르게 업데이트함 -> 가상돔: 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술
작업환경설정
Node.js
- 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경
- 프로젝트를 개발하는 데 필요한 주요 도구들(ex.바벨, 웹팩 등)이 Node.js 기반이기에 반드시 설치 필요
- npm(node package manager)이 자동으로 설치
- 터미널 명령어 :
$ node -v
npm
- Node 기반의 패키지를 사용하기 위해 패키지 도구 필요
- 다양한 패키지를 설치하고 버전을 관리할 수 있음
- 터미널 명령어 :
$ npm -v
CRA(Create-React-App)
- 리액트 프로젝트를 시작하는 데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
- 리액트는 UI만 제공하기에 개발자가 직접 개발환경을 구축해야 하는 것들이 많음 🌟 CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축 가능 🔥 CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경 제공 🔥