PC & AI Service 웹 대시보드
완료실시간 교통 데이터 캔버스 시각화 + WebSocket 스트리밍 대시보드
- 기간
- 2025.03 — 2025.06
- 인원
- 2명
- 역할
- 프론트엔드 개발 및 실시간 캔버스 구현
기술 스택
- React
- MUI
- WebSocket
- Canvas
- D3.js
주요 업무
- MUI + 커스텀 테마로 일관된 UI/UX 구현
- WebSocket 커스텀 훅(useCameraStream, useTrafficStats) 개발
- 실시간 교통 데이터의 캔버스 시각화 (ROI, 검지 라인, 속도 등)
주요 성과
- 카메라 스트림·교통 통계 구독 로직을 커스텀 훅 2종으로 분리해 화면 간 재사용
- ROI·검지 라인·속도 표시를 DOM이 아닌 캔버스에 직접 그려 실시간 갱신 경로를 단일화
성장 경험
Canvas와 WebSocket의 실시간 스트리밍 성능 최적화를 통해 프론트엔드 성능 최적화 역량 강화