React의 두둥 등장

• React는 3세대 웹의 등장으로 웹의 규모가 커지고 복잡해지면서 웹 페이지를 효율적으로 만들고 관리하기 위해 만들어진 라이브러리다.
• '웹의 규모가 커졌다'는 말을 프론트엔드의 입장에서 볼 때 '유저 인터렉션이 많아지면서 UI 변화가 많아졌다'고 말할 수 있다. 즉, DOM의 event만으로는 모든 조작이 어려워지면서 새로운 기술이 필요하게 된 것이다!

c.f web의 발전

• 1세대 웹
  HTML/CSS 중심, JavaScript는 아주 조그마한 존재
• 2세대 웹
  jQuery 등장 (DOM 조작을 쉽게 만드는 Method 모음), DOM과 Event로 구현할 수 있는 범위가 넓어짐
• 3세대 웹
  3세대 웹 프레임워크: Angular, Vue, React
  -> *DOM을 직접 조작하지 않고도 구현이 가능해졌다.

Frontend Framework(Library)

• Angular
  2010년 Google에서 개발한 프레임워크
  TypeScript 기반 안정적이고 탄탄한 프론트엔드 앱 개발 가능, 다양한 기능 내장되어 있다. 단, 무겁고 배우기 어렵다.
• Vue
  2014년 Evan You라는 개인이 개발한 프레임워크
  코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 빠르다.
• React
  2013년 페이스북에서 개발한 라이브러리
  "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것"을 목표로 만들었다.
• MVC(Model-View-Controller) Architecture와 달리오로지 view만 담당한다.
• 내장되어 있는 기능이 부족해 third-party 라이브러리(라우터, 리덕스)를 함께 사용한다.
• 페이스북의 지속적이 관리와 함께 생태계가 활성화되어있다. 다양한 자료, 리액트 네이티브의 사용으로 사용자 꾸준히 증가하고 있다.

Framework vs Library

• 공통점: 남들이 만들어둔 코드!
• 차이점: 프레임워크는 뼈대가 만들어진 틀에 개발자가 들어가서 쓰는 방식이며, 라이브러리는 특정 기능에 대한 도구 모음으로 도구를 내가 개발할 프로젝트에 가져다 쓰는 방식이다.

React 개념과 특징

• 사용자 인터페이스(UI)를 만들기 위한 JavasScript 라이브러리
• 프론트엔드 라이브러리로, 프레임워크는 UI를 자동으로 업데이트 해준다.
• React는 가상돔(Virtual DOM)을 통해 UI를 빠르게 업데이트한다.
• 가상돔(virtual DOM): 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술
  => 불필요한 UI 업데이트는 줄고, 성능은 좋아진다!
• React는 선언적 프로그램이다.
  cf. 절차적 방식 vs 선언적 방식
  절차적: 절차를 순서대로 모두 프로그래밍 하는 방식 ("방 청소를 하자" 청소기를 돌린다->빨래를 한다-> 빨래를 넌다..)
  그런데 깨끗하지 않다면? 어디서부터 잘못됐는지 모든 절차를 검토해야한다.
  선언적: 방이 깨끗해진 모습을 상상한다. 내 방은 깨끗해! 선언한다. -> 실제로 방이 깨끗해져 있다.!!

Settings

node.js

• node란? JavaScript 브라우저 밖에서도(서버) 동작하는 런타임 환경 => JavaScript의 탈웹 쌉가능!
• 근데, 리액트는 view만 한다며?
  => 응. 그런데 프로젝트 개발 환경을 구축하는 주요 도구들이 node.js기반으로 되어있지!

npm

• 노드 패키지 도구(node package manager)
• node 기반 패키지를 사용하려면 npm 패키지 관리자가 필요하다.
• npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.
• 패키지란? 노드 환경에서 실행할 수 있는 어플리케이션 (스마트폰: node, 앱: 패키지, 앱스토어: NPM이라 볼 수 있다.)

CRA(Create-React-App)

• React 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(Tool Chain)
• 리액트로 웹 어플리케이션을 만들기 위한 환경 제공하며,
• 하나의 명령어로 리액트 개발 환경 구축이 가능하다.

CRA React 프로젝트 설치 순서
1. 폴더 진입
cd 프로젝트 폴더
2. 프로젝트 설치
npx create-react-app 프로젝트이름
3. 프로젝트 진입
cd 프로젝트 폴더
4. 로컬 서버 띄우기
npm start

CRA 기본 폴더 및 파일 구성

• node.modules
  CRA 구성하는 모든 패키지 소스 코드 존재 폴더
• package.json
  CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
  - dependencies React를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능 (실제 코드는 node.modules에 있다)
  - scripts
  start : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어. npm run start.
  build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.
  
• .gitignore
  github에 올리고 싶지 않은 폴더와 파일을 작성한다. (push해도 업로드 되지 않는다. *node_modules이 단골이다)
  => node_modules는 필요한 정보지만 데이터 용량이 너무 크기 때문이다. 데이터가 필요한 경우는 어떻게 할까?
  => package.json을 올린다.😎

node.modules 와 package.json. 이중으로 패키지를 관리하는 이유!

• 실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재한다.
• github에 올릴 때 내가 작성한 코드와 함께package.json(추가로 설치한 패키지 정보)을 넘긴다.
• 다른 사람이 그것을 (pull) 받아서 npm install 만 입력하면 package.json 에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치한다.
• 이때, github 에 올릴 때, node.modules 는 올리지 않고,.gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.

Cf. 새로운 Library(package) 설치한 후 Tip!
- 라이브러리를 설치한다는 것은 누군가 만든 소스코드를 다운받는 것이다.
- npm으로 설치 (ex. npm install slider)
- 설치 시 node modules 에 자동으로 설치됨.
- 하지만 package.json - dependencies 에 추가 자동으로 되는 건 아니다.
=> 따라서, npm install slider —-save
- —-save 까지 작성해야 dependencies 에 추가된다.