Dependency-cruiser로 의존성 분석
Dependency-Cruiser
프로젝트의 의존성 구조를 분석하고 시각화하는 도구
Dependency-cruiser를 사용하여 프로젝트의 의존성을 분석하고, 실제 프로젝트에 적용한 내용을 바탕으로 dependency-cruiser를 활용한 소스코드 검증과 의존성 시각화하였습니다. 이를 통해 얻을 수 있는 인사이트를 설명하고자 합니다.
Dependency-cruiser 설치
npm install -D dependency-cruiserDependency-cruiser 초기화
npx depcruise --init초기화 후 dependency-cruiser를 설치하면 .dependency-cruiser.js 가 루프 경로에 자동으로 생성된다.
소스코드 검증
npx depcruise src --include-only '^src' --config --output-type err-long소스 코드 검증 명렁어를 통해 다음의 내용을 확인할 수 있다.
-
의존성 분석: --include-only '^src' 옵션은 분석 범위를 src 디렉토리로 제한하여, 해당 디렉토리 내 파일들만을 대상으로 의존성을 검사한다.
-
상세한 오류 출력: --output-type err-long 옵션은 의존성 분석 결과에서 문제가 발견된 경우, 문제의 상세한 정보를 출력한다.
// 예시
$ npx depcruise src --include-only '^src' --config --output-type err-long
warn no-orphans: src/app/main/settings/layout.tsx
This is an orphan module - it's likely not used (anymore?). Either use it
or remove it. If it's logical this module is an orphan (i.e. it's a config
file), add an exception for it in your dependency-cruiser configuration.
By default this rule does not scrutinize dot-files (e.g. .eslintrc.js),
TypeScript declaration files (.d.ts), tsconfig.json and some of the babel
and webpack configs.
warn no-orphans: src/app/auth/kakao/layout.tsx
This is an orphan module - it's likely not used (anymore?). Either use it
or remove it. If it's logical this module is an orphan (i.e. it's a config
file), add an exception for it in your dependency-cruiser configuration.
By default this rule does not scrutinize dot-files (e.g. .eslintrc.js),
TypeScript declaration files (.d.ts), tsconfig.json and some of the babel
and webpack configs.
warn no-orphans: src/app/accounts/layout.tsx
This is an orphan module - it's likely not used (anymore?). Either use it
or remove it. If it's logical this module is an orphan (i.e. it's a config
file), add an exception for it in your dependency-cruiser configuration.
By default this rule does not scrutinize dot-files (e.g. .eslintrc.js),
TypeScript declaration files (.d.ts), tsconfig.json and some of the babel
and webpack configs.
warn no-circular: src/components/Restaurant/ShopFeedItem.tsx →
src/components/Restaurant/ShopFeedList.tsx →
src/components/Restaurant/ShopFeedItem.tsx
This dependency is part of a circular relationship. You might want to
revise your solution (i.e. use dependency inversion, make sure the modules
have a single responsibility)
warn no-circular: src/components/PostForm/PostContent.tsx →
src/components/PostForm/PostSearch.tsx →
src/components/PostForm/PostContent.tsx
This dependency is part of a circular relationship. You might want to
revise your solution (i.e. use dependency inversion, make sure the modules
have a single responsibility)
✘ 5 dependency violations (0 errors, 5 warnings). 294 modules, 611 dependencies cruised.의존성 시각화
아래 이미지와 같이 프로젝트 의존성을 시각화한 이미지가 새 창으로 띄워진다.
npx depcruise src --include-only '^src' --config --output-type dot | dot -Tsvg > dependency-graph.svg && open dependency-graph.svg
그외 설정
- script에 명령어 추가하여 명령어를 사용한다.
script: {
"depcruise:validate": "npx depcruise src --include-only '^src' --config --output-type err-long",
"depcruise:tree":"npx depcruise src --include-only '^src' --config --output-type dot | dot -Tsvg > dependency-graph.svg && open dependency-graph.svg",
}- 의존성 방향 allowed 설정
// 예시- Presentation Layer 의존성은 Domain으로만 향하게끔 설정
allowedSeverity: "error",
allowed: [
{
from: {path: "(^src/Presentation)"},
to: {path: ["^src/Domain"]},
}
]그러나 다른 규칙들이 모두 not-in-allowed로 표시 → 모든 유효한 의존성을 표기해야 한다.
번거롭지만, 레피지토리에 새 폴더를 추가할 때마다 의존성을 설계하고 새 규칙을 추가하는 것이 좋은 습관이라고 한다.
리뷰
-
의존성의 복잡성 이해
Dependency-Cruiser를 사용하면 프로젝트 내의 각 파일과 모듈 간의 의존성을 명확하게 볼 수 있다. 프로젝트의 구조적 복잡성을 이해하는 데 좋다. -
잠재적 문제 식별
의존성 그래프를 통해 순환 의존성이나 과도한 결합 같은 구조적 문제를 쉽게 식별할 수 있다. 이러한 문제들은 프로젝트의 유지보수를 어렵게 만들 수 있기 때문에 초기에 발견하고 수정하는 데 도움을 얻을 수 있다. -
리팩토링 가이드 제공
의존성 분석 결과를 바탕으로 리팩토링을 계획할 수 있다. 예를 들어, 의존성 그래프에서 특정 모듈이 과도하게 많은 의존성을 갖는지 파악하여, 모듈을 분리하거나 기능을 재조정할 수 있다. -
코드 베이스의 품질 향상
의존성 규칙을 설정함으로써 코드 베이스의 일관성과 품질을 향상시킬 수 있다.
