핵심 요약
NAVER D2가 윈도잉 기법을 적용한 고성능 표 컴포넌트 Big Table을 자체 개발해 네이버 로그 뷰의 렌더링 성능을 대폭 개선했습니다. 평균 55 FPS 이상을 안정적으로 유지하고 30만 건 데이터 렌더링도 가능했습니다.
구현 방법
- 윈도잉 기반 가상화 적용 및 대용량 표 구성
- ResizeObserver 내장으로 높이 자동 감지, 무한 스크롤과 Bottom Threshold 구현
- 고정 헤더/컬럼 가상화와 colspan 등의 표 기능 최적화
주요 결과
- 평균 55 FPS 이상 유지
- 30만 건 데이터 렌더링 가능
- CSS 기반 표 구현으로 컬럼 헤더의 움직임이 자연스럽고 colspan 활용 가능
- 무한 스크롤 데이터 관리 및 대안 검토(인덱스DB 캐시, 페이징, React Query maxPage)
