Canvas 기반 최적화로 실시간 Tick 데이터 렌더링 병목 해결

Context

기존 iframe 기반 3rd party 라이브러리의 UI 커스텀 제약과 postMessage 통신 오버헤드로 인한 성능 저하 발생. DOM 기반 SVG 렌더링의 한계로 인해 수천 개의 실시간 데이터 틱 처리 시 UI Lag 및 프레임 드랍 현상 직면.

Technical Solution

• iframe을 완전히 배제하고 메인 DOM 트리에 직접 결합되는 Native JS/React 모듈 구조 설계
• SVG 대신 Canvas API를 채택하여 대량의 데이터 포인트를 효율적으로 렌더링하는 고성능 아키텍처 구현
• Sub-millisecond 단위의 고빈도 업데이트를 처리하여 Main UI Thread의 Blocking을 방지하는 최적화 로직 적용
• Line, Candlestick, Volume Histogram을 단일 엔진에서 처리하는 Unified Runtime 설계를 통한 뷰 전환 최적화
• Binance, Kraken 등 외부 거래소 WebSocket 데이터 연동을 위한 전용 Data Connector 레이어 분리