[2025 OSSCA] githru 성능 최적화

나는 현재 2025 OSSCA에서 Githru라는, git의 시각적 분석을 위한 VSCode 익스텐션 팀에서 활동하고 있다. 현재 약 한 달 가량의 챌린지 기간은 종료된 상태이고, 이제 본격적으로 기여를 해야 하는 마스터 기간이 시작됐다.

Githru 안에서는 총 3팀으로 나누어 활동을 진행하고 있다. view와 관련된 기능을 맡는 core, d3를 활용한 시각화를 맡는 newviz, mcp 등과 같은 ai를 다루는 vibe로, 나는 core 팀에 속해 특히 performance tuning과 관련된 작업을 하고 있다.

이 글에서 내가 진행한 성능 최적화 과정을 기록해보고자 한다!

1. D3 렌더링 최적화

D3란?
"Data-Driven-Documents"의 약자로, 동적인 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리이다. 웹 표준(HTML, SVG, CSS)을 사용해 복잡한 시각화를 구현하고, 데이터를 DOM에 바인딩하여 동적인 그래프나 차트를 쉽게 구현할 수 있도록 해준다.

Githru의 한 컴포넌트에서는 이 d3 라이브러리를 사용하여 아래와 같은 기능을 제공한다.

• 막대 그래프 동적 렌더링
  • 주어진 데이터를 바탕으로 막대 그래프의 막대, 축, 레이블 등을 동적으로 생성하고 업데이트한다. 데이터가 변할 때마다 d3가 변경 사항을 감지하여 그래프를 다시 그린다.
• 스케일링
  • 숫자 데이터(예: 커밋 수)를 SVG의 픽셀 값(예: 막대의 높이)으로 변환하는 스케일 함수를 정의한다. d3.scaleLinear()와 d3.scaleBand()가 이 역할을 수행한다.
• 상호작용 처리
  • 이벤트 리스너를 사용하여 마우스 움직임이나 클릭에 반응하는 인터랙티브 기능을 구현한다. 예를 들어, 막대에 마우스를 올리면 툴팁을 표시하고, 클릭하면 데이터를 필터링한다.
• 애니메이션
  • transition() 함수를 사용해 막대의 높이와 위치가 변할 때 애니메이션 효과를 추가한다.

---

D3 내장 함수 enter(), update(), exit(), join()

위 함수들은 데이터와 DOM 요소를 연결하여 동적인 시각화를 관리하는 데 사용되는 핵심적인 selection 메서드이다.

[enter()] : 데이터가 추가되어 새로운 시각화 요소를 그려야 할 때

• 데이터는 존재하지만 DOM에는 아직 없는 요소를 나타내는 가상 선택 영역을 반환한다.
• 이 선택 영역은 새로운 DOM 요소를 생성하고, 새로운 데이터에 바인딩하는 데 사용된다.
• ex) 데이터에 5개의 새로운 항목이 추가되었을 때, enter()는 이 5개 항목에 해당하는 가상 요소를 반환한다. selection.enter().append("rect")와 같이 사용하면, 새로운 데이터 수만큼 <rect> 요소를 생성하여 문서에 추가한다.

[update()] : 데이터에도 존재하고 DOM에도 이미 있는 요소를 나타낼 때

• 데이터가 변경되거나 값이 업데이트되었을 때, 기존 시각화 요소의 속성(예: 크기, 색상, 위치)을 변경해야 할 때 사용한다.
• ex) 기존 데이터의 값이 변경되었을 때, update()는 이 데이터에 연결된 DOM 요소를 반환한다.

[exit()] : DOM에는 존재하지만 더 이상 데이터에 없는 요소를 나타낼 때

• 데이터가 삭제되어 더 이상 시각화할 필요가 없는 요소를 문서에서 제거해야 할 때 사용한다.
• ex) 기존 데이터에서 2개의 항목이 삭제되었을 때, exit()는 이 2개 항목에 해당하는 DOM 요소를 반환한다. selection.exit().remove()와 같이 사용하면, 더 이상 데이터에 없는 막대 요소를 문서에서 삭제할 수 있다.

[join()] : 위 세 함수를 하나로 통합한 함수

• 예전에는 enter, update, exit 세 그룹을 명시적으로 나누어 코드를 작성해야 했지만, D3 v5부터 도입된 .join() 함수를 이 과정을 하나의 간결한 메서드로 통합하여 처리할 수 있다.
• .join(enter => ..., update => ..., exit => ...) 함수는 내부적으로 enter(), update(), exit()를 모두 처리하며, 개발자가 제공하는 함수에 따라 각 그룹의 요소를 자동으로 생성, 수정, 삭제가 가능하다.
• 즉, 데이터와 DOM 요소를 자동으로 연결해주는 도구인 것이다!