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

이 게시물은 웹브라우저에서 대용량 데이터를 높은 성능으로 표현할 수 있는 Windowing 기법과 그 적용 사례를 소개합니다.

Windowing 기법 개요

• 데이터 스트리밍, 시계열 처리, 머신러닝, 컴퓨터 그래픽스 등 다양한 분야에서의 활용
• React 기반 Virtualization 기술과 오픈소스 라이브러리(react-virtualized, react-window 등) 비교

Big Table 컴포넌트 개발

• 대용량 데이터를 무한 스크롤 표로 구현하기 위한 핵심 기법 적용
• Key 활용으로 불필요한 Re-rendering 방지, Overscan과 Bottom Threshold로 성능 최적화
• 고정 헤더/컬럼, 행 접고/펴기 등 UI 기능 지원
• 30만 건 데이터 로드 성능 테스트 및 자체 개발의 장점과 한계