[JS] Node.js 및 NPM이란?

1. Node.js

 

Chrome V8 JS 엔진으로 빌드된 JS 런타임 환경으로, 주로 서버 사이드 애플리케이션 개발에 사용되는 S/W 플랫폼

 

- Release Schedule을 참고하여 안정적인 버전으로 설치하면 됨

출처 : Node.js Release Schedule

 

설치 주소

https://nodejs.org/en

Node.js

 

 

2. NPM

 

Node Package Manager : Node.js 환경에서 npm으로 각각의 모듈들을 패키지화하여 직접 설치하고, 관리, 동작시켜야함

- 패키지는 직접 만들어서 배포할 수 있고, 다른 사람이 배포한 여러 패키지 모듈들을 설치해 프로젝트에 적용시킬 수도 있음

 

1) npm 생성

npm init

 

- 자동으로 package.json 파일을 생성

- npm init -y 입력 시, 별도 설정 필요 없이 바로 생성 가능

- package.json 파일은 패키지들을 일괄적으로 관리

{
    "name": "npm-test",
    "version": "1.0.0",
    "description": "test for npm",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node index.js"
    },
    "author": "test",
    "license": "MIT"
}

 

- script 속성 :기본 값은 test로 설정됨. 스크립트 실행 명령을 여러개 정의할 수 있는데, 주로 해당 프로젝트 실행 파일을 시작하는 명령어를 start로 지정함. build는 제품용으로 배포하기 위해 사용.

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

-> 터미널에 npm run + dev 와 같이 입력하여 스크립트 실행

-> 이후 dist 폴더( 폴더 내부 index.html이 브라우저에 보이는 화면) 생성, dist 폴더만 있으면 서비스 배포는 가능

 

** 주의 **

html 파일에서 js 파일을 설정할 때, <script type ="module" src="./main.js"></script> 설정 필수

--> 또 에러가 난다면 vscode 종료 후, 재시도 --> .parcel-cache 삭제 후, 명령어 재시도

 

 

2) 패키지 설치

npm install 패키지명

 

- npm에 올라와있는 패키지를 다운받을 수 있는 명령어

- 해당 패키지 모듈이 의존하는 여러 패키지들이 같이 다운됨

- node_modules 폴더를 삭제하고, 이 명령어만 입력하면 package.json과 package-lock.json( 여러 모듈에서 의존하고 있는 다른 패키지 모듈 버전관리를 위한 파일) 의 내용을 기준으로 다시 전체 패키지를 설치해줌

 

3) node_modules 폴더

- npm으로 설치된 외부 패키지, 그 종속성들이 저장되는 공간

- .gitignore 파일에 node_modules 필수(버전관리 필요없음)
- dist 파일도 마찬가지로 버전관리 필요없음

 

 

 

3. Parcel

 

- lodash 같은 여러 가지 패키지들을 실제 웹사이트에 올라갈 수 있는 하나의 구조로 묶어주는 역할

  --> 번들러(여러 개로 모듈화된 js 파일을 하나로 합치는 도구, 브라우저는 모듈화된 js 를 읽지 못하기때문에 브라우저에서 코드를 실행하기 위해 반드시 필요)

- 웹 사이트에서 직접 동작하는 패키지가 아니기 때문에 --save-dev라는 플래그를 붙여서 설치해야함
- --save-dev : 개발할 때만 사용하고, 웹브라우저에서 동작은 안한다는 의미 = --save-dev는 -D와 같음
- parcel은 기본적으로 ts를 지원

 

1) 설치

npm install parcel --save-dev

 

2) 실행

- package.json 파일 수정

- 최초로 어떤 파일을 기준으로 해서 번들을 시작할 것인지 명시해야하고,
   그때 개발용 서버를 오픈하는 명령과 실제 제품화해서 배포용으로 만드는 빌드용 명령이 있을 수 있음

- script 속성에 parcel ./index.html 추가

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

** 개발서버 오픈해서 테스트 : dev
** 실제 제품화해서 서버로 배포 : build

 

- npm run dev 실행

- 터미널에 출력된 주소로 들어가면 index.html 실행

 

 

 

 

4. Semantic Versioning = SemVer (유의적 버전)

 

- 프로젝트가 개발되는 특정한 시점 상태에 의미를 부여해서 숫자를 매기는 방법

 

버전 : 16.17.1

버전 : Major.Minor.Patch

 

Major	기존버전과 호환되지 않는 새로운 버전
Minor	기존 버전과 호환되는 기능이 추가된 버전
Patch	기존 버전과 호환되는 버그 및 오타 등이 수정된 버전

 

(1) ^ (carrot) 기호

- major 버전 안에서 가장 최신 버전으로 업데이트 가능

- "npm update 패키지명" 명령어를 입력하면 캐럿 기호가 있을 경우, 업데이트가 가능함

   -> 기호를 지울 경우, 버전은 바뀌지 않음

 

(2) @ (assign) 기호

- 버전 명시하여 설치 가능
  ex) npm install lodash@4.17.30

 

(3) ~ (tilde) 기호

- patch 버전 안에서 가장 최신 버전으로 업데이트 가능 (patch만 업데이트할 때)
  ex) ~4.17.16