네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] * 웹브라우저에서 대용량 데이터를 높은 성능으로 표현할 수 있는 Windowing 기법에 관해 소개하고 적용 사례를 공유합니다. [발표 대상] * Windowing 기법에 관심이 있는 개발자 [목차] * Windowing 기법이란 * 데이터 스트리밍 / 시계열 처리에서의 Windowing * 머신러닝에서의 Windowing * 컴퓨터 그래픽스에서의 Windowing * React에서의 Windowing / Virtualization 기술 * Windowing 기법을 활용한 오픈소스 라이브러리들 * Windowing기법을 사용하는 오픈소스 라이브러리 비교 * react-virtualized * react-window * @tanstack/react-virtual * 대용량 고성능 표 컴포넌트 Big Table 개발 배경 * Table이 아니기 때문에 발생하는 어려움들 * 오픈소스 이슈의 원인 파악의 어려움 * Big Table 컴포넌트의 주요 Windowing 기법 * 대용량 데이터를 무한 스크롤 표로 나타내려면 어떻게 해야 할까? * “Key”를 활용해서 불필요한 Re-rendering을 방지 * 주어진 영역에 보여줄 데이터 범위를 구하기 * Windowing (Virtualization) 적용 * Overscan을 통해 미리 그려 놓기 * Bottom Threshold 통해 미리 Fetch하기 * 컬럼에 대한 가상화 * 고정 헤더/컬럼 지원 * 행 접고/펴기 * 성능 / 장점 / 한계 * 성능 * Resize * Scroll * 접고/펴기 * 펴고 스크롤 * 30만건 데이터 로드 * 자체 개발로 얻은 장점 * 한계와 대안