피드로 돌아가기
I Built a Tool That Turns Any GitHub Repo Into an Interactive Dependency Graph: Here's Exactly How It Works
Dev.toDev.to
Backend

AST Parsing 및 D3.js 기반 GitHub Repo 의존성 시각화 시스템 구축

I Built a Tool That Turns Any GitHub Repo Into an Interactive Dependency Graph: Here's Exactly How It Works

Lucy2026년 4월 22일23분intermediate

AI 요약

Context

기존의 선형적인 코드 분석 방식은 프로젝트 규모 확대에 따라 파악 시간이 기하급수적으로 증가하는 한계 존재. 파일 간의 관계를 그래프 구조로 인식하지 못하고 개별 노드 단위로 탐색하는 비효율적인 워크플로우 해결 필요.

Technical Solution

  • --depth 1 옵션을 적용한 Shallow Clone 방식으로 Git History 배제 및 클론 속도 최적화
  • withFileTypes: true 옵션을 통한 Dirent 객체 활용으로 파일 시스템 stat 호출 횟수 최소화
  • Babel AST(JS/TS) 및 Python ast 모듈을 활용한 다국어 AST Parsing 파이프라인 구축
  • 정규표현식 기반의 Raw Import 추출 및 확장자 추론 로직을 통한 실제 파일 경로 Resolve 과정 설계
  • D3 Force Simulation 기반의 Interactive Graph 렌더링 및 Monaco Editor 연동을 통한 탐색성 강화
  • IGNORE Set 구성을 통한 node_modules 및 빌드 결과물 등 아키텍처 무관 데이터 필터링

Impact

  • Shallow Clone 도입으로 대형 레포지토리 기준 클론 시간 45초에서 2초로 단축

실천 포인트

- 대규모 파일 시스템 스캔 시 `readdirSync`의 `withFileTypes` 옵션을 사용하여 I/O 오버헤드 감소 검토 - 정적 분석 도구 설계 시 전체 히스토리가 불필요한 경우 Shallow Clone을 통해 인프라 리소스 절약 - 복잡한 의존성 시각화 시 800개 이상의 노드 발생 시점에서 발생하는 브라우저 렌더링 병목 해결을 위해 Subgraph Lazy Loading 도입 고려

태그

#Import Resolution#D3.js#Dependency Graph#AST#Static Analysis
원문 읽기