Webpack - (3) Node.js 와 NPM 을 아는 것이 힘이다.

 

Node.js 와 NPM을 알면 웹팩을 다루기 용이해집니다.

 

Node.js

• 자바스크립트 코드를 서버에서 실행하기 위한 런타임 환경입니다.
• 자바스크립트를 백엔드에서도 사용할 수 있기 때문에 전체 애플리케이션을 하나의 언어로 작성할 수 있습니다.

 

Node.js 실행

App.js 파일에서 다음 명령어를 입력하고 ,

// App.js

console.log('hello')

터미널을 이용하여 해당 경로에서 node 명령어로 파일을 실행하면 "hello"가 출력됩니다.

node App.js

 

 

NPM(Node Package Manager)

• 자바스크립트의 패키지 관리자입니다.
• Node.js 의 기본 패키지 관리자 역할을 하며, 애플리케이션을 개발할 때 다양한 라이브러리와 도구를 설치하고 관리하도록 도와줍니다.

*NPM 은 Node.js 설치 시 자동으로 설치됩니다.

 

NPM 실행

우선, 폴더하나를 만들고 해당 경로에서 아래 명령어를 실행합니다.

npm init -y

npm 의 가장 기본적인 구조를 담은 package.json 파일이 생성됩니다.

 

 

한 마디로, 

Node.js는 서버 측 자바스크립트 런타임 환경이고, NPM은 그 환경에서 사용하는 패키지 관리자다.

NPM 모듈 설치하기

npm install 라이브러리
npm i 라이브러리

지역 설치

package.json 파일 생성 후 프로젝트에서 사용할 자바스크립트 라이버리를 설치합니다.

npm install 라이브러리 --save-prod
// --save-propd 생략 가능

 

NPM 으로 라이브러리가 설치되면 node_modules 폴더가 생성됩니다.

 

개발용 / 배포용 라이브러리 NPM 설치 옵션 

NPM 을 지역으로 설치할 때 해당 라이브러리가 개발용인지 배포용인지 구분하여 설치해야 합니다.

 

• 배포용 라이브러리 설치 옵션
  • --save-prod / 생략 가능
  • 화면 로직과 직접적으로 관련된 라이브러리(ex: jquery)

npm install 라이브러리 --save-prod
// npm install 라이브러리 와 동일

배포용 라이브러리 설치 시 package.json 의 dependencies 에 라이브러리가 등록됩니다.

 

배포용 라이브러리가 설치되면 다음 명령어로 빌드하면 최종 애플리케이션 코드 안에 포함됩니다.

npm run build

 

• 개발용 라이브러리 설치 옵션
  • --save-dev / -D

npm install 라이브러리 --save-dev
// npm install jquery -D

개발용 라이브러리 설치 시 package.json의 devDependencies 에 라이브러리가 등록됩니다.

 

개발용 라이브러리 설치의 경우 빌드 시에 애플리케이션 코드에서는 빠지게 되므로,

최종 애플리케이션에 포함되어야 하는 라이브러리는 --save-prod(생략가능) 옵션을 사용하여 설치해야 합니다.

 

전역 설치

npm install 라이브러리 --global
npm inatall 라이브러리 -g

프로젝트에서 사용할 라이브러리가 아닌, 시스템 레벨에서 사용할 자바스크립트 라이브러리를 설치합니다.

 

전역 설치 경로

시스템 레벨에 설치된 라이브러리는 반드시 다음 경로에 설치됩니다.

// Mac OS
/usr/local/lib/node_modules

// Window OS
%USERPROFILE%\AppData\Roaming\npm\node_modules

 

라이브러리가 설치되면 터미널에 해당 라이브러리 이름을 입력했을 때 명령어를 인식합니다.

 

NPM 커스텀 명령어

npm 에서 제공하는 것 외에 사용자가 직접 정의한 이름과 동작을 수행하는 명령어입니다.

npm run 명령어

 

예시) "hello world"를 출력하는 명령어

 

다른 커스텀 명령어와의 조합도 가능합니다.

먼저 build 에 정의한 react-scripts build 명령어가 실행된 후 delpoy 의 --mode production 명령어가 실행됩니다.

 

참고:
https://joshua1988.github.io/webpack-guide/build/node-npm.html