[node.js] package.json 과 package-lock.json, 틸드tilde(~)와 캐럿 caret(^), --save, [--dev, -D] 플래그

package.json 과 package-lock.json 

package.json은 뭔가요?

- 기본적으로 package.json은 문서입니다. 개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서 -> 프로젝트의 개발만을 위한 목적인지, 패키지를 배포하기 위한 목적인지에 따라 용도가 갈릴 수 있다.

• 자신의 프로젝트가 의존하는 패키지의 리스트
• 자신의 프로젝트의 버전을 명시
• 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. 

확장자로 알 수 있듯, json파일로 속성-값의 쌍으로 이루어져 있으며 npm에서는 이 속성을 field라고 표현합니다.

"name"과 "version"은 반드시 있어야 하는 fields 이며 이 필드가 누락되면 패키지는 설치될 수 없습니다.

• name은 말 그대로 패키지의 이름을 나타낸다. 
• version은 semantic versioning guidelines를 따르며, x.x.x의 형태로 작성해야 한다. 간단히 말하면, [Major].[Minor].[Patch]의 형태를 따른다.
• 아래는 예시이다.

{
  "name": "my-awesome-package",
  "version": "1.0.0"
}

🚗프로젝트 개발의 목적이라면 "dependencies"와 "devDependencies" 가 중요합니다.

패키지의 이름에 해당 패키지의 버전 범위(SemVer)를 매핑한 형태의 객체로 지정합니다. 

• SemVer(유의적 버전) :해당 패키지, 프로젝트가 어떤 외부 라이브러리에 의존성을 가지고 있는 지, 프로젝트가 의존하고 있는 패키지를 일괄적으로 관리하기 위한 필드이다.
• 다시 말하면 해당 프로젝트가 어떤 라이브러리를 가지고 있어야 제대로 구동될 수 있는지 명세되어 있는 것이다. ( 팀 내에서 동일한 개발환경을 빠르게 구축할 수 있도록 하는 장점을 가지고 있다.)

▶ 사용법

사용하고자 하는 패키지를 다운받으면, dependencies 필드에 자동으로 intall한 패키지이름과 버전이 기록된다. 

🚕 devDependencies 필드에 기록하려면,  yarn add <package...> [--dev/-D] 플래그를 넣어주면 된다.

npm install <package> --dev #-D
yarn add <package> --dev #-D

+ 추가) --save 옵션은 기본으로 적용됩니다. 노드패키지매니저 yarn, npm 2023년도 현재 시점을 기준으로 기본적으로 적용되어 있는 플래그이므로 요구되지 않습니다.  기존 --save 플래그의 역할은 npm install 명령어 실행 시, package.json에 있는 패키지들을 자동으로 설치해주는 역할을 합니다. -> 우리가 깃허브에서 CRA 프로젝트를 클론받고 yarn && yarn start 만 해도 바로 기존에 만들어놓은 프로젝트를 실행시킬 수 있는 이유

 

devDependencies는 개발시에만 필요한 의존 패키지들을 의미합니다. 

테스트를 위한 패키지나 트랜스파일러와 같이 배포시에는 필요없는 패키지들은 이 devDependencies에 포함시킵니다. 

 Please do not put test harnesses or transpilers or other “development” time tools in your dependencies
 object  -npm docs- 

 

package.json이 있는데 package-lock.json은 왜 필요한가요?

설치 시점에 상관없이 항상 동일한 패키지 버전이 설치되는 보장하기 위해서 lock 파일이 생겨나게 됐습니다. 

예시) A개발자가 작업할 당시의 react 최신 버전이 16.8.2라면 B개발자가 나중에 합류하게 돼서 react를 설치할 때 최신 버전은 16.9.1이라고 합시다. 그렇게 되면 두 개발자는 서로 다른 react 버전을 설치하여 작업을 진행하게 됩니다. 다른 환경에서 발생하는 문제를 방지하고자 생겨난 것이 lock 파일입니다. 

🚩 그렇기 때문에 lock file은 함수로 지우면 안되고 프로젝트 진행 중 lock file에서 충돌이 났을 때는 각 패키지 매니저에서 제안하는 방식대로 conflict를 해결해야 합니다.  

package-lock.json은 npm이 node_modules트리 또는 package.json 후속 설치에서 중간 종속성 업데이트에 관계없이 동일한 트리를 생성할 수 있도록 생성된 정확한 트리를 설명합니다. -npm docs-

추가적으로 package-lock.json은 npm이 이전에 설치된 패키지에 대해 반복되는 메타데이터 확인을 건너뛸 수 있도록 하여 설치 프로세스를 최적화합니다. 패키지 트리의 완전한 그림을 얻을 수 있는 충분한 정보가 포함되어 package.json 파일을 읽을 필요성이 줄어들고 상당한 성능 향상이 가능합니다. 

version과 틸드tilde(~)와 캐럿 caret(^) ?

의존성 패키지를 보다보면 버전 앞에 어떤 표시를 볼 수 있을 겁니다. 주로 ~보단 ^일텐데요.  npm v1.4.3 이후로 기본 값이 틸드에서 캐럿으로 변경되었습니다.

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-query": "^3.39.2",
    "react-router-dom": "^6.6.1",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "web-vitals": "^2.1.4"
  },

위에서도 semver가 나왔는데 이는 Semantic Versioning의 약자입니다. 

1.2.3과 같은 버전은 MAJOR.MINOR.PATCH 의 형태로 구성되고, 이는 semver라고 부릅니다. 

• MAJOR는 하위호환이 되지 않는 API변화들
• MINOR는 하위호환이 되는 범위내에서 기능 추가들
• PATCH는 하위호환이 되는 범위내에서 bug fix 
• 특정 버전보다 높거나 낮은 경우 크다, 작다, 크거나 같다, 작거나 같다 로 표기합니다.(아래는 예시)

>1.2.3
>=1.2.3
<1.2.3
<=1.2.3

틸드, 캐럿

틸드와 캐럿 with semver

틸드(~): x.y.z 중 z 범위 내에서 버전 업데이트
캐럿(^): x.y.z 중 x 이하 하위호환성이 보장되는 범위 내에서 버전 업데이트
※ 예외) 캐럿도 pre-release 버전(<1.0) 일 경우 틸드처럼 동작한다. ->
캐럿 예외 추가설명: [major, minor, patch] 에서 가장 왼쪽에 있는 0이 아닌 요소를 수정하지 않는 변경 허용

• ~1.2.3: >=1.2.3 <1.3.0
  • 틸드이고, 위의 정의에 따라서 z범위내에서 버젼 업데이트 한다.
  • 그러면 범위가 1.2.3을 포함해서 같거나 크고, 1.3.0보다 작은 범위내에서 업데이트 한다.
• ^1.2.3: >=1.2.3 <2.0.0
  • 캐럿은, 위의 정의에 따라 x이하 하위 호환성이 보장되는 범위내에서 버전 업데이트 한다.
  • 1.2.3보다 크거나 같고, 2.0.0보다 작은 범위내에서 업데이트 한다.
  • 결국 Major버전이 바뀌지 않고, 하위 호환성을 유지하기 때문에 실무에서 가장 많이 사용한다!

🚩 대부분이 semver 규칙을 따르지만 간혹 안따르는 패키지도 있기 때문에 버전업을 할 때에는 npm update 명령어 대신 npm-check 패키지를 버전업이 필요한 부분에 대해서만 업데이트하는 것을 추천한다. 

 

&& (셸 명렁어)

yarn && yarn start

1. yarn 명령을 실행하여 프로젝트 종속 요소를 설치합니다. 그러면 프로젝트 디렉토리에 있는 package.json 파일을 찾아 필요한 모든 종속 요소를 설치합니다.
2. && 은 두 커맨드를 순차적으로 진행하는 셸 명령어 입니다. 즉, yarn 명령어로 종속 패키지들을 전부 설치했다면 그 다음에 yarn start 명령어를 실행합니다.   

 

ref: 

[npm] 버전 관리 기초 지식(caret, tilde)

What's the difference between tilde(~) and caret(^) in package.json?

package.json | npm Docs

Yarn