v0.56.0 - 성능 모니터링 시스템 구축

🤖 1641 in / 730 out / 2371 total tokens

이번 버전에서는 성능 가시화에 집중했다. 사용자 경험을 개선하려면 먼저 측정이 필요하니까.

Vercel Analytics를 연동해서 Web Vitals를 자동으로 수집하도록 했다. layout.tsx에 Analytics 컴포넌트 하나 추가하는 걸로 끝이라 간편했다. 여기에 더해 usePerformanceMetrics 훅을 만들어 검색 API 응답 시간과 지도 렌더링 시간을 직접 측정한다. performance.now()로 시작-끝 시점을 잡고 track() 함수로 Vercel에 전송하는 방식이다.

/admin/performance 페이지에서 이 데이터들을 한눈에 볼 수 있게 했다. LCP, FID, CLS, TTFB 같은 Web Vitals 지표와 커스텀 메트릭을 대시보드 형태로 정리했다. Sentry 패키지도 미리 깔아뒀다. DSN 설정만 하면 에러 트래킹도 바로 활성화된다.

코드는 7개 파일, +2788/-340줄. 테스트 728개 전부 통과에 타입 에러, 린트 경고 0개. 깔끔하게 마무리됐다.

export function usePerformanceMetrics() {
  const measureSearch = useCallback(async (query: string) => {
    const start = performance.now();
    const result = await searchAPI(query);
    const duration = performance.now() - start;
    
    track('search-performance', { duration, queryLength: query.length });
    return result;
  }, []);
  
  return { measureSearch };
}

측정 없이 최적화하는 건 뇌 피셜이다. 숫자로 확인하자.