Next.js 고급 기능
이미지 최적화, 폰트 최적화, 스크립트 최적화, analytics, edge runtime, 실험적 기능
1표준 img 태그와 비교했을 때 next/image를 사용하는 주요 이점은 무엇인가요?
표준 img 태그와 비교했을 때 next/image를 사용하는 주요 이점은 무엇인가요?
답변
next/image는 여러 크기와 최신 형식(WebP, AVIF)을 생성하여 이미지를 자동으로 최적화하고, 기본적으로 lazy loading을 적용하며, 자동 크기 계산을 통해 Cumulative Layout Shift를 방지하여 Web Vitals를 개선합니다. 원본 이미지를 로드하는 표준 img 태그와 달리, next/image는 viewport와 기기 픽셀 비율에 따라 최적의 크기를 제공합니다. 이 접근 방식은 로딩 시간과 대역폭 소비를 크게 줄입니다.
2next/image 컴포넌트에서 priority 속성을 언제 사용해야 하나요?
next/image 컴포넌트에서 priority 속성을 언제 사용해야 하나요?
답변
priority 속성은 lazy loading을 비활성화하고 이미지를 즉시 프리로드합니다. 이는 Largest Contentful Paint(LCP)에 영향을 미치는 above-the-fold 이미지에 중요합니다. priority 없이는 이러한 중요한 이미지들이 lazy 로드되어 LCP가 지연되고 Core Web Vitals가 저하됩니다. 페이지 초기 로드 시 표시되는 1-2개의 이미지(보통 히어로 이미지나 메인 배너)에만 priority를 사용하세요.
3외부 도메인에서 이미지를 제공하기 위한 next/image 설정은 무엇인가요?
외부 도메인에서 이미지를 제공하기 위한 next/image 설정은 무엇인가요?
답변
next.config.js의 remotePatterns 속성을 통해 프로토콜, 호스트명, 포트, 경로명에 대한 세밀한 제어로 이미지를 제공하기 위해 승인된 외부 도메인을 정의할 수 있습니다. 이 접근 방식은 deprecated된 domains 속성을 대체하고 승인된 소스를 정확하게 제한하여 보안을 강화합니다. remotePatterns를 설정하면 Cloudinary나 AWS S3 같은 CDN 또는 서드파티 서비스에 호스팅된 이미지 로드 시 400 오류를 방지합니다.
next/image 사이징에서 fill과 responsive의 차이점은 무엇인가요?
next/image로 로컬에서 가져온 정적 이미지를 최적화하는 방법은?
+21 면접 질문