Question 1

loading.tsx와 error.tsx의 동작 원리를 설명해주세요.

Accepted Answer

App Router의 파일 컨벤션으로 로딩/에러 UI를 선언적으로 처리합니다. **loading.tsx:** ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; } ``` - 내부적으로 React ``로 감싸짐 - 해당 세그먼트의 서버 컴포넌트가 로딩 중일 때 표시 - Streaming SSR과 결합되어 점진적 렌더링 - 중첩 라우트에서 각 세그먼트별 독립적 로딩 UI 가능 **error.tsx:** ```tsx // app/dashboard/error.tsx 'use client'; // 반드시 클라이언트 컴포넌트 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void; }) { retu

Question 2

Next.js Image 컴포넌트의 최적화 전략을 상세히 설명해주세요.

Accepted Answer

next/image는 이미지를 자동으로 최적화하여 성능을 크게 개선합니다. ```tsx import Image from 'next/image'; // 정적 이미지 (자동 크기 감지) import heroImg from './hero.jpg'; 히어로

// 원격 이미지

``` **자동 최적화 기능:** 1. **포맷 변환**: WebP/AVIF 자동 서빙 (브라우저 지원에 따라) 2. **리사이징**: 요청된 크기에 맞게 서버에서 리사이즈 3. **Lazy Loading**: 뷰포트 진입 시에만 로드 (기본) 4. **CLS 방지**: width/h

Next.js

11loading.tsx와 error.tsx의 동작 원리를 설명해주세요.보통App Router

12Next.js Image 컴포넌트의 최적화 전략을 상세히 설명해주세요.보통최적화