NPM
NPM이란?
NPM(Node Package Manger)은 라이브러리를 관리하는 관리자이다.
자바스크립트로 작성된 오픈소스, 라이브러리를 가지고와서 사용할 수 있다.
$ npm init
$ npm init -y #프로젝트 정보 기본값으로 바로생성을 하면 프로젝트에 package.json 이 생성된다.
package.json은 프로젝트에서 사용하고 있는 모든 라이브러리에 대한 정보를 가지고 있다.
npm install 라이브러리명을 이용해서 라이브러리를 내 프로젝트로 가지고 와서 사용할 수 있다.
라이브러리를 하나라도 추가한다면 프로젝트에 node_modules 라는 폴더가 생기는데 NPM레포지토리에서 해당 라이브러리의 소스코드를 이 폴더에 저장하게된다.
깃헙에 프로젝트를 올릴 때는 node_modules를 gitignore하여 업로드한다. package.json 만 있다면 라이브러리를 설치할 수 있다.
NPX란?
NPM은 특정 라이브러리를 우리의 프로젝트에 저장하는 반면에 NPX는 우리의 프로젝트에 라이브러리를 저장하지 않고 바로 실행해준다.
따라서 실행가능한 자바스크립트 툴이나 스크립트를 실행할 때 사용한다.
yarn이란?
페이스북에서 NPM의 성능과 보안을 개선해서 만든 버전이다. npm과 호환이 가능하다.
참고하면 좋은 사이트
NPM 시작해보기
간단한 예제를 통해서 npm을 시작해보자.
프로젝트에 npm 초기화하기
내가 원하는 폴더에서 아래의 명령어를 입력하여 npm을 사용할 수 있는 환경으로 만들어주자.
$ npm init -y그러면 아래와 같은 내용이 들어있는 package.json 파일이 생성된다.
{
"name": "5-npm", // 프로젝트 이름
"version": "1.0.0", // 프로젝트 버전
"description": "", // 프로젝트 설명
"main": "index.js", // 프로젝트의 시작점
"scripts": { // 프로젝트에서 사용할 수 있는 명령어, ex) npm start, npm run uno (예약어가 아니면 run키워드를 사용해야 한다.)
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app",
"uno": "node app"
},
"keywords": [], // NPM에 해당 프로젝트를 업로드했다면 노출될 키워드
"author": "", // 프로젝트 작성자
"license": "ISC" // 프로젝트 라이센스
}
npm 설치해보기
도움말 보기
$ npm -h
$ npm -help
$ npm i -h # 인스톨할 때 관련된 도움말패키지 설치하기
$ npm install 라이브러리명 # 현재 프로젝트에만 설치
$ npm install 라이브러리명@버전 # 하이브러리의 버전을 지정하여 설치
$ npm i -g 라이브러리명 # 전역 설치
# 개발 모드 설치
$ npm i 패키지명 --save-dev개발 모드 설치는 개발할 때만 필요한 패키지를 설치하는 용도이다. 배포가 되거나 제품안에 포함될 필요가 없는 패키지는 개발 ㅂ모드 설치로 구분을 지어주자.
⚠️ 패키지를 전역(global)에 설치할 때 주의
npm에서 글로벌로 패키지를 설치할때 왠만하면 sudo(파워 권한)로 설치 하시지 않는게 좋다고 한다. 보안에 안전하지 않기 때문이다.
설치한 패키지 정보 확인하기
$ npm list # 현재 프로젝트에 설치된 패키지 정보
$ npm ll -g # 전역에 설치된 패키지 정보
$ npm ll -g --dept==0 # 0번째 depth의 패키지 정보만 확인특정 라이브러리 정보 보기
$ npm view 라이브러리명해당 라이브러리의 package.json 에 작성된 정보를 확인 할 수 있다.
혹은 npm사이트 에서 패키지를 검색해서 정보를 확인할 수 도 있다.
패키지 버전
프로젝트를 배포하거나 라이브러리로 제공할 때 버전 정보는 매우 중요한데 버전 정보에 대해서 알아보자.
형태) Major.Minor.Patch
예시) 1.0.0일반적으로 프로젝트를 시작한다면 1.0.0 에서부터 시작하고 아래의 각 버전의 의미에 따라서 한 단계씩 숫자를 올린다.
-
메이저: 기능들이 대거 추가 및 수정
-
마이너: 작은 기능들 추가 및 수정
-
패치: 버그나 사소한 오류 수정
npm에서 버전 표기법
패치 버전 (패치 버전의 범위만)
1.0 : 1.0 버전에서 어떤 패치 버전이어도 상관 없음
1.0.x : 1.0. 버전에서 어떤 패치 버전이어도 상관 없음
~1.0.4 : 1.0.4 버전 이상으로 어떤 패치 버전이어도 상관 없음 (즉, 메이저와 마이너 버전 고정)
마이너 버전 (마이너와 패치 버전의 범위만)
1 : 1 버전 이상의 어떤 마이너 패치 버전이어도 상관 없음
1.x : 1 버전 이상의 어떤 마이너 패치 버전이어도 상관 없음
^1.0.4 : 1.0.4 버전 이상으로 어떤 마이너 버전이어도 상관 없음 (즉, 메이저 버전만 고정)
메이저 버전 (사용하지 않기!)
* : 어떤 버전이어도 상관 없음
x : 어떤 버전이어도 상관 없음
참고하면 좋은 사이트
설치한 패키지에 대한 정보는 어디에?
package.json 파일에서 현재 프로젝트에서 사용하고 있는 패키지 정보를 저장하고 있다. package.json 파일에서 dependencies 에서는 해당 프로젝트가 동작할 때 필요한 패키지 이름과 버전정보가 있고 devDependencies 에는 해당 프로젝트를 개발하는 동안 필요한 패키지이름과 버전 정보를 확인할 수 있다.
아래 package.json 파일 예시를 보자.
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"underscore": "^1.13.2"
},
"dependencies": {
"prettier": "^2.5.0"
}
}
이 프로젝트가 동작하려면 underscore 라는 패키지의 버전 1.13 이상의 버전이 필요하며 개발할 때 사용하는 패키지는 prettier 라는 패키지의 버전 2.5 버전 이상이다.
여기서 각 패키지의 버전이 특정 버전 이상이라고 나와있는데 이 프로젝트에서 사용했던 정확한 정보를 알고 싶다면 package.lock.json 파일을 확인해보면 된다. package.lock.json 파일은 패키지를 설치했을 때 자동으로 생성되는 파일이고 설치한 패키지의 정확한 정보를 담고 있는 파일이다.
아래 package.lock.json 파일의 예시를 보자.
{
"name": "test",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "5-npm",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"underscore": "^1.13.2"
},
"devDependencies": {
"prettier": "^2.5.1"
}
},
"node_modules/prettier": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/underscore": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.2.tgz",
"integrity": "sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g=="
}
},
"dependencies": {
"prettier": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"dev": true
},
"underscore": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.2.tgz",
"integrity": "sha512-ekY1NhRzq0B08g4bGuX4wd2jZx5GnKz6mKSqFL4nqBlfyMGiG10gDFhDTMEfYmDL6Jy0FUIZp7wiRB+0BP7J2g=="
}
}
}
package.json 파일에서 underscore 와 prettier 버전이 각각 "^1.13.2" , "^2.5.0" 으로 범위로 표기되어있는것에 반해 package.lock.json 에는 각각 "1.13.2" , "2.5.1" 로 정확한 버전 정보를 확인할 수 있다.
패키지를 설치할 때 버전은 무엇으로 세팅될까?
일반적으로 패키지를 설치하면 패키지를 설치한 시점에서 메이저버전을 고정한 버전으로pacakge.json에 명시되도록 설정되는것 같다.
예를들어 prettier를 설치했을 때pacakge.json에 prettier 버전이^2.5.1로 잡혀있는데 메이저버전인 2를 고정하고2.5.1버전 이상을 허용하도록 설정 된다.
버전 업데이트 하기
만약 패키지를 사용하다가 버전을 업데이트 하면 어떻게 해야할까?
우선 패키지가 업데이트 해야할 버전이 있는지 확인을 먼저해야한다.
패키지 정보 확인하기 👉🏻 패키지 최신 버전 정보 확인하기
$ npm view 패키지명위의 명령어를 통해서 패키지의 최신 정보를 확인하고 그중에서 버전을 보면서 업데이트 해야할 버전이 있는지 여부를 확인할 수 있다.
하지만 수많은 패키지를 일일히 확인하기는 힘들다
그 때 아래의 명령어를 입력해보자
프로젝트에 존재하는 모든 패키지의 버전 업데이트 정보를 확인할 수 있다.
$ npm outdated그렇다면 아래와 같이 현재 내가 사용하는 패키지중 버전관리가 필요한 패키지들의 정보를 보여준다.
Package Current Wanted Latest Location Depended by
underscore 1.12.1 1.13.2 1.13.2 node_modules/underscore testCurrent: 현재 패키지 버전Wanted:package.json에 명시한 버전, 혹은 며시한 버전의 조건 중 사용가능 한 최신버전Latest: 해당 패키지의 배포되는 최신 버전
Current 과 Wanted 가 같은 경우 업데이트가 필요없는 상황이고 다른 경우는 업데이트가 필요한 상황이다.
아래의 명령어를 통해 패키지를 쉽게 Wanted 로 업데이트 해줄 수 있다.
$ npm update # 업데이트가 필요한 모든 패키지를 업데이트함
$ npm update 패키지명 # 해당 패키지만 업데이트함