package.json vs package-lock.json

1. package.json - 당신이 직접 수정하는 파일 ✏️

역할:

• 프로젝트의 의존성 목록

• npm 스크립트 정의

• 프로젝트 메타데이터

예시:

 

 

{

  "name": "frontend",

  "dependencies": {

    "react": "^19.1.1",        // ^ = 19.x.x 버전 허용

    "axios": "^1.12.2"         // ^ = 1.x.x 버전 허용

  },

  "scripts": {

    "dev": "vite",             // npm run dev 명령

    "build": "vite build"      // npm run build 명령

  }

}

 

 

 

수정 방법:

 

 

# 방법 1: 직접 편집 (추천하지 않음)

vi package.json

 

# 방법 2: npm 명령어 사용 (추천)

npm install react-router-dom    # 패키지 추가

npm uninstall axios             # 패키지 제거

npm install react@18.0.0        # 특정 버전 설치

 

 

 

---

2. package-lock.json - 자동 생성, 수정 금지 🔒

역할:

• 정확한 버전 번호 기록

• 의존성의 의존성까지 모두 기록

• 모든 개발자가 동일한 버전 사용 보장

예시:

 

 

{

  "packages": {

    "node_modules/react": {

      "version": "19.1.1",           // 정확한 버전

      "resolved": "https://...",     // 다운로드 URL

      "integrity": "sha512-..."      // 체크섬 (보안)

    },

    "node_modules/react/node_modules/loose-envify": {

      "version": "1.4.0"             // react의 의존성까지!

    }

  }

}

 

 

 

수정 방법:

 

 

# 직접 수정 금지! ❌

# npm이 자동으로 업데이트함

 

npm install        # package.json 기반으로 자동 생성/업데이트

npm update        # 패키지 업데이트 시 자동 갱신

 

 

 

---

🤔 비유로 이해하기

package.json = 쇼핑 리스트

 

 

- 우유 (1L 이상)

- 빵 (식빵 종류)

- 계란 (10개 정도)

 

 

 

→ 대략적인 요구사항

package-lock.json = 영수증

 

 

- 서울우유 1L (제조일: 2024.10.21, 바코드: 123456)

- 삼립 식빵 (유통기한: 2024.10.25, 가격: 3000원)

- 풀무원 계란 10구 (제조일: 2024.10.20)

 

 

 

→ 정확한 구매 내역

---

📋 실제 예제

상황 1: 새 패키지 설치

 

 

npm install zustand

 

 

 

변화:

• ✅ package.json에 "zustand": "^5.0.8" 추가 (사람이 읽기 쉬움)

• ✅ package-lock.json에 정확한 버전 + 의존성 트리 자동 기록

상황 2: 팀원이 프로젝트 클론

 

 

git clone ...

npm install    # package-lock.json을 보고 정확히 같은 버전 설치!

 

 

 

결과:

• 당신 컴퓨터: react 19.1.1

• 팀원 컴퓨터: react 19.1.1 (똑같음!)

package-lock.json이 없으면?

• 당신 컴퓨터: react 19.1.1

• 팀원 컴퓨터: react 19.1.5 (다를 수 있음!)

• 프로덕션: react 19.2.0 (버그 발생 가능!)

---

⚠️ 중요한 규칙

✅ 해야 할 것

• package.json: 직접 편집 또는 npm 명령어로 수정

• package-lock.json: Git에 커밋 (팀원과 공유)

• 패키지 설치/삭제 시 자동 업데이트됨

❌ 하면 안 되는 것

• package-lock.json: 직접 편집 (충돌/오류 발생)

• package-lock.json: .gitignore에 추가 (팀원과 버전 불일치)

• node_modules/: Git에 커밋 (용량 너무 큼)

---

🛠 당신이 실제로 할 일

패키지 추가하고 싶을 때

 

 

cd frontend

npm install 패키지명

 

# 예시

npm install date-fns      # 날짜 라이브러리

npm install lodash        # 유틸리티 라이브러리

 

 

 

패키지 제거하고 싶을 때

 

 

cd frontend

npm uninstall 패키지명

 

 

 

스크립트 수정하고 싶을 때

 

 

// frontend/package.json 직접 편집

{

  "scripts": {

    "dev": "vite",

    "build": "vite build",

    "test": "vitest"    // 새 스크립트 추가

  }

}

 

 

 

---

🎯 요약

파일수정 가능?용도Git 포함

파일	수정가능?	용도	git 포함
package.json	✅ 예	의존성 목록, 스크립트	✅ 예
package-lock.json	❌ 아니오 (자동)	정확한 버전 고정	✅ 예
node_modules/	❌ 아니오	설치된 패키지	❌ 아니오

기억하세요:

• package.json = 당신이 편집

• package-lock.json = npm이 관리

• 둘 다 Git에 커밋! ✅