성능 최적화 — Bundle 분석, Dynamic Import, 코드 스플리팅
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. next/dynamic의 `ssr: false` 옵션을 사용해야 하는 상황은?
💡 서버에는 window, document, localStorage 같은 브라우저 API가 없습니다. 이러한 API를 사용하는 컴포넌트(차트 라이브러리, 지도 API 등)는 `ssr: false`로 클라이언트에서만 렌더링해야 합니다.
Q2. @next/bundle-analyzer를 실행하는 올바른 방법은?
💡 번들 분석기는 환경 변수 ANALYZE=true와 함께 빌드를 실행하면 활성화됩니다. 결과로 .next/analyze/ 폴더에 인터랙티브 트리맵이 생성됩니다.
Q3. Suspense를 사용하는 주요 이점은?
💡 Suspense 스트리밍은 각 비동기 컴포넌트가 독립적으로 렌더링됩니다. 3초 걸리는 컴포넌트가 있어도 100ms 컴포넌트는 즉시 화면에 표시됩니다.
Q4. loading.tsx 파일의 역할은?
💡 app 디렉토리의 loading.tsx는 해당 폴더의 page.tsx가 렌더링되는 동안 자동으로 Suspense 폴백으로 표시됩니다. 페이지 네비게이션 시 즉시 스켈레톤 UI를 보여줍니다.
Q5. 서버 컴포넌트(RSC)를 사용하는 주된 성능 이점은?
💡 서버 컴포넌트는 서버에서만 실행되며, 컴포넌트 코드 자체가 클라이언트로 전송되지 않습니다. 따라서 대규모 서버 컴포넌트 트리는 클라이언트 번들 크기를 크게 줄여 초기 로딩 성능을 향상시킵니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.