오늘 방문 /누적 방문 /완성한 레슨 소개 ↗
SECONDTEAM
데이터·DB
🗄️ 레슨

환경변수·보안 — 비밀은 분리해서

① 오늘의 미션
결제 키가 코드에 박혀 있어요
'우리동네 반찬가게'에 결제 기능을 붙였어요. 그런데 결제 회사가 준 비밀 키(sk-live-...)가 코드에 그대로 적혀 있죠. 지난 레슨에서 우린 이 코드를 GitHub에 올렸어요. 큰일이에요!

오늘은 결제 키·DB 비밀번호 같은 비밀값을 코드와 분리하는 법 — 환경변수(.env)를 손으로 익혀요. 오른쪽 터미널에 직접 쳐보며 안전하게 만들어요.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇
~/my-shop
$ _
📚 「환경변수·보안 — 비밀은 분리해서」 레슨 내용 전체 텍스트로 훑어보기
결제 키가 코드에 박혀 있어요
'우리동네 반찬가게'에 결제 기능을 붙였어요. 그런데 결제 회사가 준 비밀 키(sk-live-...)가 코드에 그대로 적혀 있죠. 지난 레슨에서 우린 이 코드를 GitHub에 올렸어요. 큰일이에요!

오늘은 결제 키·DB 비밀번호 같은 비밀값을 코드와 분리하는 법 — 환경변수(.env)를 손으로 익혀요. 오른쪽 터미널에 직접 쳐보며 안전하게 만들어요.

그 코드를 GitHub에 올린다고 상상해 보세요.
맞아요. 코드에 직접 적은 비밀값은 코드와 함께 새어나가요. 결제 키가 유출되면 남이 내 가게 명의로 결제를 만질 수도 있죠. 그래서 비밀은 코드와 분리해야 해요. 그 방법이 환경변수예요. 👇
우리동네 반찬가게 결제 키를 예로 두 방식을 나란히 보세요.
🚨 코드에 직접: payKey = "sk-live-결제비밀"을 코드에 그대로.
코드 공유·업로드 순간 모두에게 노출돼요.
🔐 .env로 분리: 결제 키를 .env 파일에 따로 적고, 코드는 그 '이름표'(PAYMENT_KEY)만 불러요. .env.gitignore에 넣어 업로드 자체를 막죠.

.env라는 새 파일을 만들고 거기에 결제 키를 적으려 해요.
이 파일은 어떤 역할일까요?

맞아요. .env는 결제 키·DB 비밀번호 같은 비밀값을 코드 밖에 모아두는 금고예요. 코드는 'PAYMENT_KEY'라는 이름표로 값을 꺼내 쓰고, 진짜 값은 이 파일에만 있죠. 직접 만들어볼까요? 👇

가게 폴더에 .env 금고 파일을 만들고, 결제 키를 적어요. >>는 '파일 끝에 한 줄 덧붙이기'예요.

echo "PAYMENT_KEY=sk-live-결제비밀" >> .env — 결제 키를 .env 파일에 따로 적어요 (코드엔 이름표만 남길 거예요)
금고가 생겼어요. 하지만 아직 안심은 일러요 — 이 .env가 GitHub에 같이 올라가면 분리한 의미가 없죠. 막아야 해요.

지난 git 레슨에서 봤죠? '이 파일은 git이 무시(ignore)해'라고 적어두는 목록 파일의 이름을 채워보세요.

맞아요! .gitignore에 적힌 파일은 git이 아예 추적하지 않아요. 여기에 .env를 넣으면, push해도 결제 키는 절대 안 올라가죠. 👇

.gitignore.env를 추가해, git이 이 금고를 못 보게 막아요.

echo ".env" >> .gitignore — .env가 실수로 올라가지 않게 .gitignore에 등록해요
이제 git의 눈에 .env는 '없는 셈'이에요. 정말 그런지 다음 단계에서 직접 확인해봐요.

가장 중요한 단계! git status.env가 추적 목록에서 빠졌는지 두 눈으로 확인해요. 보안은 늘 '확인'까지가 한 세트예요.

git status — .env가 git 추적에서 빠졌는지 확인해요
.gitignore는 보이는데 .env는 목록에 없죠? 결제 키가 git의 눈을 완전히 벗어났어요. 이제 push해도 안전해요.
값 자체가 아니라 '이름표'로 부른다고 했죠.
맞아요. 코드는 process.env.PAYMENT_KEY처럼 이름표로 값을 꺼내 써요. 진짜 비밀값은 .env에만 있고, 코드엔 이름만 남죠. 사람·환경이 바뀌어도 .env만 갈아 끼우면 돼요.

혹시 코드 어딘가에 키가 박혀 있을 수도 있죠. Claude에게 코드의 키를 .env로 옮겨달라고 말로 부탁해요. (실무에선 이렇게 합니다)

결제 코드에 박혀 있는 결제 키를 .env로 옮기고, 코드는 이름표로 부르게 바꿔줘 — 코드에 박힌 결제 키를 .env로 옮겨달라고 해요 (Claude와 대화)
코드엔 이름표만, 진짜 키는 금고(.env)에만. 이게 비밀값을 다루는 표준 모습이에요.

결제 키를 안전하게 분리하는 순서를 맞춰보세요. (↑↓로 정렬)

정확해요! 금고(.env)에 넣기 → .gitignore로 가리기 → 확인 → 이름표로 사용. 이 순서면 키가 코드·GitHub에 새지 않아요.
한 번 인터넷에 올라간 비밀은 어떻게 봐야 할까요?
맞아요. 한 번이라도 올라간 키는 이미 유출된 것으로 봐야 해요. 파일을 지워도 git 기록엔 남죠. 결제 회사 콘솔에서 그 키를 폐기하고 새로 발급받으세요. 배포 시엔 Vercel '환경변수' 칸에 따로 넣으면 코드에도, 손님에게도 안 보여요.
한 줄로
우리동네 반찬가게의 비밀값(결제 키·DB 비밀번호)은 코드에 적지 말고 .env분리, .gitignore업로드 차단, git status확인까지!
배포할 땐
.env는 올리지 않으니, 배포처(Vercel)엔 '환경변수' 설정칸에 키를 따로 넣어줘요. 그러면 실제 운영에서도 코드·손님 누구에게도 키가 안 보이죠.
다음 레슨에서
비밀값은 지켰으니, 이제 고객 데이터 차례예요. 다음은 인증·권한 — 내 데이터는 나만 (RLS) — 손님끼리 서로의 주문을 못 보게, 데이터 행 하나하나에 자물쇠를 겁니다. 🌱