liminfoNPM Dependency Graph
package.json 의존성 트리 인터랙티브 시각화
NPM Dependency Graph 소개
NPM 의존성 뷰어는 package.json 파일을 파싱하여 모든 의존성을 깔끔하고 필터링 가능한 목록으로 표시합니다. 텍스트 영역에 package.json을 붙여넣으면 도구가 즉시 "dependencies"와 "devDependencies" 필드를 읽어 각 그룹별 수를 세고 패키지 이름과 버전 제약 조건을 렌더링합니다. 클릭 한 번으로 전체, 프로덕션 전용(dependencies), 개발 전용(devDependencies) 패키지를 필터링해 볼 수 있습니다.
프론트엔드 및 백엔드 개발자들은 "npm ls"를 실행하거나 저장소를 로컬에 설치하지 않고도 프로젝트의 의존성 구조를 빠르게 파악하고 싶을 때 이 도구를 활용합니다. 풀 리퀘스트를 검토하는 코드 리뷰어, 오래되거나 예상치 못한 패키지를 검사하는 보안 엔지니어, 새 코드베이스에 온보딩하여 의존성 구조를 한눈에 파악하려는 개발자에게도 유용합니다. 도구는 package.json 루트에 프로젝트 이름과 버전이 있으면 함께 표시합니다.
파싱은 전적으로 브라우저 내장 JSON.parse() 함수를 사용해 클라이언트 사이드에서 이루어지며, 데이터가 서버로 전송되지 않고 로드 후에는 인터넷 연결 없이도 동작합니다. 붙여넣은 텍스트가 유효한 JSON이 아니면 즉시 파싱 오류 메시지가 표시됩니다. 색상 코딩 배지로 프로덕션 의존성(초록)과 개발 의존성(노랑)을 구분하여 어떤 패키지가 최종 사용자에게 전달되고 어떤 것이 빌드 타임 전용인지 쉽게 파악할 수 있습니다.
주요 기능
- 유효한 package.json의 "dependencies"와 "devDependencies" 필드 파싱
- 모든 의존성의 패키지 이름과 버전 제약 조건을 깔끔한 목록으로 표시
- 전체(All), 프로덕션(prod), 개발(dev) 패키지를 별도로 보는 필터 탭
- 총 의존성 수, 프로덕션 수, 개발 수를 보여주는 요약 배지
- package.json 루트 메타데이터에서 프로젝트 이름과 버전 표시
- 붙여넣은 JSON이 유효하지 않을 때 즉각적인 파싱 오류 피드백
- 100% 클라이언트 사이드 JSON 파싱 — 데이터 전송 없음, 오프라인 동작
- 다크 모드 지원 및 모든 기기에서 편안한 반응형 레이아웃
자주 묻는 질문
package.json의 dependencies와 devDependencies의 차이는 무엇인가요?
"dependencies"는 프로덕션 런타임에 필요한 패키지입니다. "npm install" 실행 시 설치되며 프로덕션 빌드에 포함됩니다. "devDependencies"는 개발 및 테스트 중에만 필요한 패키지(TypeScript, ESLint, Jest 등)로, 일반적으로 프로덕션 배포에서는 제외됩니다.
이 도구로 프로젝트 패키지를 검토하는 방법은?
프로젝트의 package.json 파일 내용을 복사하여 텍스트 영역에 붙여넣으면 모든 패키지가 유형별로 즉시 표시됩니다. All / prod / dev 필터 버튼을 사용해 특정 그룹에 집중하세요.
이 도구가 전이적(중첩) 의존성도 보여주나요?
아니요. 이 도구는 붙여넣은 package.json에 선언된 직접 의존성만 보여줍니다. 전이적 의존성(내 의존성이 의존하는 패키지)을 보려면 "npm ls --all"을 실행하거나 lock 파일 파서를 사용해야 합니다.
package.json의 JSON 유효성 검사에도 쓸 수 있나요?
네. 붙여넣은 텍스트가 유효한 JSON이 아니면 도구가 즉시 구체적인 구문 문제와 함께 파싱 오류를 표시합니다. 버전 관리에 커밋하기 전 package.json 구문을 빠르게 검증하는 용도로 사용할 수 있습니다.
"^1.2.3"이나 "~4.0.0" 같은 버전 제약 조건은 무엇을 의미하나요?
"^1.2.3"은 1.2.3과 호환되는 버전을 허용합니다(즉, >=1.2.3 <2.0.0). "~1.2.3"은 패치 수준 업데이트만 허용합니다(>=1.2.3 <1.3.0). 접두사 없는 "4.0.0"은 정확히 그 버전을 의미합니다. npm의 semver 범위 지정자입니다.
pnpm 또는 yarn 워크스페이스의 package.json에도 쓸 수 있나요?
네. 도구는 표준 package.json 필드를 읽습니다. "dependencies"와 "devDependencies" 필드 형식은 npm, pnpm, Yarn, Bun 등 모든 Node.js 패키지 매니저에서 동일하므로 어떤 프로젝트의 package.json이든 파싱할 수 있습니다.
패키지 이름과 버전 문자열만 표시되고 전체 의존성 그래프는 왜 보이지 않나요?
package.json의 "dependencies" 필드는 직접 의존성과 해당 버전 범위만 설명합니다. 중첩 의존성과 해결된 버전을 포함한 전체 의존성 그래프를 만들려면 lock 파일(package-lock.json, yarn.lock, pnpm-lock.yaml)을 읽거나 실제 설치를 실행해야 합니다. 이 도구는 package.json에서 사람이 읽을 수 있는 직접 의존성 개요에 집중합니다.
보안 감사에 이 도구가 유용한가요?
첫 번째 단계로는 유용합니다. 모든 직접 의존성과 선언된 버전 제약 조건을 확인할 수 있습니다. 그러나 제대로 된 보안 감사를 위해서는 "npm audit"을 실행하거나 취약점 데이터베이스를 확인하고 전이적 의존성까지 검사하는 Snyk 같은 도구를 사용해야 합니다.