Node.js | React | MongoDB | Express (5)

Node.js | React | MongoDB | Express (5)

1. React.js

React
1) 페이스북에서 만든 라이브러리(2013)
2) 컴포넌트(Components)로 이루어짐 (재사용성 높음)

• ex) 좋아요 버튼 기능을 파일에 몰아넣어서 모듈화 가능
  = 해당 컴포넌트를 재사용 가능

3) Virtual DOM

Real DOM vs Virtual Dom
Real DOM (super expensive)
리스트 10개가 있을 때 리스트 한개만 update되면 전체 리스트를 다시 reload =
Virtual DOM
리스트 10개가 있을 때 리스트 한개만 update되면 바뀐 한 가지만 DOM에서 바꿔줌
HOW?
두 DOM은 property가 같지만, (real dom을 가볍게 copy한 것이 virtual dom)
virtual dom은 스냅샷을 찍어서 기억하고 새로 살펴보면서 바뀐 부분만 realdom에서 변경

라이브러리 VS 프레임워크
라이브러리 : 활용가능한 도구들의 집합 | 개발자가 만든 클래스에서 호출하여 사용 | 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식
프레임워크 : 상호 협력하는 클래스와 인터페이스의 집합
...............................................................................................................................................................................................................
차이점 : 제어흐름에 대한 주도성 (flow를 누가 쥐고있는가)
라이브러리 : 호출하는 측에 전적으로 주도성 (가져다 씀)
프레임워크 : 틀 안에 이미 제어흐름에 대한 주도성이 내포됨 (가져와서 사용X 들어가서 사용O)
= 제어의 역전 (프레임워크의 event, delegate에 나의 메소드를 등록, 등록된 메소드만 감지하여 실행invoke) OR (프레임워크에 정의된 인터페이스, abstract을 나의 코드에서 구현, 상속 후 프레임워크에 넘겨주는 방법)

2. React 환경 setting

Babel
javascript 이용할때 추가된 js method들이 old browser에서 돌 수 있게끔 ES5 문법으로 변환시켜 주는 것
Webpack
website 만들때 많은 라이브러리와 프레임워크 사용하다보니 복잡해짐
webpack을 이용해서 bundle(묶어)해줌
많은 모듈들을 묶어서 간단하게 만들어주는 역할

---

react 다운

server, client 파일 생성
cd client
npx create-react-app .              // '.'붙이면 해당 파일에 download

3. NPM NPX

NPM

• 라이브러리 담는 역할 (package json에 나와있는)
• 어플리케이션 배포 (npm run build)
• local로 다운 (해당 프로젝트 node_moudles에 다운)
• global로 다운 (컴퓨터에 다운)

npx

• npx를 이용해서 repository에 있는 react create app 이용가능
• disk space 낭비 X
• 항상 최신버전 사용가능