Node & React basic #11

이제 프론트엔드로 넘어왔다.
React는 JS라이브러리이다(프레임워크가 아님)

React의 특징

1. 컴포넌트로 이루어져있어 재사용성이 뛰어나다.
2. Real DOM vs Virtual DOM
   • Real DOM
     -여러 리스트가 있을 때 한 가지의 리스트만 업데이트하고 싶어도 전체 리스트를 다시 Reload해야한다.
     
   • Virtual DOM
     - 여러 리스트가 있을 때 한 가지의 리스트만 업데이트하는 게 가능!

Virtual DOM의 작동원리

이전 virtual DOM의 snapshot을 찍어서 바뀐 부분을 찾는다. 이 과정을 diffing 이라고 부름.

Create React App

예전에는 리액트 앱 실행을 위해 webpack이나 babel같은 것을 설정하기 위해 엄청나게 많은 시간이 걸렸으나 이제는 CRA를 통해 바로 시작할 수가 있음.

Babel

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해 최신 자바스크립트 문법을 구형 브라우저에서도 돌릴 수 있도록 ES5로 변환시켜준다.

우리 프로젝트에 리액트를 끼얹자

이제까지 만들었던 폴더들을 server라는 큰 폴더에 다 넣고 client폴더를 만들었다.
그 다음 cd client로 경로를 이동하고 npx create-react-app .으로 리액트를 시작하자.

평소에는 아예 쌩 루트폴더에서 npx create-react-app [폴더명]식으로 리액트를 시작했었는데 이건 또 새롭네.

npm vs npx

• npm
  - 레지스트리 저장소 역할
  - 레지스트리: 디펜던시 라이브러리를 담고 있음
  - 빌드시에도 이용함
  - Node Package Manager
  - npm을 이용해 다운로드시 -g를 붙이지 않으면 로컬에 다운로드한다는 의미
  - 로컬이 아닐 경우: 글로벌로(컴퓨터에)다운로드하게 됨
  
• npx
  - 원래는 글로벌에 CRA를 했었는데 이제 npx를 이용해 노드 레지스트리에 있는 걸 가져와서 쓸 수가 있음
  - 디스크 용량을 낭비하지 않고, 항상 최신 버전 사용가능!
  

CRA 폴더구성

우리가 npm run start를 이용해서 리액트앱을 구동할 수 있는 이유는 package.json의 script의 start부분 덕이다. 만약 이 start부분을 "initiate" : "react-scripts start"이런 식으로 바꾸게 되면 npm run initiate 이렇게 해서 구동을 해야겠지?

webpack에서는 src만 관리하고 public폴더는 관리를 안해준다. 그렇기에 이미지파일과 같은 걸 넣고 싶으면 src에 넣어주어야 webpack이 모아줄 수가 있음.