Node.js와 NPM

Node.js를 사용하기 위해서는 Node.js와 NPM이 컴퓨터에서 설치되어 있어야 한다.
그리고 이 도구들에 대해 어느 정도 배경 지식이 있으면 개발을 하는데 많은 도움이 된다.

Node.js

Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다.
간단하게 줄여서 Javascript 런타임(자바스크립트가 구동되는 환경)이라고도 한다.
Node.js가 나오기 전까지는 자바스크립트가 브라우저의 동작을 제어하는데 사용되었고 브라우저에서만 실행할 수 있었지만 이제는 Node.js로 자바스크립트를 브라우저 밖에서도 실행할 수 있게 되었고 javascript로 파일을 조작하고 서버까지 개발을 할 수 있게 되었다. Node.js 짱

Node.js 맛보기

Node.js를 이해할 수 있는 가장 간단한 방법은 아래와 같은 파일을 만들고 실행해보는 것이다.

// app.js
console.log('hi');

위와 같이 app.js 라는 파일을 하나 만들고 내용을 추가한 뒤 터미널(명령어 실행 창)에서 아래 명령어를 입력한다.

node app.js

그러면 자바스크립트 파일이 실행되면서 명령어 입력 창에 hi 라는 텍스트가 출력된다.

NPM

NPM(Node Package Manager)는 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이다.
NPM 공식 사이트에서도 안내가 되어 있지만 전 세계 자바스크립트 개발자들이 모두 자바스크립트 라이브러리를 공개된 저장소에 올려놓고 npm 명령어로 편하게 다운로드 받을 수 있다.

NPM은 Node.js를 설치하면 자동으로 같이 설치된다.

NPM 맛보기

NPM을 맛보기 위해 새 폴더를 하나 만들고 그 폴더에서 아래와 명령어를 실행한다.

npm init -y

명령어가 실행되면 package.json 파일이 생성되고 생성된 파일의 모습은 아래와 같다.

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

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

  • scripts
  • dependencies
  • devDependencies

NPM Module Install

NPM 설치 명령어

NPM에서 가장 많이 사용되는 명령어인 npm install에 대해 알아보겠다.

NPM 전역 설치

NPM 초기화 명령어로 package.json 파일을 생성하고 나면 해당 프로젝트에서 사용할 자바스크립트 라이브러리를 설치하게 된다.
이 때 명령어는 아래와 같다.

npm install jquery --save-prod

그리고 지역 설치 명령어의 경우 명령어 옵션으로 --save-prod 를 붙이지 않아도 동일한 효과가 난다.
또한 install 대신 i 를 사용해도 된다.

# 위 명령어와 동일한 효과
npm i jquery

NPM 지역 설치

위 명령어로 라이브러리를 설치하면 해당 프로젝트의 node_modules 라는 폴더가 생긴다.
그리고 그 폴더 아래에 해당 라이브러리 파일들이 설치되어 있는 것을 확인할 수 있다.

NPM 전역 설치

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

npm install gulp --global

라이브러리가 설치되고 나면 이제 명령어 실행 창에 해당 라이브러리 이름을 입력했을 때 명령어를 인식한다.

gulp

전역 설치 명령어 옵션 --global 대신 -g 를 사용해도 된다.

NPM 전역 설치 경로

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

# window
%USERPROFILE%\AppData\Roaming\npm\node_modules

# mac
/usr/local/lib/node_modules

NPM 지역 설치 옵션 2가지

NPM 지역 설치에 자주 사용되는 2가지 옵션은 다음과 같다.

npm install jquery --save-prod
npm install jquery --save-dev

위 명령어는 아래와 같이 각각 축약할 수 있다.

npm i jquery
npm i jquery -D

여기서 설치 옵션에 아무것도 넣지 않은 npm i jquerypackage.jsondependencies 에 등록된다.

// package.json
{
  "dependencies": {
  	"jquery": "^3.4.1"
  }
}

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

// package.json
{
  "devDependencies": {
    "jquery": "^3.4.1"
  }
}

-D 를 넣을 때와 넣지 않을 때의 차이점을 알아보자

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

NPM 지역 설치를 할 때는 해당 라이브러리가 배포용(dependencies)인지 개발용(devDependencies)인지 꼭 구분해주어야 한다.
예를 들어, jquery와 같이 화면 로직과 직접적으로 관련된 라이브러리는 배포용으로 설치해야 한다.

# 배포용 라이브러리 설치
npm i jquery
{
  "dependencies": {
    "jquery": "^3.4.1"
  }
}

이렇게 설치된 배포용 라이브러리는 npm run build로 빌드를 하면 최종 어플리케이션 코드 안에 포함된다.

그런데 만약 반대로 설치 옵션에 -D를 주었다면 해당 라이브러리는 빌드하고 배포할 때 어플리케이션 코드에서 빠지게 된다.
따라서, 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 안된다.
개발할 때만 사용하고 배포할 때는 빠져도 좋은 라이브러리의 예시는 다음과 같다.

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

NPM Custom Commands

NPM 커스텀 명령어

NPM 커스텀 명령어란 사용자가 임의로 명령어의 이름과 동작을 정의해서 사용할 수 있는 기능을 의미한다.

// package.json
{
  ...
  "scripts": {
    "hello": "echo hi"
  }
}

NPM 패키지 관리 파일인 package.json에 위와 같이 scripts 라는 속성을 추가할 수 있다.
그리고 아래의 명령어를 실행하면 콘솔에 hi가 출력된다.

npm run hello

이처럼 명령어는 실행 창에 매번 긴 명령어를 입력할 필요 없이 커스텀 명령어를 이용해 원하는 동작을 실행 할 수 있다.

NPM 커스텀 명령어는 모두 npm run 명령어 이름 형식으로 실행할 수 있다.

NPM 커스텀 명령어 실제 사례

NPM 커스텀 명령어는 웹팩 같은 도구 뿐만 아니라 Node.js 등을 사용할 때도 유용하다.
앞에서 배운 내용으로 실제 커스텀 명령어 사례를 몇 가지 살펴보겠다.

"scripts": {
  "dev": "node server.js",
  "build": "webpack --mode=none"
}

위 코드는 서버를 실행하는 dev 명령어와 웹팩으로 빌드하는 build 명령어를 정의한 코드이다.
사용자는 매번 node server.jswebpack --mode=none를 칠 필요 없이 npm run devnpm run build 를 입력하면 된다.

아래와 같이 실행하려는 명령어가 길수록 더 빛을 발휘합니다.

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --progress --hide-moduels"
}

매번 긴 명령어를 실행하는 것보다 커스텀 명령어를 사용하는 것이 편리성과 속도면에서 더 우수하다.

NPM 커스텀 명령어 실전 활용

커스텀 명령어의 또 다른 장점은 해당 명령어에 실행 옵션 뿐만 아니라 다른 커스텀 명령어를 조합할 수 있다는 점이다.

"scripts": {
  "build": "webpack",
  "deploy": "npm run build -- --mode production"
}

위와 같은 scripts 속성을 정의하고 아래 명령어를 실행해보자

npm run deploy

먼저 build에 정의한 webpack 명령어가 실행되면서 명령어 뒤쪽에 붙은 실행 옵션들이 수행된다.
이 후 webpack 이란느 도구의 modeproduction 이라는 값을 넘겨주게 된다.

이렇게 package.json 안에 scripts 에 명령어를 정의하면 쉽고 간단하게 명령어를 실행할 수 있다.

profile
Always happy coding 😊

0개의 댓글