Virtual Scroll 환경 내 5만 라인 로그의 AI 상태 유지 설계

Combining Virtual Scroll With AI — Keeping 50,000 Log Lines Fast While Adding Gemini

hiyoyo2026년 5월 5일3분intermediate

AI 요약

Context

Virtual Scroll 도입으로 뷰포트 외부의 DOM 요소가 Unmount 되는 구조적 특성 보유. AI 진단 버튼의 상태(Loading, Result)가 Row 컴포넌트 내부에 존재하여 스크롤 시 상태가 소실되는 문제 발생.

Row 내부 상태를 Top-level State로 이전하여 Line Index 기반의 Key-Value Store로 관리하는 State Lifting 적용
React.memo를 통한 Row 컴포넌트 최적화로 특정 라인의 상태 변경 시 타 Row의 불필요한 Re-render 방지
Rust Backend의 Ring Buffer eviction으로 인한 데이터 소실 대응을 위해 bufferStartIdx 기반의 유효성 검증 로직 구현
react-virtuoso 라이브러리 채택을 통한 가변 높이 로그 라인의 효율적인 Mount/Unmount 라이프사이클 관리
State Map 구조를 통한 스크롤 복귀 시 즉각적인 진단 결과 복원 및 UI 일관성 유지

실천 포인트

1. Virtual Scroll 적용 시 상태를 Row 내부가 아닌 외부 Map 형태로 관리하고 있는가

2. 상태 업데이트 시 전체 리스트가 Re-render 되지 않도록 memoization 전략을 수립했는가

3. Backend의 버퍼 제한이나 데이터 만료 정책이 Frontend의 상태 인덱스와 동기화되는가

태그