0Pricing
Vibe Coding · 강의

보안 정보와 키 처리

API 키를 프롬프트에 넣지 말고 안전하게 보관합니다.

보안 정보와 키 처리은(는) CoddyKit의 무료 Vibe Coding 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vibe Coding 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Some Things Must Stay Secret

Many services give you an API key — a secret password that proves your app is allowed to use them. Payment tools, AI models, and email services all use keys.

If a key leaks, strangers can run up your bill or abuse your account. So a core vibe-coding habit is knowing how to keep secrets out of the wrong places — including out of your prompts.

What a Key Looks Like

An API key is usually a long random string. You include it with requests so the service knows it's you.

The danger: it's just text, so it's easy to accidentally paste it somewhere public. Treat a key like a house key — you wouldn't tape it to your front door.

sk_live_8f2a91c4d7e0b36a55f1c9a...
(a real key is long, random, and SECRET)

The Golden Rule: Never Hardcode Keys

The most common mistake is pasting a key directly into your code. AI sometimes does this too. If that code goes public (like on GitHub), your key is exposed to the world within minutes.

Instead, keys live in a separate, private place. Tell AI explicitly to never put the key in the code itself.

Never put my API key directly in the code. Read it
from an environment variable instead, and add the
key name to a .env file that is ignored by git.

Environment Variables

The standard safe home for secrets is an environment variable — a value stored outside your code that the app reads at runtime. Your code refers to it by name, not by the actual secret.

This snippet shows how code reads a key by name rather than containing the secret itself.

// The code only references the NAME, not the secret
const apiKey = process.env.WEATHER_API_KEY;

if (!apiKey) {
  console.log('No key found — set it in .env');
} else {
  console.log('Key loaded safely (length:', apiKey.length, ')');
}

The .env File and .gitignore

Secrets go in a file usually named .env. Crucially, you add .env to your .gitignore so it's never uploaded or shared. The code reads from it; the file stays on your machine.

Whenever you set up keys, double-check the .env file is ignored. Ask AI to confirm it for you.

Show me my .gitignore and confirm that .env is
listed in it. If it isn't, add it so my secret keys
never get committed to git.

Don't Paste Secrets into Prompts

It's tempting to paste a real key into a chat with AI so it 'just works.' Don't. Your prompts may be logged, and the key could end up in shared history.

Instead, use a placeholder. Tell AI the variable name and let it write code that reads the real value from your .env locally.

Use an environment variable called
OPENAI_API_KEY for the key. I'll add the real
value to my .env file myself — just write the code
to read it from there.

Frontend Keys Are Visible

Here's a trap: any key in code that runs in the user's browser can be seen by anyone who looks. Browser code is never truly secret.

So secret keys (like payment or AI keys) must be used from a server or serverless function, not directly in the page. Ask AI to route sensitive calls through the backend.

This AI feature needs my secret key, but the call
is currently in the browser where users could see
it. Move the request to a serverless function so
the key stays on the server and is never exposed to
the frontend.

Setting Secrets on Hosting Platforms

When you deploy to hosts like Vercel, Netlify or Replit, you don't upload your .env file. Instead, each platform has a settings page where you add environment variables securely.

Your code reads them the same way — by name. The platform keeps the actual values safe.

I'm deploying this to Vercel. Tell me exactly which
environment variables I need to add in the Vercel
dashboard, and confirm the code reads each one by
name so deployment works.

What to Do If a Key Leaks

If a key ever ends up somewhere public, don't panic — rotate it. Go to the service's dashboard, delete the old key, and generate a new one. The leaked key instantly stops working.

Then update your .env and hosting settings with the new value. Treat leaked keys as compromised, always.

A Simple Secrets Checklist

Make these habits automatic on every project:

  • Keys live in .env, never in code
  • .env is listed in .gitignore
  • Secret keys run on the server, not in the browser
  • Never paste real keys into AI prompts
  • On hosting, add keys in the dashboard, not the repo

Tell your AI tool to follow this checklist and it will set things up safely by default.

Limit What a Key Can Do

Many services let you restrict a key so a leak does less damage: cap its spending, limit it to certain domains, or give it read-only access.

Setting these limits is a smart safety net. When a service offers it, ask AI to walk you through adding usage caps and domain restrictions in the dashboard.

Walk me through adding a monthly spending limit and
a domain restriction to my API key in this
service's dashboard, so that even if the key leaks,
the damage is capped.

Quick Check

You're adding a paid AI feature that needs a secret key. Where should that key live so it stays safe?

Recap: Handling Secrets and Keys

You learned that API keys are secret passwords that must never be hardcoded or pasted into prompts. Safe keys live in environment variables via a .env file that's git-ignored, and secret keys run on the server, not in the browser.

You saw how to set secrets on hosts like Vercel, and how to rotate a leaked key. Follow the checklist and AI will set things up safely. You've now covered files, APIs, and data — the building blocks of real apps.

자주 묻는 질문

“보안 정보와 키 처리” 강의는 무료인가요?

네 — “보안 정보와 키 처리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vibe Coding 강의 전체를 잠금 해제할 수 있습니다. Vibe Coding 강의에는 총 4개의 강의가 포함되어 있습니다.

“보안 정보와 키 처리”에서 뭘 배우나요?

API 키를 프롬프트에 넣지 말고 안전하게 보관합니다. 브라우저에서 직접 실행하는 실습 코드로 Vibe Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vibe Coding을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vibe Coding은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“보안 정보와 키 처리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vibe Coding 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vibe Coding 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. API와 대화하기
  2. 파일 읽기와 저장
  3. 간단한 데이터 저장
  4. 보안 정보와 키 처리
← Vibe Coding(으)로 돌아가기