Next.js 실전: 이미지 갤러리

핵심 개념

Next.js Image 컴포넌트로 최적화된 갤러리를 구현합니다. 그리드 레이아웃과 모달 확대 보기를 구현합니다.

코드 분석

NEXTJS📋 코드 (13줄)

<div style='font-family:monospace;padding:16px;background:#0d1117;color:#e8e8e8;'>
<div style='color:#10b981;margin-bottom:12px;font-size:9px;letter-spacing:0.2em;'>IMAGE GALLERY</div>
<div id='gallery' style='display:grid;grid-template-columns:repeat(3,1fr);gap:4px;'></div>
<script>
const colors=['#10b981','#f59e0b','#22c55e','#3b82f6','#8b5cf6','#ec4899'];
const el=document.getElementById('gallery');
if(el)el.innerHTML=colors.map((c,i)=>`
<div style='aspect-ratio:1;background:${c}22;border:1px solid ${c}44;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:monospace;font-size:10px;color:${c};' onclick='this.style.gridColumn=this.style.gridColumn?"":"1/-1"'>
UNIT-${String(i+1).padStart(3,"0")}
</div>`).join('');
</script>
<div style='margin-top:8px;font-size:10px;color:#555;'>클릭하면 확대됩니다</div>
</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Next.js 'Next.js 실전: 이미지 갤러리' 코드에서
서버/클라이언트 경계·use client 누락·캐시 무효화 버그를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'Next.js 실전: 이미지 갤러리'를 활용한 실전 페이지를
App Router + TypeScript + Server Actions로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Next.js 'Next.js 실전: 이미지 갤러리' 사용 패턴이
빌드 크기와 LCP/INP/CLS에 미치는 영향을
분석하고 최적화 방안을 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Next.js 'Next.js 실전: 이미지 갤러리' vs Remix/Astro/SvelteKit의
동일 기능 구현을 2026년 기준으로
솔직하게 비교해줘.

⭐ 이것만 기억하세요

Next.js 실전: 이미지 갤러리는 이 3가지만 확실히 잡으세요

1.이미지를 원본 크기로 나열하면 페이지 용량이 수십 MB가 되고, 레이아웃 시프트로 화면이 덜컥거립니다

2.next/image + Blur placeholder + Grid 레이아웃으로 점진적 로딩 + 반응형 갤러리를 구현합니다

3.다음 챕터에서 사이드바·헤더·메인 콘텐츠를 조합한 대시보드 레이아웃을 만듭니다

💬 이 챕터 질문 보기

NEXTJS · CH.24 — 질문하거나 답변을 확인하세요

→

진행도 24 / 34

← 커리큘럼으로 ← 목록으로 (Next.js)