[javascript] package.json 파헤치기

package.json

• 프로젝트를 하다보면 가장 먼저 만나게 되는 package.json
• 보통 종속성을 설치하거나 빌드, 실행 관련 코드를 작성하는 정도로 알고 넘어갔었는데
• 이번기회에 내용을 정리해보려고 한다

현재 중인 react native프로젝트의 package.json중 일부

{
  "name": "secreto",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint",
    "build": "expo build"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/ngrok": "^4.1.3",
    "@expo/vector-icons": "^14.0.2",
    "@react-native-community/netinfo": "11.4.1",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@shopify/flash-list": "1.7.6",
    "@tanstack/react-query": "^5.74.4",
    "expo": "^53.0.5",
    "expo-blur": "~14.1.4",
    "expo-constants": "~17.1.5",
		 ...
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@gorhom/bottom-sheet": "^5.1.2",
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-native-community/datetimepicker": "^8.3.0",
    "@react-native-community/slider": "^4.5.6",
    "@types/jest": "^29.5.12",
    "@types/react": "~19.0.10",
		 ...
  },
  "private": true
}

파헤쳐보자

• name
  • 프로젝트의 이름, npm, yarn과 같은 패키지 매니저에서 이 프로젝트를 식별하는 데 사용
• main
  • 해당 패키지(만약 이 프로젝트가 라이브러리 형태로 배포된다면)의 진입점 파일을 지정
• version
  • 프로젝트의 현재 버전을 나타냅니다. 일반적으로 Semantic Versioning (SemVer) 규칙을 따름
  • major.minor.patch 형식으로 버전을 관리하며, 각 부분의 의미는 다음과 같음
    • Major (주 버전): 호환되지 않는 API 변경이 있을 때 증가. (1.0.0 → 2.0.0)
    • Minor (부 버전): 하위 호환성을 유지하면서 새로운 기능이 추가되었을 때 증가 (1.0.0 → 1.1.0)
    • Patch (수정 버전): 하위 호환성을 유지하면서 버그 수정이 이루어졌을 때 증가. (1.0.0 → 1.0.1)
• scripts

  • scripts 객체는 자주 사용되는 개발 명령어를 정의하고, 이를 짧은 이름으로 실행할 수 있도록 해줌

    "scripts": {
      "start": "expo start",
      // npm run start
      "android": "expo start --android",
      // npm run android
      "ios": "expo start --ios",
      // npm run ios
      "web": "expo start --web",
      // npm run web
      "test": "jest --watchAll",
      // npm test 
      "lint": "expo lint",
      "build": "expo build"
    }

• 종속성 관련
  • dependencies
    • 프로젝트가 실행될 때 필수적인 패키지 목록과 그 버전을 명시.
    • 여기에 나열된 라이브러리들은 앱이 정상적으로 작동하기 위해 설치되어야
  • devDependencies
    • 개발 환경에서만 필요한 패키지 목록과 그 버전을 명시.
    • 여기에 나열된 라이브러리들은 테스팅, 린팅, 빌드 도구 등 개발 과정에서 사용되지만, 최종 빌드 결과물에는 포함되지 않음
  • ^, ~ 는 뭘까
    • 의존성 버전 앞에 붙는 ^와 ~는 패키지 매니저(npm 또는 yarn)가 자동으로 업데이트할 수 있는 버전의 범위를 지정하는 데 사용.
    • ^ (Caret)
      • 이 기호는 마이너 버전과 패치 버전 업데이트를 허용
      • 예를 들어 "^4.1.3"은 4.x.x 범위 내에서 가장 최신 버전을 사용하겠다는 의미.
      • 즉, 4.1.4, 4.2.0 등으로 자동 업데이트될 수 있지만, 주요 버전이 바뀌는 5.0.0으로는 업데이트되지 않음.
      • 일반적으로 하위 호환성을 유지하는 범위 내에서 자동 업데이트를 허용하고자 할 때 사용
    • ~ (Tilde)
      • 이 기호는 패치 버전 업데이트만 허용.
      • 예를 들어 "~14.1.4"는 14.1.x 범위 내에서 가장 최신 버전을 사용하겠다는 의미.
      • 즉, 14.1.5 등으로 자동 업데이트될 수 있지만, 마이너 버전이 바뀌는 14.2.0이나 주요 버전이 바뀌는 15.0.0으로는 업데이트되지 않음.
      • 좀 더 보수적으로 버전을 관리하고 싶을 때 사용
    • 정확한 버전 명시 (예: "11.4.1", "19.0.0")
      • ^나 ~ 없이 정확한 버전이 명시된 경우에는 해당 버전만 사용하며, 자동 업데이트되지 않음.
      • 프로젝트의 안정성을 중요하게 생각하거나 특정 버전과의 호환성 문제가 있을 때 사용될 수 있습니다.