Node.js / React

node / react 복습 (RE)

NVM

$ nvm install 10.24.0
$ nvm use 10.24.0

$ nvm ls

$ nvm uninstall 12.21.0

nvm ls로 설치된 노드 버전을 조회할 수 있고,
nvm use로 버전을 쉽게 바꿀 수 있다.

nvm uninstall로 사용하지 않는 버전을 제거할 수도 있다.

npm

= node package manager

• 다양한 패키지, 모듈 등을 관리함
• 관리 효율 증가

$ npm init -y

package.json 파일이 생성되고,
여기서 패키지 관리를 할 수 있다.

$ npm install -D 
$ npm install

• 개발 의존성 (ex> Parcel 번들러)
• 일반 의존성 (ex> lodash 라이브러리)

개발할 때만 사용하는지 or. 웹사이트 이용시 사용하는지

---

개발 서버 실행

• vsCode 내에 live Server 기능도 있지만,
  개발용 서버를 실행시키기 위해 parcel 을 이용한다.

• 파일이 수정되면 자동으로 (새로고침 없이) 리로드 된다.

$ parcel index.html

script 등록

• package.json 수정

"scripts": {
  "dev": "parcel index.html"
},

$ npm run dev

lodash

• main.js

import _ from 'lodash';

• bundle 이란 프로젝트에 사용할 여러 모듈을 하나로 묶어내는 작업을 의미함.

import * as _ from 'lodash';

console.log('hello!');
console.log(_.camelCase('hello world'));

lodash 라이브러리의 _.camelCase 메서드를 이용할 수 있다.

Result

hello!
helloWorld

build

"build": "parcel build index.html"

script에 build도 추가해줌.

• dist 라는 폴더가 만들어지고, 그 안에 index.html, main.~~.js 등이 생성됨.
• dist 폴더 내부의 파일은 난독화가 발생된 상태이므로 가독성은 X.
  -> 실행만을 위한 파일임

---

유의적 버전

= Semantic Versioning (SemVer)

• 특정 패키지의 버전을 의미.
  예> "parcel": "^2.7.0"

• 의미가 있는 버전.

Major.Minor.Patch 순

-> 12.14.1 은
Major = 12 버전
Minor = 14 버전
Patch = 1 버전

✅ 만약 버전 앞에 ^(캐럿)기호가 붙어있다면?

• 메이저 버전 안에서 가장 최신 버전으로 업데이트 가능함.

"parcel": "^2.7.0"

$ npm info parcel

• 특정 버전으로 업데이트(Or 설치)

$ npm install parcel@2.7.0

@(At sign) 뒤에 설치할 버전을 작성해줌.

---

gitignore

• npm 프로젝트의 경우 node_modules나 dist 등의 폴더는 따로 버전관리를 할 필요가 없다.
• 즉, git에 연동을 하지 않아도 된다는 뜻.

-> package.json이 남아있는 한, 언제든지 npm install로 설치 가능하므로!

따라서 git에 올리지 않을(=무시할) 폴더를 지정해주는 gitignore 파일을 생성.

.gitignore

.cache/
dist/
node_modules/

꼭 폴더가 아니라도 (파일이여도 OK)
무시할 폴더명을 한줄에 하나씩 작성해주면 끝.

---

React

• View를 다루는 라이브러리.

• Only Rendering & Update (http client 등의 기능은 X)
• JSX는 Template이 아님 (ejs/pug 같은)

• JS로 변환하려면? (Babel / TypeScript)
• Component Based

Component

• html Element와 같이 마크업 형식으로 나타냄
• HTML + CSS + JS를 합친 내가 만든 태그를 의미
• virtual DOM은 diff를 계산하여 렌더링함.

---

SSR VS CSR

SSR	CSR
JS가 전부 다운되지 않아도 일단 화면은 보임 (이용할 순 X)	JS가 전부 다운되어야 화면이 보임

-> 여기서 '이용' 이란, 사용자 인터랙션을 의미함.