본문으로 건너뛰기

Package.json Analyzer

package.json 파일을 분석하여 의존성, 버전 타입, 위험도를 평가합니다. npm 프로젝트 관리에 유용합니다.

package.json

Version Type Guide

  • ^ (Caret): Allows minor and patch updates
  • ~ (Tilde): Allows patch updates only
  • Exact: No automatic updates
  • Range: Custom version range (highest risk)

주요 기능​

  • 의존성 통계: 전체, dependencies, devDependencies 개수
  • 버전 타입 분석: Exact, Caret(^), Tilde(~), Range 버전 분류
  • 위험도 평가: 각 의존성의 업데이트 위험도 표시
  • 스크립트 분석: npm scripts 분류 및 분석
  • 시각적 대시보드: 통계와 차트로 한눈에 파악

버전 타입 가이드​

1. Exact Version (정확한 버전)​

{
  "dependencies": {
    "lodash": "4.17.21"
  }
}

특징:

  • 정확히 해당 버전만 설치
  • 자동 업데이트 없음
  • 위험도: 낮음 ✅

사용 시기:

  • 프로덕션 환경에서 안정성이 중요한 경우
  • 특정 버전에서만 작동하는 코드
  • 레거시 프로젝트

2. Caret (^) - 캐럿​

{
  "dependencies": {
    "react": "^18.2.0"
  }
}

특징:

  • Minor와 Patch 업데이트 허용
  • ^18.2.0 → 18.x.x 허용 (19.0.0은 불가)
  • 위험도: 중간 ⚠️

버전 범위:

  • ^1.2.3 → 1.2.3 이상 2.0.0 미만
  • ^0.2.3 → 0.2.3 이상 0.3.0 미만 (0.x는 특별 처리)
  • ^0.0.3 → 정확히 0.0.3만 허용

사용 시기:

  • npm의 기본 설정
  • 일반적인 라이브러리 사용
  • 안정적인 패키지

3. Tilde (~) - 틸드​

{
  "dependencies": {
    "axios": "~1.4.0"
  }
}

특징:

  • Patch 업데이트만 허용
  • ~1.4.0 → 1.4.x 허용 (1.5.0은 불가)
  • 위험도: 낮음 ✅

버전 범위:

  • ~1.2.3 → 1.2.3 이상 1.3.0 미만
  • ~1.2 → 1.2.0 이상 1.3.0 미만
  • ~1 → 1.0.0 이상 2.0.0 미만

사용 시기:

  • 버그 수정만 받고 싶을 때
  • 보수적인 업데이트 정책
  • 안정성이 매우 중요한 경우

4. Range (범위)​

{
  "dependencies": {
    "express": ">=4.0.0 <5.0.0",
    "winston": "3.x || 4.x"
  }
}

특징:

  • 복잡한 버전 범위 지정
  • 예측하기 어려운 업데이트
  • 위험도: 높음 ❌

범위 표현:

  • >=1.0.0 <2.0.0: 1.0.0 이상 2.0.0 미만
  • 1.x || 2.x: 1.x 또는 2.x
  • 1.0.0 - 2.0.0: 1.0.0부터 2.0.0까지

주의사항:

  • 예상치 못한 버전 설치 가능
  • CI/CD에서 불안정할 수 있음
  • 가능한 피하는 것을 권장

위험도 평가 기준​

🟢 낮음 (Low Risk)​

  • Exact 버전
  • Tilde(~) 버전
  • Patch 업데이트만 허용

특징:

  • 예측 가능한 동작
  • 안정적인 빌드
  • 재현 가능한 환경

🟡 중간 (Medium Risk)​

  • Caret(^) 버전
  • Minor + Patch 업데이트 허용

특징:

  • 새 기능 자동 적용
  • Breaking change 가능성 낮음
  • 일반적으로 안전

🔴 높음 (High Risk)​

  • Range 버전
  • 복잡한 버전 범위

특징:

  • 예측 불가능한 업데이트
  • Major 버전 변경 가능
  • Breaking change 위험

사용 시나리오​

시나리오 1: 새 프로젝트 시작​

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "axios": "^1.4.0"
  },
  "devDependencies": {
    "typescript": "^5.1.0",
    "vite": "^4.4.0"
  }
}

분석 결과:

  • 총 의존성: 5개
  • Caret 버전: 5개 (100%)
  • 중간 위험: 5개
  • 평가: npm 기본 설정, 일반적으로 안전

시나리오 2: 프로덕션 환경​

{
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "axios": "~1.4.0",
    "lodash": "4.17.21"
  }
}

분석 결과:

  • 총 의존성: 4개
  • Exact 버전: 3개 (75%)
  • Tilde 버전: 1개 (25%)
  • 낮은 위험: 4개
  • 평가: 매우 안정적, 프로덕션에 적합

시나리오 3: 위험한 설정​

{
  "dependencies": {
    "express": ">=4.0.0",
    "mongoose": "5.x || 6.x || 7.x",
    "ws": "*"
  }
}

분석 결과:

  • 총 의존성: 3개
  • Range 버전: 3개 (100%)
  • 높은 위험: 3개
  • 평가: ❌ 즉시 수정 필요!

문제점:

  • "*" 사용 시 최신 버전 설치 (위험)
  • Major 버전 혼재 가능
  • 빌드 재현 불가능

수정안:

{
  "dependencies": {
    "express": "~4.18.2",
    "mongoose": "^7.0.0",
    "ws": "^8.13.0"
  }
}

스크립트 분석​

스크립트 타입​

분석 도구는 다음 타입으로 스크립트를 분류합니다:

  1. test: 테스트 실행

    "test": "jest",
    "test:watch": "jest --watch"

  2. build: 프로젝트 빌드

    "build": "vite build",
    "build:prod": "webpack --mode production"

  3. dev: 개발 서버

    "dev": "vite",
    "start": "node server.js"

  4. lint: 코드 린팅

    "lint": "eslint src",
    "lint:fix": "eslint src --fix"

  5. format: 코드 포맷팅

    "format": "prettier --write ."

모범 사례​

✅ 권장사항​

  1. package-lock.json 사용

    • 정확한 버전 고정
    • 재현 가능한 빌드
    • CI/CD 안정성

  2. 정기적인 업데이트

    npm outdated
    npm update

  3. 보안 취약점 확인

    npm audit
    npm audit fix

  4. Renovate/Dependabot 사용

    • 자동 업데이트 PR 생성
    • 보안 패치 자동 적용

❌ 피해야 할 사항​

  1. 와일드카드(*) 사용 금지

    // ❌ 나쁜 예
    "dependencies": {
      "lodash": "*"
    }

    // ✅ 좋은 예
    "dependencies": {
      "lodash": "^4.17.21"
    }

  2. 너무 넓은 범위 지정 금지

    // ❌ 나쁜 예
    "express": ">=3.0.0"

    // ✅ 좋은 예
    "express": "~4.18.2"

  3. devDependencies를 dependencies에 넣지 말기

    // ❌ 나쁜 예
    "dependencies": {
      "webpack": "^5.0.0"
    }

    // ✅ 좋은 예
    "devDependencies": {
      "webpack": "^5.0.0"
    }

package.json 최적화 팁​

1. 의존성 정리​

# 사용하지 않는 패키지 찾기
npx depcheck

# 중복 패키지 제거
npm dedupe

2. 번들 크기 최적화​

# 패키지 크기 분석
npx webpack-bundle-analyzer

# 가벼운 대안 찾기
npx bundle-phobia <package-name>

3. 보안 강화​

{
  "scripts": {
    "prepublishOnly": "npm audit",
    "preinstall": "npm audit"
  }
}

버전 업데이트 전략​

방법 1: 보수적 (Exact + Tilde)​

{
  "dependencies": {
    "react": "18.2.0",
    "lodash": "~4.17.21"
  }
}
  • 안정성 최우선
  • 프로덕션 환경
  • 레거시 프로젝트

방법 2: 균형적 (Caret)​

{
  "dependencies": {
    "react": "^18.2.0",
    "axios": "^1.4.0"
  }
}
  • npm 기본값
  • 일반적인 프로젝트
  • 활발한 개발 중

방법 3: 공격적 (Latest)​

{
  "dependencies": {
    "react": "latest"
  }
}
  • ❌ 프로덕션에서는 피하기
  • 실험적 프로젝트만

관련 도구​

추가 자료​