환경변수 & 보안 — NEXT_PUBLIC_ 규칙과 시크릿 관리
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js에서 `NEXT_PUBLIC_` 접두사가 없는 환경변수를 클라이언트 컴포넌트에서 접근하면?
💡 `NEXT_PUBLIC_` 접두사가 없는 환경변수는 클라이언트 번들에 포함되지 않습니다. 클라이언트에서 접근하면 에러 없이 조용히 `undefined`를 반환합니다. 이 때문에 실수를 눈치채기 어려우므로 Zod 등으로 런타임 검증이 필요합니다.
Q2. 다음 중 절대로 `NEXT_PUBLIC_` 접두사를 붙여서는 안 되는 환경변수는?
💡 `NEXT_PUBLIC_`로 시작하는 변수는 클라이언트 번들에 포함되어 누구나 브라우저 개발자 도구에서 볼 수 있습니다. 데이터베이스 비밀번호, JWT 시크릿, API 시크릿 키 등 민감한 값에는 절대 사용하면 안 됩니다.
Q3. `.env.local` 파일과 `.env` 파일 모두에 같은 변수가 정의되어 있을 때 어떤 값이 사용되는가?
💡 `.env.local` 파일은 로컬 개발자 오버라이드용으로 `.env`보다 우선순위가 높습니다. 우선순위: `.env.{environment}.local` > `.env.{environment}` > `.env.local` > `.env` 순입니다.
Q4. 환경변수를 동적 키로 접근(`process.env[variableName]`)할 때 발생하는 문제는?
💡 Next.js(Webpack)는 빌드 시 `process.env.NEXT_PUBLIC_XXX`를 리터럴 값으로 대체합니다. 동적 키(`process.env[key]`)를 사용하면 이 정적 대체가 이루어지지 않아 클라이언트 번들에서 `undefined`가 됩니다.
Q5. 팀 프로젝트에서 환경변수를 관리하는 모범 사례는?
💡 `.env.example`은 어떤 변수가 필요한지 문서화하지만 실제 시크릿 값은 포함하지 않습니다. 실제 값은 Vercel, AWS Secrets Manager 등 클라우드 시크릿 관리자나 암호화된 채널(1Password 팀 등)로 공유합니다. `.env.local`은 반드시 `.gitignore`에 포함하세요.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.