Windowing 기법을 적용한 대용량 고성능 표 컴포넌트 개발기

본 글은 NAVER ENGINEERING DAY 2025에서 발표된 내용을 바탕으로, 웹 브라우저에서 대용량 데이터를 효율적으로 렌더링하기 위한 Windowing 기법과 이를 적용한 고성능 표 컴포넌트 'Big Table' 개발 경험을 공유합니다. Windowing 기법의 개념을 데이터 스트리밍, 머신러닝, 컴퓨터 그래픽스, 그리고 React에서의 Virtualization 기술과 연관 지어 설명하며, react-virtualized, react-window 등 관련 오픈소스 라이브러리를 소개합니다.

특히, 'Big Table' 컴포넌트 개발 과정에서 겪었던 어려움과 이를 해결하기 위해 적용한 Key 기반 Re-rendering 방지, 영역 데이터 범위 계산, Overscan, Bottom Threshold를 통한 미리 Fetch, 컬럼 가상화, 고정 헤더/컬럼 지원, 행 접기/펴기 등의 구체적인 Windowing 기법들을 상세히 다룹니다. 마지막으로 컴포넌트의 성능 측정 결과와 자체 개발을 통해 얻은 장점, 그리고 한계점 및 대안을 제시하며 글을 마무리합니다.