[NPM] package-lock.json 은 무엇일까?

📌 package.json 의 한계점

npm 을 이용해서 프로젝트를 진행하면 package.json 을 통해

해당 프로젝트에서 사용하는 외부 패키지 의존성을 관리하게됩니다.

 

다음은 package.json 예시입니다.

{
  "name": "package json example",
  "version": "1.0.0",
  "description": "example",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.5.5"
  },
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@types/react": "^17.0.42",
    "@types/react-dom": "^17.0.14",
    "babel-loader": "^8.2.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

혼자서 프로젝트를 진행할 경우에는 상관없지만 규모가 큰 프로젝트의 경우

다수의 개발자들이 개발에 함께 참여하게되고 모든 개발자들이 동일한 개발 환경을 가지는 것이 중요합니다.

그런데 package.json 에 명시하는 버전정보 표기법이 때로는 문제가 될 수도 있습니다.

💡 semver 표기법

package.json 은 semver 표기법으로 패키지 버전정보를 명시합니다.

semver 는 범위 지정 방식으로 ^ 나 ~ 를 통해 버전정보를 명시할 수 있습니다.

자세한 내용은 유의적 버전 2.0.0 문서를 통해 확인할 수 있습니다.

 

⚠️ 문제가 될 수 있는 상황

package.json 만 존재하는 프로젝트가 저장소에 존재한다고 가정하겠습니다.

 

1. 신입개발자 Jessica 이 프로젝트를 clone 해옵니다.
2. 프로젝트를 열고 npm install 을 이용해 의존 패키지를 설치합니다.
3. 이번 스프린트에 개발할 기능인 사진에서 영역 복사하기 를 추가하고 저장소에 push 합니다.
4. 함께 일하는 개발자 Owen 이 저장소에서 코드를 pull 하고 빌드를 해보니.. 에러가 발생합니다 😥

 

🚀 package-lock.json 의 등장

이러한 문제 상황을 방지하기 위해서 npm version 5 부터는 package-lock.json 파일로

사용하고 있는 모든 패키지들의 정확한 버전정보 를 추적합니다.

이를 통해서 단 하나의 의존성 트리를 만들 수 있고 동일한 package.json 과 package-lock.json 을

이용하는 모든 개발자들이 동일한 버전의 패키지를 기반으로 개발이 가능해집니다.

 

📌 package-lock.json 의 구조

{
  "name": "tna-partners-web",
  "version": "0.0.1",
  "lockfileVersion": 2,
  "requires": true,
    "packages": {
        // ...
    },
    "dependencies": {
        // ...
    }
}

1️⃣ name

package-lock.json 에 해당하는 프로젝트의 패키지 이름이며 package.json 과 일치합니다.

2️⃣ version

package-lock.json 에 해당 프로젝트의 버전정보이며 package.json 과 일치합니다.

3️⃣ lockfileVersion

package-lock.json 이 생성될 때 해당 파일에 부여되는 1 이상의 버전정보입니다.

1 은 npm v5 와 v6 에서 사용되고 2 는 1 과 하위호환되며 npm v7 에서 사용됩니다.

3 은 숨겨진 lockfile 인 node_modules/.package-lock.json 에 사용되며

npm v6 에 대한 하위호환이 필요없어지면 npm 에서 사용될 예정입니다.

4️⃣ requires

npm 5.1.0 이후에 추가된 필드이며 프로젝트에 필요한 패키지들을 추적하도록 설정합니다.

5️⃣ packages

프로젝트가 사용하는 패키지들의 메타 정보들을 담은 객체입니다.

version , resolved , link 등 다양한 속성들이 존재합니다.

6️⃣ dependencies

lockfileVersion: 1 을 사용하는 예전 버전 npm 지원을 위한 레거시 데이터입니다.

npm v7 에서 packages 필드가 정의되어있으면 이 필드를 무시합니다.

 

📌 package-lock.json 은 꼭 repository 에 올리자!

위에서 언급했듯이 package.json 만 사용하면 해당 프로젝트의 개발자들 사이에서

각 패키지들의 버전정보가 일치하지 않는 문제가 발생합니다.

따라서 프로젝트를 github 와 같은 저장소에 올릴 때

반드시 까먹지말고 package-lock.json 도 함께 push 해줍시다 😄

 

📌 참고 자료

The package-lock.json file

Be aware of the package-lock.json and npm install

NPM5, What is the difference of package-lock.json with package.json?