requestAnimationFrame과 Ghost Line 도입으로 60fps 렌더링 달성

Context

매 mousemove 이벤트마다 Column Width를 업데이트하는 Naive Approach 적용 시 Layout Recalculation 빈번 발생. 특히 대규모 Table 환경과 저사양 디바이스에서 심각한 Input Lag 유발.

Technical Solution

• Layout Recalculation 횟수 최소화를 위한 requestAnimationFrame 기반 렌더링 루프 설계
• 드래그 중 실제 DOM 변경 대신 커서를 추적하는 Ghost Line Indicator를 렌더링하여 시각적 피드백 제공
• Column Width 업데이트 시점을 mouseup 이벤트 시점으로 지연시켜 단 한 번의 Layout Commit 수행
• Content 길이에 따른 Automatic Row Height 및 Text Wrap 적용을 통한 유연한 레이아웃 유지
• Editor의 상태를 그대로 유지하여 PDF 및 PNG Export 시 일관된 뷰 렌더링 보장