[Pilot Test Analysis System] 웹 워커 기반 텔레메트리 처리 및 렌더링 성능 최적화

3월 실증 테스트 과정에서 수십 MB 단위의 고해상도 차량 텔레메트리 데이터(GPS, 속도, 페달 등)를 브라우저에서 실시간으로 처리할 때 메인 스레드가 완전히 블로킹되어 심각한 UI 멈춤(Freezing) 현상이 발생했다. 또한 네트워크 지연 발생 시 기존의 setInterval 기반 폴링 요청이 중첩(Stacking)되며 브라우저 메인 스레드가 과부하되는 성능적 한계가 드러났다. 이를 해결하기 위해 무거운 JSON 파싱 연산을 별도 스레드로 분리하고, 안정적인 폴링 파이프라인을 재구축하였다.

[TypeScript / Web Worker] 파싱 연산 오프로딩 및 폴링 파이프라인 최적화

• comlink 라이브러리를 도입하여 RPC 통신 기반의 백그라운드 웹 워커(telemetry.worker.ts)를 구축함.
• 무거운 JSON 파싱 및 GPS 좌표 필터링(Downsampling) 작업을 메인 스레드에서 워커 스레드로 오프로딩하여 UI 반응성을 확보함.
• setInterval 기반 폴링이 유발하는 요청 중첩 문제를 해결하기 위해 재귀적 setTimeout 패턴으로 변경하여 이전 요청이 완료된 후에만 다음 요청이 실행되도록 보장함.
• AbortController를 통합하여 줌(Zoom) 영역 변경이나 컴포넌트 언마운트 시 발생할 수 있는 ‘좀비’ 요청을 강제로 취소하여 네트워크 자원 낭비를 방지함.

[DOM / uPlot] 상태바 병합 및 requestAnimationFrame 기반 툴팁 고속화

• uPlot 차트의 고빈도 상태바(가감속, 회전) 렌더링 시 브라우저 레이아웃 엔진의 한계를 극복하기 위해, 동일한 상태를 가진 인접 데이터를 하나의 Segment로 병합하는 로직을 추가함.
• 툴팁(Tooltip)의 위치 좌표를 React 상태로 관리할 때 발생하는 버벅거림(Flickering)을 제거하기 위해, requestAnimationFrame을 활용한 DOM 직접 제어 방식으로 툴팁 포지셔닝을 최적화함.