데이터 그리드 구축의 10단계

핵심 요약

• MongoDB·PostgreSQL용 DB GUI의 데이터 그리드는 중첩 데이터, 타입별 표시·편집, 검색, 열 재배치·고정까지 지원해야 해서 단순한 테이블 렌더링으로는 대용량에서 버틸 수 없다.
• 핵심은 원본과 별도로 표시용 섀도 테이블을 만들고, 행·열을 함께 가상화해 화면에 필요한 셀만 렌더링하는 것이다.
• 스크롤 경로에서는 passive 리스너·requestAnimationFrame·버퍼·히스테리시스를 쓰고, 레이아웃을 유발하는 속성 대신 transform·opacity와 위치 기반 DOM 재활용으로 프레임 비용을 제한한다.

챕터별 요약

1. 렌더링 모델 설계

• BSON/JSONB의 타입·중첩 경로·표시 문자열·열 상태·검색 결과를 섀도 테이블에 미리 계산해, 스크롤 중에는 원본 해석과 문자열 가공을 하지 않는다.

2. 양축 가상화

• 유령 스크롤 영역으로 네이티브 스크롤을 유지하면서 행은 뷰포트와 버퍼만, 가변 너비 열은 누적합+이진 탐색으로 필요한 범위만 렌더링한다.

3. 스크롤·페인트 최적화

• 이벤트를 프레임당 한 번으로 합치고, 버퍼 내부 이동은 재렌더링을 생략하며, 고속 플릭에는 렌더링을 잠시 멈춘다. 위치 변경은 top/left 대신 GPU 친화적인 transform으로 처리한다.

4. DOM 비용과 UX의 절충

• 아이콘은 공유 SVG 배경으로, 무거운 편집기는 필요할 때만 마운트하고, 화면 위치를 key로 DOM을 재활용한다. Canvas는 더 빠를 수 있지만 텍스트 선택·접근성·확장성을 위해 DOM 기반을 선택했다.

한줄 결론

• 고성능 데이터 그리드는 “더 적게 그리기”에 그치지 않고, 표시 상태 분리·양축 가상화·프레임 예산 관리·DOM 재활용을 함께 설계해야 한다.