의존성 그래프를 활용한 프로젝트 시각화 — 사이드 이펙트 한눈에 파악하기

분야

프로그래밍/소프트웨어 개발

대상자

Frontend 개발자 및 팀 리더, 복잡한 코드베이스 관리가 필요한 개발자, 코드 리뷰 및 온보딩 과정에서 효율성을 높이고자 하는 팀

핵심 요약

• 의존성 그래프는 코드의 의존 관계를 시각화해 사이드 이펙트를 사전에 파악하는 데 핵심적입니다.
• Dependency Cruiser는 TS/JS 환경에서 의존성 그래프를 생성하는 도구로, depcruise 명령어를 통해 파일 간 의존성을 시각화합니다.
• Top-Down 시각화는 복잡도를 한눈에 파악하고, Bottom-Up 필터링은 특정 파일의 영향 범위를 줄여 작업 효율성을 높입니다.

섹션별 세부 요약

1. 문제 정의: 사이드 이펙트의 관리 어려움

• 고구마 뿌리 비유로 코드 변경 시 예상치 못한 영향 범위를 설명하며, 복잡한 파일 구조로 인한 수작업 분석의 한계를 강조.
• 144개 페이지, 4648개 파일의 대규모 프로젝트에서 수작업으로 의존 관계를 파악하기 어려운 점을 지적.
• 5 Whys 기법을 통해 문제 본질을 '의존 관계 파악의 어려움'으로 정의.

2. 해결 전략: 의존성 시각화 도입

• 설계 개선은 장기 전략으로, 시각화 도입은 단기적 문제 해결을 위한 방법으로 선택.
• Dependency Cruiser 도구를 선택하며, depcruise 명령어를 통해 의존성 그래프를 생성.
• 옵션 활용:
• --reaches로 특정 파일의 영향 범위 필터링
• --highlight로 페이지 및 컴포넌트 구분
• --include-only로 node_modules 제외

3. 예제: Dashboard 페이지 분석

• Before: 파일 단위 탐색으로 수시간 소요, 중복/누락 위험.
• After: 의존성 그래프를 통해 Dashboard 페이지의 하위 파일 구조를 한눈에 파악.
• 결과:
• pages/Dashboard.tsx와 pages/Settings.tsx 사용 여부 확인
• DashLayout, SettingsLayout의 사용 불필요성 발견
• 시간 절약과 중복/누락 감소 효과.

4. 코드리뷰 및 온보딩 최적화

• PR 기반 시각화: Github Actions를 통해 Pull Request의 영향 범위를 자동 시각화.
• 신규 기여자 온보딩: 전체 의존성 그래프로 프로젝트 구조를 지도처럼 시각화.
• 옵션 활용:
• --output-type ddot으로 폴더 구조만 표현
• --include-only로 특정 범위 시각화
• Rule 기반 Lint로 순환 참조 감지.

결론

• 의존성 그래프는 사이드 이펙트 사전 파악, 코드 복잡도 시각화, 협업 효율성 향상에 필수적입니다.
• Dependency Cruiser 도구를 활용해 Top-Down/Bottom-Up 필터링을 통해 작업 시간을 절약하고, 비개발자와의 소통을 용이하게 합니다.
• 실무 팁:
• 프로젝트 초기에 의존성 그래프를 생성해 팀 공유
• --highlight와 --collapse 옵션으로 핵심 요소 강조
• 리팩토링 시 AS-IS/TO-BE 비교를 통해 복잡도 감소 효과 시각화.