아래는 GitHub에 작성한 이슈(#893)를 주제로 한 개발 블로그 글 예시입니다. 마크다운 형식으로 작성해 보았습니다.

---

VSCode 확장 Githru 이슈 #893 발생 및 해결 과정 공유

이전 글과 이어집니다.

---

주요 변경 사항

불필요한 DOM 조작 최소화

예전에는 그래프를 다시 그릴 때 SVG의 모든 요소를 지우고(svg.selectAll("*").remove()) 전체 구조를 새로 만들었다. 개선 후에는 기존에 만들어진 축과 컨테이너는 그대로 두고, 필요한 부분만 갱신해 불필요한 삭제와 생성을 줄였다.

데이터 바인딩과 그룹 관리 개선

기존에는 barGroup.selectAll("rect").data(data).join(...)에서 rect(막대)만 기준으로 데이터를 바인딩했다. enter 단계에서 그룹을 만들고 그 안에 rect와 image를 넣어서 관리했는데, 이 방식은 g 그룹, rect, image까지 총 3개의 노드를 사용했다.

지금은 데이터를 그룹에 직접 바인딩하고, 키 값을 d.name 같은 고유값으로 설정했다. enter 단계에서는 그룹을 만들고 그 안에 rect와 image를 한 번만 생성해서 노드 수를 2개로 줄였다. 그리고 rect와 image를 별도의 selection으로 분리해 불필요한 중첩 순회를 줄였다.

---

테스트 결과

개선 내용을 다음과 같이 테스트했다.

측정 환경

• Node+jsdom: DOM 조작 성능만 측정 (benchmark-results.json)
• 브라우저(Playwright): Layout/Paint 포함 실제 성능 측정 (benchmark-results-browser.json)

테스트 시나리오

• 데이터 크기: 100, 1000, 5000개
• 반복 횟수: 5회
• 각 반복마다 값 증감, 일부 삭제/추가해 Enter/Update/Exit을 유도

측정 지표

• 평균 응답시간 (ms)
• 중앙값 (ms)
• 표준편차 (ms)
• 변동계수 (CV = 표준편차 / 평균 × 100%)
• 개선율 ((OLD - NEW) / OLD × 100%)

---

브라우저 환경 (benchmark-results-browser.json)

데이터 크기	지표	OLD	NEW	개선율
100개	평균 (ms)	14.40	16.60	-15.3%
	중앙값 (ms)	17.00	17.00	0.0%
	변동계수 (%)	32.75	6.14	+81.2%
1000개	평균 (ms)	19.20	29.60	-54.2%
	중앙값 (ms)	19.00	29.00	-52.6%
	변동계수 (%)	8.96	6.62	+26.1%
5000개	평균 (ms)	182.00	183.60	-0.9%
	중앙값 (ms)	104.00	171.00	-64.4%
	변동계수 (%)	89.10	11.52	+87.1%

---

Node+jsdom 환경 (benchmark-results.json)

데이터 크기	지표	OLD	NEW	개선율
100개	평균 (ms)	6.05	5.13	+15.3%
	중앙값 (ms)	5.57	4.11	+26.1%
	변동계수 (%)	52.19	43.42	+16.8%
1000개	평균 (ms)	26.00	33.57	-29.1%
	중앙값 (ms)	22.17	28.36	-27.9%
	변동계수 (%)	31.54	36.16	-14.7%
5000개	평균 (ms)	107.86	140.73	-30.5%
	중앙값 (ms)	113.95	136.49	-19.8%
	변동계수 (%)	11.72	4.93	+57.9%

---

정리 및 논의

• 전반적으로 새 버전은 평균 실행 시간이 전체적으로 '옛날' 버전보다 더 길어졌다.
• 단순 평균 속도로 보면 100개, 1000개 데이터 구간에서 '옛날' 쪽이 더 빨랐다.
• 하지만 대량 데이터(5000개)에서 '옛날' 버전은 예측 불가능한 이상치가 많았다.
• 새 버전은 변동계수가 대폭 줄어 더욱 안정적인 데이터를 제공했다.