Node.js 패키지 설치 모듈 npm과 yarn

안녕하세요 씨앤텍 시스템즈 최홍준 연구원입니다.

 

이번 포스트는 JavaScript에서 모듈을 설치할 수 있는 패키지 관리자 툴을 비교해 보았습니다.

대표적인 패키지 관리자 툴은 총 3가지로 나눌 수 있습니다.

---

1. npm

2. yarn

3. brew

 

---

3번 툴인 brew는 Mac에서 주로 사용하는 툴인만큼 윈도우에서는 사용을 잘 안 하는 툴입니다.

이 포스터에서는 npm과 yarn 패키지 툴을 비교해보겠습니다.

 

---

[ NPM ]

npm은 Node Packaged Manager의 약자로 Node.js에서 주로 사용했던 패키지 관리자 툴입니다. 이 패키지는 온라인 데이터베이스로 이루어져 있습니다. 이러한 데이터베이스는 클라이언트를 통해 접근되며 사용 가능한 패키지들은 npm 웹 사이트에서 찾아보고 검색할 수 있습니다. 이러한 패키지는 npm사에 의해 관리됩니다.

** 패키지 검색 홈페이지 https://www.npmjs.com

npm | build amazing things

npm 사용 방법은 윈도우 기준 -> CMD창에서 npm install [ 모듈명 ]으로 npm에서의 모듈을 설치할 수 있습니다.

예를 들어 webpack을 설치할 경우에는 아래와 같이 CMD창에 명령어를 입력하여 설치를 합니다.

npm install --g webpack

만약 모듈의 의존성을 한꺼번에 관리한다면 json파일을 만들어 그 안에 기록을 통해 관리를 해야 합니다. json 파일을 만들 경우에는 다음과 같이 명령어를 작성해 줍니다.

npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

package name: (cnt)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to package.json:
{
  "name": "cnt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

방금 만든 json파일은 보시면 다음과 같이 작성되어 있습니다.

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

 

여기서 중요한 부분은 "scripts"와  "dependencies"입니다. script는 우리가 run 명령어를 통해서 실행할 것들을 적어두는 것이고 dependencies의 경우는 설치할 모듈들을 의미합니다.

이렇게 package.json 파일이 정리되면 배포를 해야 할 때  파일만 같이 배포를 한다면 해당 프로그램 개발에 사용되었던 모듈을 그대로 인스톨할 수 있게 됩니다. 인스톨은 다음 명령어로 간단하게 할 수 있습니다.

npm install

 

---

[ Yarn ]

Yarn은 FaceBook에서 개발한 자바스크립트의 새로운 패키지 매니저로 더욱 빠르게 패키지를 인스톨하는 방법과 의존성 관리를 다양한 디바이스에서 일관성 있게 할 수 있습니다. yarn 공식 홈페이지에서는 다른 패키지 매니저와 차이점을 아래와 같이 설명하고 있습니다.

** yarn 공식 홈페이지 https://yarnpkg.com/en/

Yarn

---

Ultra Fast ( 고속 )

Mega Secure ( 보안 )

Super Reliable ( 신뢰성 )

Offline Mode ( 오프라인 모드 )

Deterministic ( 결정적 )

Network Performance ( 네트워크 성능 )

Same Packages ( 동일 패키지 )

Network Resilience ( 네트워크 복구 )

Flat Mode ( 플랫 모드 )

 

---

yarn 설치 방법은 CMD창에서 다음과 같이 명령어를 실행해주면 됩니다.

npm install -g yarn

yarn 사용 방법은 윈도우 기준 -> CMD창에서 yarn add [ 모듈명 ]으로 모듈을 설치할 수 있습니다.

npm과 같이 webpack을 설치할 경우에는 아래와 같이 CMD창에 명령어를 입력하여 설치를 합니다.

yarn add [--dev] webpack

** --dev는 개발자 의존 모듈로 설치하는 옵션입니다.

npm처럼 모듈의 의존성을 한꺼번에 관리한다면 json파일 생성해줘야 합니다. json 파일 생성 명령어는 다음과 같습니다.

yarn init
yarn init v1.13.0
question name (react): cnt
question version (1.0.0): 2.0.0
question description: test
question entry point (index.js): index.js
question repository url: localhost
question author: pss
question license (MIT): MIT
question private:
success Saved package.json
Done in 34.17s.

{
  "name": "cnt",
  "version": "2.0.0",
  "description": "test",
  "main": "index.js",
  "repository": "localhost",
  "author": "pss",
  "license": "MIT"
}

방금 만든 json파일에 내용을 보시면 다음과 같습니다.

{
  "name": "cnt-admin",
  "version": "2.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  
  "dependencies": {
  },
  "devDependencies": {
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 11"
  ]
}

dependencies에서 패키지를 npm 패키지의 이름과 npm 패키지의 버전을 표기하여 패키지 관리를 한꺼번에 할 수 있습니다. 이렇게 package.json 파일이 정리되면 배포를 해야 할 때  파일만 같이 배포를 한다면 해당 프로그램 개발에 사용되었던 모듈을 그대로 인스톨할 수 있게 됩니다. 인스톨은 다음 명령어로 간단하게 할 수 있습니다.

yarn install

 

---

[ Yarn / Npm ]

Yarn은 Facebook에서 npm을 보완하고 속도를 빠르게 한 패키지 매니저 툴입니다. Yarn과 Npm의 속도 차이는 Yarn Github에  명시되어 있습니다.

 

1. React App

그림1. React App에서 Yarn과 Npm 속도 비교

2. Ember App

그림2. Ember App에서 Yarn과 Npm 속도 비교

3. Angular App

그림3. Angular App에서 Yarn과 Npm 속도 비교

4. Medium Size App

그림4. Medium Size App에서 Yarn과 Npm 속도 비교

5. Lost Of Files

그림5. Lost Of Files에서 Yarn과 Npm 속도 비교

아래 그림은 npm과 yarn의 모듈 설치시 걸리는 시간입니다.

---

---

이러한 통계를 보면 Yarn을 사용하는게 맞지만 npm도 version 5 이상부터는 Yarn과 설치 속도 격차가 많이 줄어들었습니다. 현재는 npm 6 버전이 나온 상황으로 볼 경우 자신이 익숙해져 있는 패키지 관리 툴을 사용하는 게 맞다고 생각합니다.

감사합니다.