related git repository: https://github.com/urdego/Urdego_Frontend/pull/211

image.png

✅ 성능이 낮음을 파악!

Lighthouse로 /myPage 페이지를 측정한 결과 초기 성능 점수는 52점으로 낮게 측정되었고, 주요 문제 항목은 다음과 같았다.

측정 항목 값 비고
성능 ❌ 52점 개선 전
Largest Contentful Paint (LCP) ❌ 54.8초 매우 심각
Total Blocking Time (TBT) ❌ 1,110ms 작업 지연 발생
First Contentful Paint (FCP) ✅ 0.6초 빠름
Cumulative Layout Shift (CLS) ✅ 0.002 안정적

📌 주요 병목 원인: 프로필 이미지가 늦게 로드되며, 최대 콘텐츠 페인트 시간이 늦게 측정되는 것

✒️ 개선 전략

❓왜 서버사이드 API 요청으로 전환했는가?

기존에는 클라이언트 사이드에서 useEffect로 다음과 같이 유저 정보를 요청하고 렌더링했다.

useEffect(() => {
  fetch('/api/userInfo') // 클라이언트에서 실행됨
}, [])

📌 해결을 위한 목표 설정

페이지가 처음 렌더링될 때 유저 데이터가 준비되어 있어야 LCP가 빨라질 것으로 예상 → “**서버사이드에서 API 요청 후 렌더링”**하는 구조로 변경해보는 것을 결정