<aside> 💡

성능 측정 계획

기본 계산기 UI 와 프리코스에서 사용한 로직을 연결한 상태에서 다음 항목을 측정하여 baseline 을 생성한다.

• Input Latency
• Render Duration
• Re-render Count
• Main Thread Usage

이후 baseline 값을 기준으로 각 단계의 개선 효과를 비교한다.

• React concurrent 기능 적용
• Debounce 적용
• Worker 적용 </aside>

1) Input Latency (입력 지연, ms)

• 사용자가 키를 입력한 시점부터 화면에 업데이트가 반영되기까지 걸리는 시간.
• 실제 UX 체감과 가장 밀접한 지표.
• performance.now() 기반으로 측정.

2) Render Duration (렌더링 시간, ms)

• React 컴포넌트가 다시 렌더링되는 데 소요된 시간.
• React Profiler로 확인 가능.
• Concurrent rendering 적용 전/후 비교에 사용.

3) Re-render Count (재렌더링 횟수)

• 특정 입력 길이 또는 계산 과정에서 컴포넌트가 얼마나 자주 재렌더링 되었는지를 기록.
• 상태 관리·렌더링 최적화 효과 확인용.

4) Main Thread Usage (%)

• 메인 스레드가 연산 + 렌더링 때문에 얼마나 바쁘게 사용되고 있는지를 확인하는 지표.
• Web Worker 적용 전/후를 비교하기 위한 핵심 지표.
• DevTools Performance 탭에서 샘플링.

5) Worker Offloading Effect (작업 분리 효과)

• Web Worker 적용 시 메인 스레드 점유율 감소폭 측정.
• 체감 UX와 직접 연결되므로 “Worker 도입이 왜 필요한지” 설명할 근거가 됨.