[Pilot Test Analysis System] 레이더 시각화 렌더링 최적화 및 오버헤드 제거

프론트엔드 환경 내 실시간 비디오 재생과 동기화하는 텔레메트리 차트 및 공간 레이더 컴포넌트 성능 저하를 방지하기 위해 렌더링 아키텍처를 개선했다.

[TypeScript / Canvas] 레이더 렌더링 동기화 및 가비지 컬렉션 회피

• 다수 감지 객체 렌더링 시 가비지 컬렉션 스파이크로 인해 발생하는 비디오 프레임 드랍 현상을 확인하고 수정했다.
• requestVideoFrameCallback API를 활용해 비디오 프레임 갱신 주기에 맞춰 캔버스가 렌더링되도록 동기화 로직을 구현했다.
• 텔레메트리 데이터를 Float32Array 기반 평면 버퍼로 전처리해 인메모리 객체 생성을 최소화하고 가비지 컬렉션으로 인한 일시정지 현상을 차단했다.
• O(1) 시간 복잡도를 가지는 양자화 조회 테이블을 사전 생성해 비디오 재생 도중 발생하는 좌표 매핑 지연을 해결했다.

[React / DOM] 차트 플레이헤드 커서 및 상태 렌더링 최적화

• 재생 진행률에 맞춰 텔레메트리 차트 내 현재 시간 커서를 다시 그릴 때 발생하는 과도한 리렌더링 오버헤드를 확인하고 수정했다.
• 캔버스 전체를 매 프레임 다시 그리는 플러그인을 제거하고, DOM 요소 translateX 속성을 직접 제어하는 오버레이 방식으로 커서 이동 구조를 변경했다.
• 비디오 재생 중 React State 업데이트를 우회하고 requestAnimationFrame 루프 내에서 슬라이더 및 텍스트를 DOM 참조 기반으로 조작해 메인 스레드 부하를 줄였다.
• 비디오 일시 정지 및 종료 시점에 한정해 React 상태를 동기화함으로써 렌더링 성능과 컴포넌트 간 데이터 일관성을 동시 달성했다.

[React / Map Display] 지도 타일 로딩 및 동기화 최적화

• 위성 지도 컴포넌트가 재생 프레임마다 불필요하게 갱신되거나 과도한 타일 요청을 발생시키는 문제를 수정했다.
• 무거운 최신 지도 타일 렌더러 대신 Leaflet으로 변경하여 불필요한 의존성을 제거하고 렌더링 안정성을 확보했다.
• 최대 줌 레벨을 제한하고 페이드 애니메이션을 강제 비활성화해 타일 로딩 간 간헐적으로 발생하는 화면 깜빡임을 제거했다.
• 비디오 재생 도중 마스터 타임 구독을 해제하여 초당 60프레임에 달하는 무의미한 지도 동기화 호출과 Layout Thrashing을 해결했다.