[NPM] NPM이란? 자주 사용되는 커맨드
1. NPM이란?
NPM은 Node Packaged Manager의 약자이다.
이름처럼 NPM은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이다.
개발자는 CLI로 손쉽게 기존에 공개된 모듈들을 설치하고 활용할 수 있다. 프로그램보다 조금 작은 단위인 이 모듈들을 필요에 따라 적절하게 활용할 수 있도록 도와준다. (Java랑 비교를 하자면 메이븐과 비슷한 역할을 한다.)
2. NPM 설치
위에서 설명했던 것 처럼, NPM은 Node.js의 패키지 관리자이다.
따라서 NPM을 사용하기 위해서는 Node.js를 설치해야 한다.
(공식 사이트에 들어가서 다운로드 할 수 있다.)
정상적으로 설치 하였다면, 다음 명령어로 설치된 NPM의 버전을 확인할 수 있다.
3. 자주 사용되는 커맨드 목록
(1) 프로젝트 생성
npm init 커맨드를 사용하면 현재 디렉터리에 NPM 기반으로 프로젝트를 생성할 수 있다.
커맨드를 실행하면 패키지 이름, 버전, 설명 등등을 입력하게 된다.
$ 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: (hello-npm)
version: (1.0.0)
description:
프로젝트를 생성할 때 이러한 정보들을 일일히 입력하는게 귀찮을 시, --yes나 -y옵션을 주면 디폴트 값으로 프로젝트가 생성된다.
$ npm init -y
Wrote to /dev/hello-npm/package.json:
이렇게 NPM 프로젝트를 생성하고 나면 디렉터리에 package.json 파일이 생성된다.
NPM프로젝트는 별다른게 아니라 package.json파일을 가진 모든 디렉터리를 얘기하는 것이다.
$cat package.json
{
"name": "hello-npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
(2) 신규 패키지 설치
가장 주된 명령어이다. NPM을 사용하는 가장 큰 이유는 NPM에 등록되어 있는 외부 패키지를 설치하기 위해서 일 것이다.
npm install 또는 npm i 커맨드를 사용하여 원하는 패키지를 설치할 수 있다.
$ npm i lodash
+ lodash@4.17.10
added 1 package from 2 contributors and audited 1 package in 0.914s
found 0 vulnerabilities
위처럼 lodash 라는 라이브러리를 설치하고 나면, node_modules 디렉터리가 생기고, 그 안에 설치한 lodash 디렉터리가 생겼음을 알 수 있다. NPM이 lodash 패키지의 파일들을 이 디렉터리 안으로 다운로드 받아 둔 것이다.
또한 package.json 파일을 열어보면 dependencies 속성에 해당 패키지의 이름과 버전이 추가되었음을 알 수 있다.
이는 다른 개발자들과 협업 시 외부 패키지는 제외하고 프로젝트 코드만 공유할 수 있도록 해준다.
(이 부분은 아래에서 다시 살펴보도록 하겠다.)
[package.json]
...
"dependencies": {
"lodash": "^4.17.10"
}
...
lodash처럼 런타임에 필요한 패키지도 있지만 개발할 때만 필요한 패키지도 있다. 이러한 패키지는 --save-dev 또는 -D 옵션을 줘서 개발 의존성 모드로 설치해야 한다.
$ npm i -D mochamocha라는 테스트 라이브러리를 개발 의존성으로 설치해보았다. 테스트 라이브러리는 상용 빌드에 포함될 필요가 없기 때문이다. 설치 후 node_modules 디렉터리를 열어보면 상당히 많은 디렉터리들이 추가되어 있음을 알 수 있다. mocha처럼 어떤 패키지는 다른 패키지들에 의존해서 작동한다. 그리고 mocha가 의존하는 패키지들은 또 다른 패키지에 의존할 수 있다. 이렇게 NPM은 직접 의존하고 있는 패키지 뿐만 아니라 간접적으로 의존하고 있는 패키지(transitive dependency)까지 모조리 다운받아 준다.
개발 의존성으로 설치된 패키지는 package.json 파일에서 devDependencies 속성에 들어가게 된다.
[package.json]
...
"devDependencies": {
"mocha": "^5.2.0"
}
...
(3) 패키지 전역 설치
간혹 패키지를 현재 프로젝트 뿐 아니라 어디서나 실행할 수 있도록 전역으로 설치해야 할 때가 있다. 이러한 패키지들을 설치할때는 --global 또는 -g 옵션을 주어 설치한다.
$ npm i -g http-server
http-server 라는 CLI 도구를 전역으로 설치하였다. http-server는 현재 디렉터리에 있는 파일을 웹처럼 서비스해주는 간단한 HTTP 서버이다. 설치가 끝난 후 터미널에 http-server라고 입력해보면 8080포트로 HTTP 서버가 구동되는 것을 볼 수 있다. (이는 프로젝트 내에 국한되지 않고, 어느 디렉터리에서나 CLI로 실행이 가능해진다.)
$ http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.0.3:8080
Hit CTRL-C to stop the server
하지만 node_modules 디렉터리나 package.json 파일에는 아무 변화가 일어나지 않는다. 이 패키지는 전역으로 설치했기 때문에 이 프로젝트에만 국한되지 않기 때문이다. 참고로 전역 패키지들은 보통 Node.js가 설치된 디렉터리 내의 lib/node_modules에서 찾을 수 있다. (이는 npm bin -g 라고 입력하면 정확한 전역 설치 디렉터리 경로가 출력된다.)
(4) 기존 패키지 일괄 설치
위에서 잠깐 언급했던 바, Git과 같은 소스 관리 시스템에 NPM 프로젝트를 관리할 때 일반적으로 node_modules 디렉터리는 제외시키는 경우가 일반적이다. 이는 package.json 에 프로젝트에서 필요로 하는 의존성 모듈들의 정보가 모두 적혀있기 때문에, 이 데이터를 가지고 언제든 필요한 모듈들을 한번에 내려받을 수 있기 때문에 실제 모듈 파일들을 레파지토리에 업로드 하지 않아도 되는 것이다.
아래 명령어로 프로젝트의 의존성 모듈들을 한 번에 설치할 수 있다.
$ npm install위와 같이 npm i 혹은 npm install 커맨드 뒤에 패키지 명을 붙이지 않으면 package.json 파일에 적혀있는 정보 대로 모든 패키지를 설치해준다.
(5) 설치된 패키지 확인
기존에 설치된 패키지를 확인할 때는 보통 package.json 파일을 열어 dependencies와 devDependencies 항목을 확인하게 된다.
하지만 많은 패키지들이 내부적으로 또 다른 패키지들에 의존하고 있기 때문에 가끔 전체적인 의존성 트리를 확인하고 싶을 때가 생긴다. 이럴 때는npm ls 커맨드를 사용하면 된다.
$ npm ls
hello-npm@1.0.0 /dev/hello-npm
+-- @fortawesome/free-solid-svg-icons@6.1.1
| `-- @fortawesome/fontawesome-common-types@6.1.1 deduped
+-- @fortawesome/react-fontawesome@0.1.18
| `-- prop-types@15.8.1
| +-- loose-envify@1.4.0 deduped
| +-- object-assign@4.1.1
| `-- react-is@16.13.1
...
만일, 특정 레벨까지만 보고싶다면 아래와 같이 --depth=[LEVEL] 과 같이 하위 레벨을 주어 리스트를 조회할 수 있다.
$ npm ls --depth=1
hello-npm@1.0.0 /dev/hello-npm
+-- @fortawesome/free-solid-svg-icons@6.1.1
| `-- @fortawesome/fontawesome-common-types@6.1.1 deduped
+-- @fortawesome/react-fontawesome@0.1.18
| `-- prop-types@15.8.1
...
(6) 패키지 제거
설치된 패키지를 제거하려면 어떻게 해야할까?
npm uninstall 또는 npm r 커맨드를 사용하면 원하는 패키지를 프로젝트로부터 제거할 수 있다.
$ npm r mocha
위에서 설치한 mocha 라이브러리를 제거해보았다. package.json 파일을 열어보면 제거한 패키지에 대한 메타 데이터도 지워졌음을 알 수 있다.
[package.json]
...
"devDependencies": {}
...
전역으로 설치한 패키지는 설치할 때와 동일하게 --global 또는 -g 옵션을 줘서 제거하면 된다.
$ npm r -g http-server
removed 25 packages in 0.261s
$ http-server
zsh: command not found: http-server위에서 설치했던 http-server 라이브러리를 제거 후에 터미널에 http-server라고 입력해보면 해당 커맨드를 찾지 못하는 것을 알 수 있다.
(7) 스크립트 실행
NPM 프로젝트를 테스트나 구동, 빌드할 때 반복적으로 실행해야하는 스크립트를 package.json 파일에 등록해두고 npm run 커맨드를 이용해서 간편하게 실행시킬 수 있다.
예를 들어 어떤 NPM 프로젝트의 package.json에 다음과 같이 3개의 스크립트가 등록되어 있다고 가정해보자.
[package.json]
...
"scripts": {
"test": "mocha --compilers js:babel-register",
"start": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}
...
빌드를 실행하려면 npm run 커맨드 뒤에 스크립트 이름을 붙여서 터미널에 입력하면 된다.
$ npm run build
이는 아래 커맨드를 직접 입력해서 실행한 것과 같이 효과를 발생시킨다.
$ ./node_modules/mocha --compilers js:babel-register
예외적으로 test와 start 스크립트의 경우, 많이 사용되기 때문에 run을 생략하고 실행시킬 수 있다.
$ npm test$ npm start
4. 마치며..
이상으로 자주 사용되는 NPM 커맨드에 대해서 알아보았다. 이 정도만 숙지하고 있다면 큰 어려움 없이 NPM을 사용해서 자바스크립트 개발을 할 수 있을 것이다.
#References
https://m.blog.naver.com/magnking/220961896609
https://joyfulhome.tistory.com/180