웹의 발전: 3세대 웹(프론트와 백의 분리)
복잡성 증가 -> 기술발전
웹과 사용자들이 상호작용하면서 사용자들이 원하는 기능은 점점 더 많아지고 프론트엔드 개발자들은 새로운 기술의 필요성을 느낀다.
그렇게 만들어진 것이 프론트엔드 프레임워크(Angular, vue 등)
DOM/event
는 j query
로 발전하였지만 DOM구조에서 벗어나지 못하는 한계점을 지닌다.
Angular, vue는 framework이고 react는 library이다.
MVC(Model-View-Controller) Architecture
로 오로지 View(화면에 보여지는 것)만을 담당한다.프레임워크와 라이브러리의 차이에 대한 예시를 들자면 프레임워크는 마스터셰프키친 주방이고 라이브러리는 도구라고 생각하면 된다.
마스터셰프키친 주방에서는 필요한 도구들과 환경들을 모두 제공해주지만 우리가 임의로 원하는 도구들로 바꿀 수 없다. 거기서 제공하는 것에 한하여 사용을 하여야한다.
하지만 라이브러리와 같은 도구만 가지고 있다면 도구는 쉽게 바꿀 수 있다. 그리고 다른 도구들을 원하는 것으로 가지고 올 수도 있다. 하지만 마스터셰프키친처럼 방대한 환경을 제공하지는 못한다.
가상 돔(Virtual Dom)
을 통해 UI를 빠르게 업데이트함절차적은 어떻게 하는것인지를 설명한다면 선언적은 원하는 결과의 그림을 보여주는것
예를 들면 로봇에게 청소를 시키는 경우를 생각해보자
노드는 자바스크립트 실행 환경이다.
자바스크립트는 텍스트의 형태를 띄는데 이 텍스트를 컴퓨터가 해석하고 실행할 수 있는 도구를 자바스크립트 실행환경이라 한다. 대표적인 자바스크립트 실행환경은 우리가 잘 아는 브라우저이다.
하지만 우리는 브라우저가 아닌 다른곳에서도 실행하고 싶기 때문에 Node를 사용한다.
Node는 자바스크립트의 탈웹이라고도 칭할 수 있다.
우리가 프로젝트를 만들때는 웹브라우저에서 만드는것이 아닌 컴퓨터에서 만들어서 깃에 푸쉬하거는 과정을 거치기 때문에 node가 필요하다!
우리는 react를 실행할 환경인 CRA의 다양한 패키지들이 노드를 기반으로 하고 있기 때문에 node를 설치하여야한다.
Node 기반의 패키지를 사용하기 위해서는 npm(node package manager)이라는 패키지 도구가 필요하다.
package는 노드로 실행할 수 있는 하나하나의 프로그램(react, babel, webpack)등이 있다.
Node는 스마트폰, npm은 웹스토어라고 할 수 있다.
CRA는 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구(toolchain)이다.
쉽게 비유하자면 듀토리얼 없이 본겜을 시작하는 경우라고 생각하면 된다.
처음 시작하는 단계에서는 직접 개발환경을 구축하기가 매우 힘들기 때문에 리액트 팀에서 만들어준 개발환경이다.
CRA에는 바벨이나 웹팩과 같은 리액트 앱 실행에 필요한 다양한 패키지가 포함되어 있으며 ES6 문법, CSS후처리등 필수적인 개발환경도 구축해준다.
1) node.module
2) package.json
dependencies
node.modules
폴더에 존재package.json의 핵심 중 하나는 git.ignore과 연계하여 사용할 수 있다는 것!
node.modules
폴더는 너무 무겁기 때문에 local에서는 저장하는게 당연할 수 있어도 github와 같은 곳에 올릴 때 용량을 불필요하게 너무 차지한다.- 따라서 우리는 git에 푸쉬할 떄
git.ignore
을 통해 node.modules
와 같은 무거운 파일을 제외해준다.package.json
에 정보만 담아 push하고 다른 사람이 pull하면npm install
을 통해package.json
의 기록된 정보를 토대로 패키지를 설치할 수 있다.
3) git.ignore