의존성 그래프를 활용한 당근마켓 코드 파악 시간 단축 및 생산성 향상 전략

핵심 기술

본 콘텐츠는 대규모 프로젝트에서 발생하는 예기치 못한 사이드 이펙트와 코드 파악의 어려움을 해결하기 위해 의존성 그래프(Dependency Graph)를 활용하는 방안을 제시합니다. Dependency Cruiser와 같은 도구를 활용하여 코드의 복잡성을 시각화하고, 이를 통해 개발 생산성을 향상시키는 실질적인 사례를 공유합니다.

기술적 세부사항

• 문제 정의: 대규모 프로젝트에서 파일 간의 복잡한 의존 관계를 수작업으로 파악하기 어려워 발생하는 일정 지연 및 사이드 이펙트 문제.
• 근본 원인 분석: 144개의 페이지와 4648개의 파일로 구성된 프로젝트에서 재사용되는 파일까지 고려하면 경우의 수가 너무 커 수작업 파악이 불가능함.
• 해결 전략: 파일 간 의존 관계 시각화를 통한 코드 파악 시간 단축.
  • 설계 (장기 전략): 폴더 구조 및 아키텍처 개선으로 의존 관계 복잡도 자체를 낮춤.
  • 시각화 (단기 전략): 파일의 import/export 관계를 한눈에 볼 수 있도록 시각화.
• 도구 활용: Dependency Cruiser를 이용한 의존성 그래프 생성 및 활용.
  • 사용 옵션 예시: --reaches, --highlight, --include-only 등.
• 활용 사례:
  • '어디에 사용되는지' 파악: 특정 컴포넌트(Card.tsx)가 사용되는 페이지(Dashboard.tsx, Settings.tsx)를 시각적으로 빠르게 파악하여 작업 영향 범위 확인.
  • '무엇을 사용하는지' 파악: 특정 페이지(Dashboard.tsx)의 하위 의존성을 시각화하여 복잡도 및 필요한 작업 범위를 직관적으로 파악.
  • 코드 리뷰: PR에 포함된 파일 변경의 영향 범위를 시각화하여 코드 리뷰의 효율성 증대.
  • 신규 기여자 온보딩: 프로젝트 전체 구조를 지도처럼 시각화하여 초기 코드 파악 부담 감소.
• 추가 팁:
  • --output-type ddot를 통한 폴더 단위 그래프.
  • 특정 범위 시각화를 위한 --include-only 활용.
  • 순환 참조 등 규칙 위반 시 강조를 위한 Rule 활용.

개발 임팩트

• 개발 시간 단축: 코드 파악에 소요되는 시간을 수 시간에서 수 초로 대폭 단축.
• 생산성 향상: 불필요한 리소스 소모 없이 더 빠른 실행 및 기능 추가 가능.
• 협업 강화: 비개발 직군 팀원들에게 코드 복잡성을 직관적으로 설명하여 설득력 증대.
• 일정 산정 근거 확보: 코드 복잡도에 대한 객관적인 시각적 근거를 바탕으로 정확한 일정 산정 및 소통.
• 코드 품질 관리: 의존성 시각화를 통한 코드베이스 전체 복잡도 관리 및 잠재적 문제점 조기 발견.

커뮤니티 반응

본문에서 직접적인 커뮤니티 반응은 언급되지 않았으나, AI 코드 작성 도구(Copilot, Cursor)의 발전과 함께 코드 파악 시간 단축의 중요성을 강조하며 개발자들의 생산성 향상에 대한 관심을 나타냅니다.