개요 및 설치

정의

JavaScript 런타임

여기서 런타임이란??
=> 프로그래밍 언어가 동작하는 환경!

LTS(Long Term Supported)

• 장기적으로 안정되고 신뢰도가 높은 버전 (ex. 14.16.0 LTS)
• 유지/보수와 보안에 초점을 맞춤

NVM(Node.js Version Manager)

• node.js의 여러버전들을 한번에 관리해주는 도구

nvm install 하는방법

NPM 개요

NPM(Node Package Manager)

전 세계 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리

=> npm 생태계에서 필요한 기능을 가져와서 설치!

• npm 초기세팅 : npm init -y

• node_modules 폴더 : 삭제해도 npm install
  또는 npm i로 다시 설치 가능!

• 하나의 패키지안에 또다른 패키지들이 존재
  => package-lock.json이 관리해줌

install vs install -D(–save-dev)

• install : 일반 의존성 설치
  실제 웹브라우저가 동작할때도 사용됨
  ex) lodash

• install -D : 개발용 의존성 패키지 설치
  개발도중에만 도움을 받음
  ex) parcel-bundler

개발 서버 실행과 빌드

• parcel-bundler (dev)

  • 라이브서버 열어주는 기능
  • -D 로 설치하였기 때문에 우리 프로젝트에서만 쓰임.. -> 터미널에서 ‘parcel index.html’ 불가능
  • 해결방법
    1. package.json -> scripts 영역안
    2. “dev”: “parcel index.html”
    3. npm run dev

• parcel-bundler (build)

  1. package.json -> scripts 영역안
  2. “build”: “parcel build index.html”
  3. npm run build
     

  • dist 폴더 : 빌드된 결과가 생성 == 제품 -> 사용자에게 보여지는 것 -> 정리된 코드가 필요 X

  • 브라우저만 해석되면 됨 -> 용량을 축소하고 읽기 어렵게 만드는(난독화)등의 최적화를 거치게 됨!

bundle -> 프로젝트에 사용한 여러 모듈(패키지)를 하나로 묶어내는 작업

parcel-bundler로 개발 & 제품화 가능
-> open with live server 대신에 npm run dev를 활용한 개발용 서버

• lodash
  • import _ from ‘lodash’
    -> lodash 패키지안의 package.json 안의 “main” 옵션의 lodash.js의 내용들을 가져온다는 뜻!
    
    

유의적 버전(SemVer)

^ -> 업데이트 허용한다는 의미
npm update lodash로 업데이트 가능
내가 쓰고 있는 버전이 마음대로 업데이트 될수도 있음..
=> 버전 유지하고 싶으면 ^ 기호 지우기!

NPM 프로젝트의 버전 관리(.gitignore)

내가 사용한 패키지들의 버전
=> package.json에 명시되어 있음
node_modules는 따로 github에 버전관리 할 필요 X

node_modules : npm i
.cache & dist : npm run build
-> 재생성 가능
-> 얼마든지 npm i로 npm 생태계 생성 가능

즉, node_modules, .cache, dist는 용량 아끼기 위해 .gitignore에 담아둠