리액트 packge.json과 packge-lock.json 차이

1️⃣ package.json

역할

• 프로젝트 메타데이터와 필요한 패키지 목록을 정의
• 프로젝트 이름, 버전, 스크립트, 의존성 등을 관리

주요 내용

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.20.0"
  }
}

특징

• 사람이 직접 작성/수정 가능
• dependencies / devDependencies의 버전은 범위 지정 가능(^, ~)
  → 예: "react": "^18.2.0" → 18.x.x 최신 버전 설치 가능
• 프로젝트의 패키지 요구사항 정의 용도

---

2️⃣ package-lock.json

역할

• 실제 설치된 패키지 버전과 의존성 트리를 기록
• 프로젝트를 동일하게 재현할 수 있도록 고정된 버전을 저장

주요 내용

{
  "name": "my-app",
  "lockfileVersion": 2,
  "dependencies": {
    "react": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
      "integrity": "sha512-..."
    },
    "react-dom": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
      "integrity": "sha512-..."
    }
  }
}

특징

• 자동 생성 → npm install 시 자동으로 생성/업데이트
• 모든 패키지와 하위 패키지(의존성) 버전까지 기록
• 팀 프로젝트에서 환경 일관성 유지 필수

---

3️⃣ 차이점 요약

항목	package.json	package-lock.json
작성	사람이 직접	npm 자동 생성
목적	필요한 패키지 목록 정의	설치된 정확한 패키지 버전 기록
버전	범위 지정 가능 (^, ~)	정확한 버전 고정
수정	직접 가능	보통 직접 수정하지 않음
역할	프로젝트 요구사항 정의	프로젝트 재현성 확보

---

💡 Tip

• package.json : 무슨 패키지가 필요한지
• package-lock.json : 설치된 패키지가 정확히 어떤 버전인지
• 팀 프로젝트에서는 package-lock.json도 같이 Git에 커밋해야 동일한 환경 유지 가능