윈도잉(windowing) 기법을 적용한 고성능 표 컴포넌트 개발기

간단 소개

윈도잉 기법을 적용한 고성능 표 컴포넌트 Big Table 개발 과정을 소개하고, 성능 개선 및 자체 개발의 장단점을 분석합니다.

AI Summary

윈도잉 기법 소개
- 윈도잉 기법은 데이터를 창(window) 단위로 나눠 처리하는 기술이며, 데이터 스트리밍, 머신러닝, 컴퓨터 그래픽스, React 가상화 등에 활용됩니다.
- 데이터 스트리밍에서는 텀블링, 슬라이딩, 세션 윈도우 방식이 있습니다.
- React에서는 화면에 보이는 범위만 렌더링하여 성능을 최적화합니다.
React 윈도잉 라이브러리 비교 및 Big Table 개발
- react-virtualized, react-window, @tanstack/react-virtual 라이브러리를 비교 분석했습니다.
- react-window의 div 기반 레이아웃 문제점과 네이버 로그 시스템의 복잡한 요구사항 때문에 Big Table 컴포넌트를 직접 개발했습니다.
Big Table 설계 및 구현
- 필요한 데이터만 렌더링하고, 스크롤바가 바닥에 도달하면 데이터를 새로 적재하는 방식으로 구현했습니다.
- key 값을 활용해 불필요한 재렌더링을 방지하고, 뷰포트 높이, 행 높이, 행 개수를 이용해 렌더링 범위를 계산했습니다.
- Overscan을 통해 깜박임 이슈를 해결하고, Bottom Threshold를 통해 미리 데이터를 로딩했습니다.
- 컬럼 가상화, 고정 헤더/컬럼, 행 접기/펴기 기능도 구현했습니다.
- 자체 개발을 통해 성능 향상과 유연한 요구사항 대응이 가능했지만, 브라우저 메모리 제한으로 OOM 문제가 발생할 수 있습니다.