[Web Frontend] lock 파일이란 무엇인가?

TL;DR;

프로젝트에서 사용되는 자바스크립트 패키지들의 버전과 의존성을 명시한 파일
협업을 할 때, 프로젝트의 패키지 버전의 충돌을 방지하고 일관성 있게 적용하기 위해 필요함
yarn 패키지 매니저 - yarn.lock
npm 패키지 매니저 - package-lock.json

lock 파일(패키지 잠금 파일)이란?

프로젝트에 사용되는 모든 패키지의 버전과 의존성을 명시한 파일
npm - package-lock.json
yarn - yarn.lock

lock 파일의 의의

하나의 프로젝트를 여러 사람이 함께 작업할 때, 패키지의 버전을 일관성 있게 유지하기 위해 필요함
기본적으로 package.json에 등록되어 있는 패키지를 설치하면, 패키지 매니저는 Semver 규칙에 따라 패키지 버전 범위 이내에 설치할 패키지 버전을 결정한다.
예를 들어, A는 a-pack@v1.3.2 를, 이후에 입사한 B는 a-pack@v1.4.0 을 설치하여 사용한다면 패키지 버전이 서로 달라 이슈 대응이 어려워짐
lock 파일은 이러한 문제를 해결하는 데 도움이 된다.
추가적으로 무조건적인 패키지 업데이트를 방지함으로써 최신 패키지 버전에 내재된 보안 위험을 방지하는 효과도 있다.

exmaple) yarn.lock(Yarn 2+): React 설치

https://yarnpkg.com/blog/release/2.0#new-lockfile-format

"react@npm:^18.2.0":
  version: 18.2.0
  resolution: "react@npm:18.2.0"
  dependencies:
    loose-envify: ^1.1.0
  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
  languageName: node
  linkType: hard

Yarn v1과 비교했을 때, 새로운 format으로 변경되었음을 확인할 수 있다.

Yarn v1 예시

https://classic.yarnpkg.com/lang/en/docs/yarn-lock/

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

"js-tokens@^3.0.0 || ^4.0.0":
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==

loose-envify@^1.1.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
  dependencies:
    js-tokens "^3.0.0 || ^4.0.0"

react@^18.3.1:
  version "18.3.1"
  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
  dependencies:
    loose-envify "^1.1.0"

example) package-lock.json: React 설치

https://docs.npmjs.com/cli/v10/configuring-npm/package-lock-json

{
  "name": "package-lock",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "react": "^18.3.1"
      }
    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      },
      "bin": {
        "loose-envify": "cli.js"
      }
    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
      "engines": {
        "node": "=0.10.0"
      }
    }
  },
  "dependencies": {
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "requires": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
    "react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
      "requires": {
        "loose-envify": "^1.1.0"
      }
    }
  }
}

주요 요소 설명

name: 프로젝트의 이름.
version: 프로젝트의 버전.
lockfileVersion: package-lock.json의 버전.
requires: 의존성이 필요한지 여부.
packages: package-lock.json version 2
- npm 6에서 7로 업데이트 되면서 새로 만들어진 패키지 의존성 트리 표현 필드
- package-lock.json version 2부터 사용됨
dependencies: 설치된 패키지와 그 의존성의 상세 정보.
- 패키지 의존성 트리 표현 필드
- version: 패키지 버전.
- resolved: 패키지가 다운로드된 URL.
- integrity: 패키지의 무결성을 확인하기 위한 해시.
- dependencies: 해당 패키지가 의존하는 다른 패키지들.

참고)

https://docs.npmjs.com/cli/v10/configuring-npm/package-lock-json

https://classic.yarnpkg.com/lang/en/docs/yarn-lock/

https://umanking.github.io/2022/05/05/yarn-lock/

https://it-eldorado.tistory.com/187

https://www.arahansen.com/the-ultimate-guide-to-yarn-lock-lockfiles/