Files
GhiVideo/docs/history/2026-04-01_StationOverlay-렌더링분석.md
b23042andClaude Opus 4.8 78fc090360 초기 커밋: 스테이션(측점) 기반 주행영상 플레이어
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel
- 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API
- 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-25 16:37:57 +09:00

1.4 KiB

StationOverlay 렌더링 끊김 분석 + history 자동화 규칙 추가

소요 시간: 약 15분
Context 사용량: input ~8k / output ~3k tokens
이슈: 없음


작업 내용

1. StationOverlay 렌더링 파이프라인 분석

  • client/src/components/overlay/StationOverlay.tsx 코드 분석
  • 렌더링 구조: RAF 루프(60fps) + renderCache useEffect(드론 프레임 변경 시)
  • 끊김 원인 파악:
    • panelDroneFrame 상태 변경 시 useEffect에서 수백~수천 개 좌표 변환(toCameraCoords + pixelFromCamera)이 메인 스레드에서 동기 실행
    • 계산이 16ms 초과 시 RAF 프레임 드롭 → 뚝뚝 끊김
  • 측정 방법 제안: performance.now() 로깅으로 캐시 빌드 시간 측정
항목 실제
RAF draw 횟수 ~60fps (항상)
캐시 재빌드 횟수 ~30fps (드론 프레임 변경 시)
끊김 원인 캐시 빌드 시 메인 스레드 블로킹

2. history 자동화 규칙 CLAUDE.md 추가

  • 사용자 기대: 작업 완료 시 날짜+주제별 history 파일 자동 작성
  • 현재 훅은 "리마인더/가드"만 담당, 파일 생성은 Claude 몫
  • CLAUDE.md 상단에 "작업 완료 시 필수 — 히스토리 기록" 섹션 추가

산출물

  • CLAUDE.md — 히스토리 기록 규칙 섹션 추가
  • docs/history/2026-04-01_StationOverlay-렌더링분석.md (이 파일)