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

컨퍼런스

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

엔지니어링데이 2025 네이버 · YouTube

AI 핵심 요약

로그 플랫폼에서 대용량 로그를 표로 보여줄 때 기존 `react-window` 기반 구현은 행 스타일링, 가로 스크롤, 셀 병합과 동적 행 변경을 다루기 까다로웠습니다. 이를 개선하기 위해 네이티브 테이블 구조를 활용한 자체 가상화 컴포넌트 Big Table을 만들고, 뷰포트에 필요한 행·열만 렌더링하는 Windowing과 오버스캔, 데이터 선로딩을 적용했습니다. 고정 헤더·컬럼은 `position: sticky`로 구현하고, 펼쳐지는 행의 높이는 `ResizeObserver`로 내부에서 처리해 사용자의 계산 부담을 줄였습니다. 데모에서는 복잡한 UI 상태에서도 55 FPS 이상을 유지하고 30만 건을 표시했지만, 데이터를 계속 적재하면 브라우저 메모리 한계에 도달할 수 있어 캐싱이나 페이지 제한이 필요하다는 점도 확인했습니다.

가상화 범위는 스크롤 위치와 뷰포트 크기, 행·열 크기로 계산하고, 빠른 스크롤에 대비해 오버스캔 영역을 둡니다.
무한 스크롤은 화면 끝에 도달한 뒤가 아니라 임계 거리 안에 들어왔을 때 다음 데이터를 미리 가져오도록 설계합니다.
고정 헤더와 컬럼은 CSS `position: sticky`로 처리하고, 펼침에 따라 달라지는 행 높이는 `ResizeObserver`로 측정할 수 있습니다.
가상화는 DOM 렌더링 부담을 줄여도 가져온 데이터의 메모리 사용량까지 해결하지는 않으므로, 캐싱이나 페이지 수 제한을 함께 고려해야 합니다.

소개

네이버 사내 기술 교류 행사인 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 개발 배경...

비슷한 학습 자료

컨퍼런스 NDC

[NDC22-프로그래밍] 슈퍼피플 오픈월드 렌더링 최적화

컨퍼런스 NDC

● 설문조사: https://ko.surveymonkey.com/r/S7V83ZY ↓ 아래를 펼쳐, 세션 상세정보를 확인하세요! ● 발표분야: 프로그래밍 ● 발표자: 원더피플 기현우 / Wonder People Hyunwoo Ki ● 권장 대상: 렌더링 프로그래머 ● 키워드: #최적화 #오픈월드 #렌더링 #언리얼엔진

게임 프로그래밍

컨퍼런스 if kakao

웹뷰 개발 시 고려사항 #크로스_플랫폼_호환성

컨퍼런스 if kakao

(제5회 카카오테크밋 패널토의 내용의 일부입니다.) "Chrome Devtools를 활용하여 나만의 웹뷰 디버깅 환경 만들기" teenie(조민지님)의 발표영상 보러 가기 https://youtu.be/VeH70q7p9NM #kakaotechmeet #카카오테크 #frontend #프론트엔드 #개발자 #크로스플랫폼 #웹뷰개발 #webview

웹 개발 프론트엔드

컨퍼런스 DEVIEW 2023

하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive

컨퍼런스 DEVIEW 2023

[DEVIEW 2023] * 발표자 :최연규(NAVER Search) * 발표제목 : 하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive * DEVIEW 2023 바로가기: https://deview.kr/2023 #DEVIEW #DEVIEW2023 #데뷰 #데뷰2023

프론트엔드

컨퍼런스 엔지니어링데이 2025

글로벌웹툰 안드로이드 Large Screen 적용기

컨퍼런스 엔지니어링데이 2025

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025 에서 발표되었던 세션을 공개합니다. [발표 내용] Large Screen을 대응해야 하는 이유와 품질 가이드라인을 소개합니다. 글로벌웹툰이 View와 Compose 환경에서 Large Screen 최적화를 적용한 내용을 일부 공유합니다. [강의 대상] Large Screen 기기에서 Android 앱을 최적화하는데 관심 있는 개발자

모바일 앱 개발

컨퍼런스 엔지니어링데이 2025

KMP 기반 UI 컴포넌트 통합 전략

컨퍼런스 엔지니어링데이 2025

네이버 사내 기술 교류 행사인 NAVER ENGINEERING DAY 2025(5월)에서 발표되었던 세션을 공개합니다. [발표 내용] 멀티플랫폼에 대응 가능한 밴드 디자인 시스템의 설계 및 구현 방식에 대해 소개하고, 밴드 안드로이드 팀에서 아이콘 리소스를 자동화하여 관리하는 방법에 대해서 공유합니다. [강의 대상] * 안드로이드 개발자 및 멀티플랫폼에 대한 관심이 있는 분 * 디자인 시스템에 관심이 있는 분 [목차] Episode 1 : 디자인 시스템, 개념에서 실전까지 Episode 2 : KMP, 진짜 실무에 쓸 수 있을까? Episode 3 : BDS 모듈에 KMP 적용하기 Episode 4 : 디자인 시스템 UI 컴포넌트, Maven으로 배포하기 Episode 5 : Figicon으로 아이콘 자동 동기화하기

프론트엔드 모바일 앱 개발

컨퍼런스 INFCON 2024

그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024

컨퍼런스 INFCON 2024

🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지 - 유진의 "웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다. 저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다. WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수...

웹 개발 프로그래밍 언어