의존성 그래프 시각화는 프로젝트의 패키지 의존성을 시각적으로 이해하고 분석하는 데 도움이 됩니다. 이를 통해 패키지 간의 의존성을 시각적으로 파악할 수 있고, 의존성 트리를 쉽게 이해할 수 있습니다.

이번 포스트에서는 dependency-cruiser와 dependency-visualizer 라이브러리를 사용하여 NPM 의존성 그래프를 시각화하는 방법에 대해 알아보겠습니다.

목표

우리의 목표는 다음과 같습니다.

1. dependency-cruiser를 사용하여 의존성 정보를 추출합니다.
2. dependency-visualizer를 사용하여 의존성 그래프를 시각화합니다.

dependency-cruiser를 사용하여 의존성 정보 추출하기

먼저, dependency-cruiser를 사용하여 프로젝트의 의존성 정보를 추출해보겠습니다.

1. 프로젝트 루트 디렉토리에서 다음 명령어를 사용하여 dependency-cruiser를 설치합니다.

npm install -g dependency-cruiser

1. 다음 명령어를 실행하여 dependency-cruiser를 사용하여 의존성 정보를 추출합니다.

dependency-cruiser --exclude "^node_modules" . -f json | jq -r '.dependencies[] | "\(.source) -> \(.depends[])"'

위 명령어는 dependency-cruiser를 사용하여 JSON 형식으로 의존성 정보를 추출하고, jq를 사용하여 해당 정보를 로그에 출력합니다.

dependency-visualizer를 사용하여 의존성 그래프 시각화하기

의존성 정보를 성공적으로 추출했다면, 이제 dependency-visualizer를 사용하여 그래프를 시각화할 차례입니다.

1. 프로젝트 루트 디렉토리에서 다음 명령어를 사용하여 dependency-visualizer를 설치합니다.

npm install -g dependency-visualizer

1. 다음 명령어를 실행하여 dependency-visualizer를 사용하여 의존성 그래프를 시각화합니다.

dependency-visualizer . -x "node_modules" --exclude "test" -o dependency-graph.html

위 명령어는 dependency-visualizer를 사용하여 의존성 그래프를 시각적으로 보기 좋은 HTML 파일로 출력합니다.

의존성 그래프를 시각화하면 프로젝트의 구조와 의존성을 더 잘 이해할 수 있습니다. dependency-cruiser와 dependency-visualizer를 사용하여 복잡한 의존성을 관리하는데 도움을 받을 수 있습니다.

기사 작성자: Node.js 및 NPM에서 참고됨.