[React] - package.json과 package-lock.json의 차이

리액트 프로젝트를 세팅하고 나면, 프로젝트 폴더 안에 package.json과 package-lock.json 두 가지 파일을 발견할 수 있을 것이다. 두 파일은 중요한 역할을 담당하지만, 각각의 목적과 기능은 조금씩 다르다. 이번 포스팅에서는 두 파일의 차이점에 대해서 설명해 보려고 한다.

---

package.json

프로젝트의 전반적인 정보를 담고 있는 핵심 파일이다. => 프로젝트의 설계도 역할을 한다고 이해하면 된다.

{
  "name": "study",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^6.29.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

 

프로젝트 정보 제공: 프로젝트 이름, 버전, 설명, 작성자 정보 등 기본적인 정보를 제공해준다.

스크립트 정의: 프로젝트를 실행 및 빌드할 때 사용하는 명령어를 정의한다. (ex. npm start, npm run build 등)

의존성 관리: 프로젝트가 의존하는 라이브러리나 패키지들의 이름과 버전 범위 명시. (dependencies, devDependencies)

환경 설정: 프로젝트에 필요한 설정값이나 메타데이터 정보를 담고 있다.

 

의존성이란?

모듈과 모듈 사이의 관계를 말하며, 의존성 관리는 프로젝트의 유지보수 및 확장성에 영향을 미치기 때문에 개발 과정에서 매우 중요하다!

 

터미널에서 "npm install" 등의 명령어를 입력하면, package.json에 나열된 의존성이 자동으로 설치된다. 

즉 package.json을 통해 간단하고 쉬운 의존성 관리가 가능하다.

---

package-lock.json

 

npm이 자동으로 생성하는 파일로, 프로젝트에 설치되어 있는 모든 패키지의 정확한 버전과 의존성 트리를 기록한다.

 

package.json 파일로 npm install을 입력하여 19.0.0 버전의 리액트를 설치한 상태이다. 하지만 이후 새로운 버전이 나온다면 동일한 package.json 파일로 npm install을 입력해도 신규 버전이 아니라, 이전에 설치했던 19.0.0 버전의 리액트가 똑같이 설치된다. 대부분의 경우에는 큰 문제가 없으나, 이는 간혹 오류가 발생한다. 

 

의존성 트리는 powerShell (터미널)에서 "npm ls" 명령어를 통해 조회 가능하다. 아래는 나의 프로젝트의 의존성 트리 내용이다.

 

위에서 볼 수 있듯이, package-lock.json 파일은 위와 같은 의존성 트리에 대한 정확한 정보를 가지고 있다.

따라서 package-lock.json 파일이 작성된 시점의 의존성 트리가 다시 생성될 수 있도록 보장해준다.

{
  "name": "study",
  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "study",
      "version": "0.1.0",
      "dependencies": {
        "@testing-library/dom": "^10.4.0",
        "@testing-library/jest-dom": "^6.6.3",
        "@testing-library/react": "^16.2.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-router-dom": "^6.29.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      }
    },
    "node_modules/@adobe/css-tools": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.2.tgz",
      "integrity": "sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==",
      "license": "MIT"
    },
    //...생략
    }
 }

=> 의존성의 정확한 버전을 lock시킴으로써, 프로젝트가 항상 일관된 환경에서 실행될 수 있도록 한다.