Vercel 배포 & 도메인 연결 — 프로덕션 운영 가이드
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Vercel에서 클라이언트 컴포넌트에서 접근 가능한 환경변수를 설정하려면 어떻게 해야 하나요?
💡 Next.js에서 환경변수는 기본적으로 서버에서만 접근 가능합니다. `NEXT_PUBLIC_` 접두사가 붙은 변수만 빌드 시 클라이언트 번들에 포함되어 브라우저에서 `process.env.NEXT_PUBLIC_xxx`로 접근할 수 있습니다. 민감한 정보는 절대 NEXT_PUBLIC_을 사용하면 안 됩니다.
Q2. Vercel의 Preview 배포(Preview Deployment)에 대한 올바른 설명은?
💡 Vercel은 모든 PR과 브랜치에 대해 자동으로 Preview 배포를 생성합니다. 각 Preview는 독립적인 URL(`https://project-git-branch-name.vercel.app`)을 가지며, 팀원들이 프로덕션 배포 전에 변경 사항을 확인할 수 있습니다. Preview 전용 환경변수도 별도로 설정 가능합니다.
Q3. vercel.json에서 `"regions": ["icn1"]` 설정의 의미는?
💡 Vercel의 리전 코드에서 `icn1`은 한국 서울(인천) 리전을 의미합니다. 서버리스 함수를 특정 리전에서 실행하면 해당 지역 사용자에게 더 낮은 레이턴시를 제공합니다. 한국 서비스라면 `icn1`을 지정하는 것이 좋습니다.
Q4. ISR(Incremental Static Regeneration)에서 `export const revalidate = 60`의 의미는?
💡 `revalidate = 60`은 Next.js의 ISR 설정으로, 60초가 지난 후 첫 번째 요청 시 백그라운드에서 페이지를 재생성합니다. 재생성 중에는 이전 캐시된 버전을 반환하여 사용자에게 항상 빠른 응답을 제공합니다 (Stale-While-Revalidate 패턴).
Q5. Vercel 배포 후 문제가 발생했을 때 빠르게 이전 버전으로 돌아가는 방법은?
💡 Vercel은 모든 배포 이력을 보존합니다. 문제 발생 시 대시보드의 Deployments 탭에서 이전 배포를 선택하고 "Promote to Production"을 클릭하면 코드 변경 없이 즉시 이전 버전으로 롤백됩니다. CLI로는 `vercel rollback`을 사용할 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.