본문 바로가기

언어(JS,TS)/JavaScript

JavaScript [파일 : package.json vs package.lock.json]

package-lock.json이 필요한 이유

전에는 이런것이 있구나 하고 대충만 알고 넘겼는데 이번 기회에 package-lock.json 파일이 왜 생겼는지 찾아 보았습니다.

package-lock.json 파일이란?

package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면

자동으로 생성되는 파일입니다.
이 파일은 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있습니다.

 

예시코드

{
  "name": "typeclient",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "typeclient",
      "version": "0.1.0",
      "dependencies": {
        "@reduxjs/toolkit": "^1.8.0",
        "@testing-library/jest-dom": "^5.16.2",
        "@testing-library/react": "^12.1.4",
        "@testing-library/user-event": "^13.5.0",
        "@types/axios": "^0.14.0",
        "@types/jest": "^27.4.1",
        "@types/react": "^17.0.40",
        "@types/react-dom": "^17.0.13",
        "@types/react-redux": "^7.1.23",
        "@types/react-responsive": "^8.0.5",
        "@types/react-router-dom": "^5.3.3",
        "@types/react-slick": "^0.23.8",
        "axios": "^0.26.1",
        "dotenv": "^16.0.0",
        "form-data": "^4.0.0",
        "qs": "^6.10.3",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-hook-form": "^7.28.1",
        "react-redux": "^7.2.6",
        "react-responsive": "^9.0.0-beta.6",
        "react-router-dom": "^6.2.2",
        "react-scripts": "5.0.0",
        "react-slick": "^0.28.1",
        "redux": "^4.1.2",
        "slick-carousel": "^1.8.1",
        "socket.io-client": "^4.4.1",
        "styled-components": "^5.3.3",
        "sweetalert": "^2.1.2",
        "sweetalert2": "^11.4.8",
        "typescript": "^4.6.2",
        "web-vitals": "^2.1.4"
      },
      "devDependencies": {
        "@types/styled-components": "^5.1.24"
      }
    },
    "node_modules/@ampproject/remapping": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
      "dependencies": {
        "@jridgewell/trace-mapping": "^0.3.0"
      },
      "engines": {
        "node": ">=6.0.0"
      }
    },
    "node_modules/@babel/code-frame": {
      "version": "7.16.7",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
      "dependencies": {
        "@babel/highlight": "^7.16.7"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
    // ...
        "yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
    }
  }
}

package-lock.json이 필요한 이유

package.json 파일의 의존성 선언에는 version range가 사용됩니다. 

version range란 특정 버전이 아니라 버전의 범위를 의미합니다.
가장 흔한 예로 npm install express를 실행하게 되면 

package.json 파일에는 “^4.16.3”(Caret Ranges)로 버전 범위가 추가됩니다.

 package.json 파일로 npm install을 실행하면 현재는 4.16.3 버전이 설치되지만 

express의 새로운 minor, patch가 publish 되면 동일한 package.json 파일로 

npm install을 실행해도 4.17.3, 이나 4.16.4 같은 업데이트된 버전이 설치됩니다.

 

따라서 때에 따라서 버전이 다를 수가 있습니다.

물론 대부분의 경우에는 문제가 없지만 간혹 업데이트된 버전이 오류를 발생시키는 경우가 있습니다.

 

package-lock.json 파일은 의존성 트리에 대한 정보를 가지고 있으며 

package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있도록 보장합니다.

package-lock.json 파일은 npm에 의해서 프로젝트의 node_modules나 package.json이 수정되는 경우 생성되거나 업데이트되며 

당시 의존성에 대한 정보를 모두 가지고 있습니다. (버전이 맞지 않는 오류를 줄일 수 있음)

 

따라서 생성된 package-lock.json 파일은 소스 저장소에 커밋해야 합니다.

요약

  1. package-lock.json 파일은 npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 
    자동으로 생성되는 파일입니다.
  2. package-lock.json 파일은 의존성 트리에 대한 정보를 모두 가지고 있습니다.
  3. package-lock.json 파일은 저장소에 꼭 같이 커밋해야 합니다.
  4. package-lock.json 파일은 node_modules 없이 배포하는 경우 반드시 필요합니다.

reference