next/image — 이미지 자동 최적화, WebP 변환, lazy loading
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. next/image에서 `priority` 속성을 사용해야 하는 상황은?
💡 priority는 이미지를 미리 로드(preload)하도록 지시합니다. 페이지 로드 시 바로 보이는 히어로 이미지 등 LCP에 영향을 미치는 이미지에 사용해야 합니다. 모든 이미지에 사용하면 오히려 성능이 저하됩니다.
Q2. fill 속성을 사용할 때 부모 요소에 반드시 필요한 CSS 속성은?
💡 fill 레이아웃의 Image는 position: absolute로 렌더링됩니다. 이를 제대로 제어하려면 부모 요소에 position: relative, absolute, 또는 fixed가 있어야 합니다.
Q3. 외부 이미지 도메인을 허용하기 위해 설정하는 파일과 속성은?
💡 Next.js 13부터 images.domains는 deprecated되고 images.remotePatterns를 사용합니다. protocol, hostname, pathname을 세밀하게 제어할 수 있으며 와일드카드도 지원합니다.
Q4. `sizes` 속성의 역할로 올바른 것은?
💡 sizes는 미디어 쿼리별 이미지 렌더링 크기를 브라우저에 알려줍니다. 브라우저는 이 정보를 바탕으로 srcset에서 최적의 이미지를 선택합니다. fill 사용 시 sizes를 생략하면 100vw로 가정하여 불필요하게 큰 이미지를 로드합니다.
Q5. 로컬 이미지를 import할 때 자동으로 제공되는 이점이 아닌 것은?
💡 로컬 이미지를 import하면 Next.js가 빌드 타임에 크기를 자동 감지하고, blur placeholder용 데이터도 자동 생성합니다. 하지만 외부 CDN 자동 업로드는 지원하지 않습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.