[Webpack] Node.js와 NPM

학습한 웹팩 버전: v4.41

학습 자료: 프론트엔드 개발자를 위한 웹팩, 웹팩 핸드북

학습 내용
- Frontend 빌드 시스템 이해: NPM, Webpack
- 자바스크립트 모듈화(AMD, Common.js, ES6 Modules)
- Webpack 개요(등장 배경, 철학 등)
- Webpack 주요 속성 4가지
- 배포 환경에서 알고 있어야 할 Webpack특징과 설정 등

웹팩을 사용하기 위해서는 Node.js와 NPM이 컴퓨터에서 설치되어 있어야 한다.
그래서 이 둘이 뭔지를 알고있어야 한다.

1. Node.js

Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다.

 

2. NPM

Nods.js를 설치하면 같이 설치되는 NPM(Node Package Manager)는 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 _패키지 매니저_이다. 즉, 전세계 자바스크립트 라이브러리를 관리해주는 공개 저장소, 도구로 생각하면 될 것 같다. 자바스크립트 라이브러리를 여기 올려놓고 있으며, npm 명령어로 쉽게 다운받을 수 있다.

1) node.js, npm 버전 확인

//터미널
node -v
npm -v

2) npm 초기화 명령어: init

npm 폴더를 하나 만들고 그 폴더에서 아래의 명령어를 실행한다.

//터미널
npm init

그 이후에 나오는 것들에 대해 일단 enter를 치면서 다 넘어가면

package.json 파일이 생성되며 파일 내용은 아래와 같다. (아니면 npm init -y 로 치면 그냥 바로 기본값으로 package.json 파일을 만들어준다. )

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

위 구조는 가장 기본적인 구조이며 실제 애플리케이션을 만들 때 자주 사용되는 속성은 다음과 같다.

• scripts
• dependencies
• devDependencies

3) npm 설치 명령어

① install

//터미널
npm install [설치하고자 하는 라이브러리명] (--save-prod)
// 즉 npm install [설치하고자 하는 라이브러리명]까지만 쳐도 --save-prod를 친 것과 같다.

그러면 node_modules라는 폴더가 생성되고 그 안에 [설치하고자 하는 라이브러리]의 폴더들이 들어가있는 것을 확인 할 수 있다.

※ 그렇담 이렇게 npm으로 라이브러리를 관리하는게 왜 좋을까?  npm의 장점

어떤 페이지를 만든다고 하고 index.html 파일에 작업을 한다고 하자. 필요한 라이브러리를 그때그때 <script로 불러와서 사용할 "수도" 있는데.. 그렇게 한다면 여기서 사용된 라이브러리가 뭔지 알아보려면 cmd+f로 script를 다 찾아서 하나하나 봐야된다는건가? 싶다.

으.. 생각만해도 비효율적이고, 버전 문제, 의존성 문제(특정 라이브러리가 다른 라이브러리에 영향을 받는 경우) 등이 발생할 수도 있다.

이러한 것들이package.json에서 정리가 깔끔하게 되어있다면, 해당 프로젝트의 라이브러리 목록과 각각의 버전들을 한눈에 알아보기 쉽게 관리 할 수 있을 것이다.

그리고 npm install이라는 간단한 명령어로 해당 로컬 컴퓨터 환경의 프로젝트 위치에 필요한 라이브러리가 설치되고, 이를 바로 사용할 수 있다는 것도 매우 큰 장점이다.

② uninstall

설치한 것을 모두 없앨 때 사용하는 명령어

//터미널
npm uninstall [제거하고자 하는 라이브러리명]

③ 실행옵션 추가: --global(NPM 전역 설치)

_NPM 전역 설치는 위와 같이 프로젝트에서 사용할 라이브러리를 불러올 때 사용하는 것이 아니라 시스템 레벨에서 사용할 자바스크립트 라이브러리를 설치할 때 사용_한다.

//터미널
npm install [설치하고자 하는 라이브러리명] --global

이렇게 설치된 라이브러리는 명령어 실행 창(터미널)에 해당 라이브러리 이름을 입력했을 때 명령어를 인식한다. (즉, command not found와 같은 메세지가 뜨지 않는다.)

※ 이렇게 설치하는 경우 node_modules에도 보이지 않는다. 그럼 어디 설치되어 있는 것일까?

_이렇게 설치된 자바스크립트 라이브러리는 어느 위치에서 해당 명령어를 실행했던지 간에 OS별로 아래와 같은 폴더 경로에 설치_된다.

(cf. 지역설치로 설치한 경우는 해당 프로젝트의 node_modules__라는 폴더가 생성되고, _그 폴더 아래에 해당 라이브러리 파일들이 설치되어 있다.)

// mac
/usr/local/lib/node_modules

④ NPM 지역 설치 옵션 2가지

NPM 지역 설치에 자주 사용되는 2가지 옵션은 두가지가 있다.

npm install [설치하고자 하는 라이브러리] --save-prod (또는 npm install [설치하고자 하는 라이브러리])
npm install [설치하고자 하는 라이브러리] --save-dev

여기서 설치 옵션에 아무것도 넣지 않았거나 --save-prod를 해준 npm install [설치하고자 하는 라이브러리]는package.json의dependencies에 등록된다.

설치 옵션으로 --save-dev를 넣은 경우에는 해당 라이브러리가 package.json의 devDependencies에 등록된다.

⭐️ 개발용 라이브러리와 배포용 라이브러리 구분하기

NPM 지역 설치를 할 때는 해당 라이브러리가 배포용(dependencies)인지 개발용(devDependencies)인지 꼭 구분해서 설치해주어야 한다. 

예전에 이런 것을 아무것도 모를 때, 첫번째 프로젝트를 진행 할 때  배포용/개발용 구분 없이 모든 라이브러리를 --save-dev로 설치했었다ㅠ..

 

★ 예를 들어, jquery와 같이 화면 로직과 직접적으로 관련된 라이브러리, 애플리케이션이 동작시킬 때 필요한 라이브러리는 배포용(즉, dependencies에 있도록)으로 설치해야 한다. 이렇게 설치된 배포용 라이브러리는 npm run build로 빌드를 하면 최종 애플리케이션 코드 안에 포함된다.★

 

★ 반면 --save-dev로 devDependencies에 있도록 설치해 준 라이브러리는  빌드하고 배포할 때 애플리케이션 코드에서 빠진다. 그렇기 때문에 최종 애플리케이션 구동에 포함되어야 하는 라이브러리는 --save-dev로 설치하면 안 되는 것이다.★

 

개발할 때만 사용하고 배포할 때는 빠져도 좋은 라이브러리의 예시는 다음과 같다.

• webpack: 빌드 도구
• eslint: 코드 문법 검사 도구
• imagemin: 이미지 압축 도구

 

reference

joshua1988.github.io/webpack-guide/build/node-npm.html