바이브 코딩 에러 10가지 총정리 — AI가 코드를 짜줘도 개발자가 꼭 알아야 할 것들

VIBE CODING GUIDE

바이브 코딩 중 자주 만나는
에러 10가지 총정리

AI가 코드를 짜줘도 개발자가 꼭 봐야 할 것들

요즘 개발을 하다 보면 ChatGPT, Claude, Cursor 같은 AI 도구와 함께 작업하는 경우가 많아졌습니다. 흔히 말하는 바이브 코딩입니다.

"이런 기능 만들어줘." "이 에러 고쳐줘." — AI가 꽤 그럴듯한 코드를 만들어줍니다. 문제는 여기서 시작됩니다.

⚡ 실제로 자주 마주치는 에러들

Module not found Cannot read properties of undefined Hydration failed CORS error Environment variable is undefined

20년 차 개발자로서 솔직히 말하면, 이런 에러들은 AI가 있어도 없어도 늘 우리를 기다리고 있습니다. 오늘은 바이브 코딩 중 자주 만나는 에러 10가지를 원인과 해결책 중심으로 정리해보겠습니다.

📋 목차

1. Module not found 에러
2. Cannot read properties of undefined
3. Hydration failed 에러 (Next.js)
4. CORS 에러
5. Environment variable is undefined
6. 404 API Route 에러
7. TypeScript 타입 에러
8. Build failed 에러
9. Database connection 에러
10. AI가 고친 뒤 다른 기능이 깨지는 문제

01

Module not found 에러

AI가 생성한 코드를 실행하면 제일 먼저 만나는 에러입니다. 패키지가 설치되지 않았거나, AI가 실제로 존재하지 않는 경로를 상상해서 만들어낸 경우입니다. 특히 프로젝트 구조를 일부만 보여줬을 때 이런 상황이 자주 발생합니다.

Module not found: Can't resolve 'axios'
Cannot find module '@/components/Button'

💡 해결 방법

패키지 미설치라면 npm install axios 로 설치. 경로 문제라면 src/components/Button.tsx 파일이 실제 존재하는지 직접 확인해야 합니다.

🤖 AI 재요청 프롬프트

"현재 프로젝트 구조를 기준으로 import 경로를 다시 점검해줘. 존재하지 않는 파일을 임의로 만들지 말고, 실제 파일 구조에 맞게 수정해줘."

02

Cannot read properties of undefined

데이터가 API에서 아직 로딩되기 전인데 바로 접근하려 할 때 발생합니다. AI는 보통 데이터가 항상 있다고 가정하고 코드를 작성하는 경향이 있습니다.

// ❌ 위험한 코드
<div>{user.name}</div>

// ✅ 안전한 코드
<div>{user?.name}</div>

// ✅ 로딩 상태 분리
if (!user) return <div>로딩 중...</div>

🤖 AI 재요청 프롬프트

"데이터가 undefined 또는 null일 수 있는 부분을 모두 점검해서 안전하게 렌더링되도록 수정해줘. 로딩 상태와 빈 데이터 상태도 함께 처리해줘."

03

Hydration failed 에러 (Next.js)

Next.js 프로젝트에서 서버 렌더링 결과와 클라이언트 렌더링 결과가 다를 때 발생합니다. new Date()나 window.localStorage 같이 브라우저에서만 존재하는 값을 서버에서 접근하려 할 때 자주 생깁니다.

'use client'

import { useEffect, useState } from 'react'

export default function TimeBox() {
  const [time, setTime] = useState('')

  useEffect(() => {
    setTime(new Date().toLocaleString())
  }, [])

  return <div>{time}</div>
}

🤖 AI 재요청 프롬프트

"Next.js hydration 오류가 나지 않도록 수정해줘. 서버와 클라이언트 렌더링 결과가 달라질 수 있는 코드를 찾아서 useEffect 또는 클라이언트 컴포넌트로 분리해줘."

04

CORS 에러

프론트엔드에서 다른 도메인의 API를 직접 호출할 때 발생합니다. 중요한 점은 CORS는 프론트 코드만 고쳐서 해결되지 않습니다. 서버 설정이 필요하거나, Next.js API Route로 프록시 구조를 만들어야 합니다.

⚠️ 자주 하는 실수

AI에게 "CORS 에러 고쳐줘"라고 하면 프론트 코드를 이것저것 수정해주는데, 실제로 CORS는 서버 허용 설정이나 프록시 구조 변경이 핵심입니다.

// Next.js API Route 프록시 방식
export async function GET() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return Response.json(data)
}

🤖 AI 재요청 프롬프트

"프론트에서 직접 외부 API를 호출하지 말고, 서버 API Route를 통해 우회하는 구조로 바꿔줘. 보안 API 키는 서버에서만 사용하게 해줘."

05

Environment variable is undefined

로컬에서는 잘 되는데 배포하면 API 키가 undefined가 됩니다. Next.js에서는 브라우저에서 쓸 환경변수에 NEXT_PUBLIC_ 접두사가 필요하고, 보안 키는 절대 이 접두사를 붙이면 안 됩니다.

# 브라우저에서 접근 가능한 공개 값
NEXT_PUBLIC_API_URL=https://api.example.com

# 서버에서만 사용해야 하는 보안 키
OPENAI_API_KEY=secret-key-here

🤖 AI 재요청 프롬프트

"환경변수 사용 방식을 점검해줘. 브라우저에 노출되어도 되는 값과 서버 전용 값을 구분하고, NEXT_PUBLIC_ 접두사가 필요한지 판단해서 수정해줘."

06

404 API Route 에러

AI가 App Router와 Pages Router를 혼동해서 파일 위치를 잘못 만드는 경우입니다. 두 구조는 API Route 파일 위치와 export 방식이 완전히 다릅니다.

// App Router: app/api/users/route.ts
export async function GET() {
  return Response.json({ message: 'hello' })
}

// Pages Router: pages/api/users.ts
export default function handler(req, res) {
  res.status(200).json({ message: 'hello' })
}

🤖 AI 재요청 프롬프트

"이 프로젝트가 App Router인지 Pages Router인지 먼저 확인한 뒤, API Route 파일 위치와 export 방식을 올바르게 수정해줘."

07

TypeScript 타입 에러

AI가 API 응답 구조를 추측해서 타입을 만들었을 때 실제 응답과 맞지 않으면 빌드 단계에서 에러가 납니다. 특히 API 필드명이 user_id인데 코드에서 user.id로 접근하는 경우가 대표적입니다.

// 실제 API 응답 기준으로 타입 정의
type User = {
  user_id: number
  user_name: string
}

// 프론트에서 쓰기 편하게 변환
const user = {
  id: data.user_id,
  name: data.user_name
}

🤖 AI 재요청 프롬프트

"실제 API 응답 예시는 아래와 같아. 이 응답 구조를 기준으로 TypeScript 타입을 다시 정의하고, 프론트에서 사용하는 데이터 구조와 맞게 변환해줘. [JSON 붙여넣기]"

08

Build failed 에러

로컬 개발 서버는 타입 오류나 린트 오류를 느슨하게 넘기지만, 빌드 단계에서는 엄격하게 잡습니다. 바이브 코딩에서 AI가 빠르게 코드를 붙여넣다 보면 사용하지 않는 import, any 타입 남발, 서버/클라이언트 코드 혼용 등이 쌓입니다.

🔍 에러 읽는 순서가 중요합니다

에러가 20개 떠도 원인은 1개일 수 있습니다. 맨 아래 로그보다 맨 위 첫 번째 에러를 먼저 보는 게 핵심입니다.

🤖 AI 재요청 프롬프트

"아래 빌드 에러 로그를 보고, 가장 근본 원인부터 순서대로 해결해줘. 임시로 에러를 무시하는 방식이 아니라, 빌드가 안정적으로 통과하도록 수정해줘. [빌드 에러 로그 붙여넣기]"

09

Database connection 에러

DB 접속 정보가 잘못됐거나, Prisma migration이 적용되지 않았거나, 로컬과 배포 환경의 DB 설정이 다를 때 발생합니다. AI가 만들어준 Prisma 코드가 실제 스키마와 맞지 않는 경우도 흔합니다.

# 환경변수 형식 확인
DATABASE_URL="postgresql://user:password@host:5432/dbname"

# Prisma 명령어 순서
npx prisma generate
npx prisma migrate dev   # 로컬
npx prisma migrate deploy # 배포

🤖 AI 재요청 프롬프트

"DATABASE_URL 형식, Prisma 설정, migration 적용 여부를 기준으로 원인을 단계별로 점검해줘. 로컬 환경과 배포 환경에서 각각 확인할 항목을 나눠서 정리해줘."

10

AI가 고친 뒤 다른 기능이 깨지는 문제

바이브 코딩에서 가장 흔한 함정입니다. AI에게 "에러만 고쳐줘"라고 하면 에러를 없애는 데만 집중하고, 기존 기능 유지는 보장하지 않습니다. 20년 개발하면서도 이 패턴에 여러 번 당했습니다.

🚨 바이브 코딩 생존 필수: Git 커밋

큰 수정 전에는 반드시 커밋을 남겨두세요. 바이브 코딩할수록 Git은 선택이 아니라 생존 장비입니다.

git add .
git commit -m "before fixing login error"

🤖 AI 재요청 프롬프트

"아래 오류를 수정하되, 기존 기능은 절대 제거하지 말아줘. 수정 전후로 영향을 받는 기능을 먼저 설명하고, 최소 변경으로 해결해줘. 기존 UI, API 응답 구조, 상태 관리 방식은 유지해줘."

⚡ 에러 해결 핵심 원칙 — 바이브 코딩 버전

1

에러 메시지를 그대로 읽는다 — 번역하지 말고 원문 그대로

2

가장 위에 나온 첫 번째 에러부터 확인한다

3

최근 수정한 파일을 먼저 의심한다

4

AI에게 전체 로그와 관련 파일을 함께 제공한다

5

"최소 변경으로 수정해줘"라고 명확히 요청한다

6

수정 후 npm run build 로 반드시 검증한다

📋 거의 모든 에러에 쓸 수 있는 범용 프롬프트

아래 에러 로그를 분석해줘.

1. 에러의 직접 원인과 근본 원인을 구분해서 설명해줘.
2. 가장 먼저 수정해야 할 파일을 알려줘.
3. 기존 기능을 깨지 않는 최소 수정 방식으로 해결해줘.
4. 수정 후 확인해야 할 테스트 방법도 알려줘.
5. 임시방편이 아니라 운영 가능한 코드로 정리해줘.

[에러 로그 붙여넣기]

마무리

바이브 코딩은 분명히 개발 속도를 올려줍니다. 예전에는 하루 걸리던 화면을 몇 시간 안에 만들 수도 있고, 낯선 프레임워크도 빠르게 시작할 수 있습니다.

하지만 AI가 만들어준 코드는 항상 실행 가능한 코드가 아닙니다. 특히 프로젝트 구조, 환경변수, 라우팅, 인증, DB, 배포 환경이 얽히기 시작하면 결국 사람이 판단해야 합니다.

CoLife의 결론

"AI에게 코딩을 맡기되, 판단은 개발자가 해야 한다."

C

CoLife

20년 차 현직 개발자 · code & life 운영자

프로그래밍, AI 도구, 개발 문화에 대한 현장 감각을 블로그에 기록하고 있습니다. AI 시대에도 개발자의 판단력이 중요하다고 생각합니다.

💬

바이브 코딩하다 이 에러 만나본 적 있으신가요?

어떤 에러가 제일 괴로우셨는지, 해결한 팁이 있으시다면 댓글로 공유해 주세요!
저도 같이 배우겠습니다 🙏