[ Node.js ] Node 설치

 

Node.js

chrome v8 javascript 엔진으로 빌드된 javascript 런타임 

자바스크립트 문법해석 및 동작하는 자바스크립트 프로그래밍 언어 동작하는 컴퓨터 환경이다.

동작 환경은 node.js 컴퓨터 환경과 브라우저이다.

모듈들을 가져와서 웹페이지를 작업할 때 node.js 를 사용해 모듈을 동작시킨다.

 

 

1. Node.js 설치방법

1-1. Node.js 홈페이지 설치

하나의 버전만 설치 할수 있다. 안전성있는 짝수 버전 설치를 권장한다. 

하지만 설치한 버전 말고 다른 버전의 node.js 환경에서 개발을 진행해야할 수도 있다. 

때문에 해당 페이지에서 하나의 버전을 다운 받는 것보다 노드 버전 메니저를 설치하는 것을 권장한다. 

Node.js

 

 

 

1-2. 노드 버전 메니저 윈도우 설치 방법

1) nvm-windows 설치

https://github.com/coreybutler/nvm-windows

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

 

2) 페이지에서 ' Download Now ' 선택

3) nvm-setup.zip 파일을 설치해서 압축을 풀고 프로그램 실행하여 설치한다.

 

4) 명령 프롬프트또는 사용하는 비주얼스튜디오에서 아래 명령어를 통해 설치된 버전을 확인 가능하다. 

nvm --version

 

5) 원하는 버전의 node.js 설치 

- 현제 설치 된 버전 확인

nvm ls

- 버전 설치 

nvm install 18.17.1

- 최신버전도 설치

- 버전 선택 방법

nvm use 버전

- nvm 관련 명령어 확인

nvm --help

- 이제 node.js 명령어를 사용가능하며 버전도 확인 가능하다.

 

 

 

2. npm ( 노드 패키지 메니저 )

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

EX) Lodash, GSAP, SWIPER, ...

 

2-1. npm 프로젝트 생성

1) 비쥬얼코드 터미널

생성 명령어 작성 -> package.json 파일 생성

npm init -y

 

2-2. 모듈  설치

node_modules 폴더 안에 설치된다.

package.json 파일에 설치한 내역이 남는다.

npm install parcel-bundler -D
npm install lodash

 

 ※ 개발용 의존성 패키지 설치 (--SAVE -DEV 약자)

개발할때만 필요하고 웹브라우저를 실행할때 필요가 없는 경우

$npm install -D XXX

 

 

 ※ 일반 의존성 패키지 설치

실제로 웹브라우저에서 동작

$npm install XXX

 

 

※ package.json를 통한 패키지 재 생성

만약 node_modules 폴더가 삭제되거나 없어도

package.json 파일의 내역으로 다시 생성이 가능하다. 

때문에  package.json 파일과 package-lock.json 파일은 삭제되어서는 안된다.

npm install
npm i

 

 

3. 터미널을 활용한 브라우저 실행 

parcel을 사용하여 터미널에서 실행

 

3-1. package.json 수정

1) parcel-bundler가 설치

2) scripts 수정 dev 설정 추가 

📑 package.json

{
  "name": "regexp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev" : "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

 

3-2. 터미널에서 명령어를 통해 실행 브라우져를 열 수 있다.

 npm run dev

파슬 번들러라는 패키지가 dist폴더에 파일들을 난독화 시켜준다. 

난독화된 파일들은 탭이나 불필요한 공간들을 제거해서 웹브라우저에서 동작만을 위한 파일이다. 

dist라는 파일만 제공하면 실제 웹사이트에서 동작이 가능하다.

 

 

4. npm 모듈 버전 관리 

 

📑 package.json

"lodash": "^4.17.21"

 

4-1 . 모듈  버전 수정 방법

npm install lodash@4.17.20

 

4-2. 버전 업데이트 

버전 앞에 ^ 가 붙어있으면 최신버전이 있다면 업데이트를 허용한다는 명시 이다. 

하단 명령어 실행시 최신버전으로 변경된다.

npm update lodash