[개발환경] NPM

NPM

Node.js가 필요한 이유

• 최신 스펙으로 개발 가능
• 빌드 자동화
• 개발 환경 커스터마이징

프로젝트 생성

$ npm init
해당 명령어를 이용하여 프로젝트를 생성할 수 있다.

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

package.json내부에 scripts를 이용하여 프로젝트 명령어(e.g. 빌드, 배포, 테스트, 실행)를 등록 할 수 있다.

외부 package 설치

1) CDN 사용

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

단점:

• CDN 서버 장애 시 외부 라이브러리를 사용할 수 없다.
• 라이브러리가 업데이트 될 때마다 매번 직접 다운해야 한다.

2) npm 사용
위의 단점들은 npm으로 해결이 가능하다.

npm을 통해서 외부 라이브러리 코드를 프로젝트 폴더 내에 다운받아 놓을 수 있으며 계속해서 업데이트 되는 라이브러리는 npm에서 유의적 버전과 버전의 범위를 명시하여 버전을 관리 할 수 있다.

$ npm install 패키지명

유의적 버전
유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리한다.

각 버전을 변경하는 기준은 다음과 같다.

• 주 버전(Major Version): 기존 버전과 호환되지 않게 변경한 경우
• 부 버전(Minor version): 기존 버전과 호환되면서 기능이 추가된 경우
• 수 버전(Patch version): 기존 버전과 호환되면서 버그를 수정한 경우

e.g. $ npm install react
// package.json

{
  "dependencies": {
    "react": "^16.12.0"
  }
}

위와 같이 react 라이브러리를 설치 했을 때, ^(캐럿)이 존재하고 주(16), 부(12), 수(0)이 존재한다.

버전의 범위

^(캐럿)
여기서 ^(캐럿)을 자주 보았는데 캐럿은 다음과 같은 특징이 있다.

• 1.0.0 버전이라면 minor와 patch 버전을 업데이트를 허용
• 0.X 버전이라면 patch 업데이트 허용
• 0.X.X 버전이라면 업데이트를 허용하지 않는다

위의 예시에서 ^16.12.0 표기는 16.12.0부터 17.0.0미만까지를 포함하는 것을 의미한다.

e.g.
^1.2.3 표기는 1.2.3부터 2.0.0미만
^0.2.3 표기는 0.2.3부터 0.3.0미만
^0.0 표기는 0.0.0부터 0.1.0미만
^0.0.3 표기는 업데이트를 허용하지 않는다.

~(틸트)
틸트는 다음과 같은 특징이 있다.

• minor 버전이 지정되어 있다면 patch 업데이트 허용
• minor 버전이 없다면 minor 변경 허용

e.g.
~1.2.3 표기는 1.2.3부터 1.3.0미만
~1.2 표기는 1.2.3부터 1.3.0미만
~0 표기는 0.0.0부터 1.0.0미만

보통 라이브러리 정식 릴리즈 전에는 패키지 버전이 수시로 변한다. 0.1에서 0.2로 부버전이 변하더라도 하위 호환성을 지키지 않고 배포하는 경우가 빈번하다. ~0로 버전 범위를 표기한다면 0.0.0부터 1.0.0미만까지 사용하기 때문에 하위 호완성을 지키지 못하는 0.2로도 업데이트 되어버리는 문제가 생길수 있다.

반면 캐럿을 사용해 ^0.0으로 표기한다면 0.0.0부터 0.1.0 미만 내에서만 버전을 사용하도록 제한한다. 따라서 하위 호완성을 유지할 수 있다.

Reference

• https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD
• https://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html