10장: 에러와 친해지기 — AI와 함께 디버깅하기
에러가 나면 어떻게 하나
기능을 만들다 보면 반드시 에러를 만납니다. 화면이 하얗게 뜨거나, 버튼을 눌러도 아무 일이 안 일어나거나, 빨간 글씨가 나타납니다.
당황하지 마세요. 에러는 정상입니다. 전문 개발자도 에러를 매일 만납니다. 바이브코딩에서 에러 대처 방법은 단순합니다. AI에게 보여주면 됩니다.
에러 메시지가 보일 때
브라우저 화면에 빨간 에러 메시지가 보이거나, 터미널에 에러가 나오면 그대로 복사해서 Claude Code에게 붙여넣습니다.
이런 에러가 나. 고쳐줘.
TypeError: Cannot read properties of undefined (reading 'map')
at Dashboard (src/components/Dashboard.tsx:24:18)
에러 메시지를 이해할 필요 없습니다. AI가 읽고 원인을 파악합니다.
화면은 정상인데 뭔가 안 될 때
화면에 에러가 보이지 않더라도 브라우저 내부에 에러가 기록되어 있을 수 있습니다. 이걸 보려면 브라우저 개발자 도구를 엽니다.
- macOS Chrome:
Cmd + Option + J - Windows Chrome:
F12→ 상단 탭에서 "Console" 클릭
빨간 글씨로 에러가 보이면 복사해서 Claude Code에 붙여넣습니다.
API 호출 문제(데이터가 저장이 안 되거나 불러와지지 않을 때)는 "Network" 탭이 유용합니다. 빨간색으로 표시된 요청을 클릭하면 어떤 API가 어떤 이유로 실패했는지 보입니다. 이 내용도 그대로 캡처하거나 복사해서 AI에게 주면 됩니다.
증상만 있을 때
에러 메시지가 전혀 없는데 뭔가 안 된다면 증상을 최대한 구체적으로 설명합니다.
일감 등록 버튼을 클릭하면 아무 반응이 없어.
화면에 에러도 안 뜨고, 브라우저 콘솔에도 아무것도 없어.
Supabase 대시보드를 확인해보니 데이터가 저장되지 않았어.
언제, 어디서, 무엇을 했을 때, 어떤 일이 일어났는지(또는 안 일어났는지)를 말합니다. 정보가 많을수록 AI가 빠르게 원인을 찾습니다.
자주 만나는 에러 패턴 5가지
1. 화면이 하얗게 뜸
코드에 문법 오류가 있을 때 자주 발생합니다. React에서는 컴포넌트 하나에 오류가 생기면 전체 페이지가 흰 화면이 되는 경우가 있습니다.
이런 에러가 나. 고쳐줘.
SyntaxError: Unexpected token, expected "," (12:8)
또는 에러 메시지가 없다면:
화면이 하얗게 떠. 브라우저 콘솔 에러를 확인하고 고쳐줘.
2. Module not found
필요한 라이브러리가 설치되지 않았을 때 나옵니다.
Error: Cannot find module 'react-datepicker'
Require stack: ...
에러 메시지를 그대로 주면 AI가 빠진 라이브러리를 설치해줍니다.
3. 환경변수가 없음
.env 파일 설정이 빠졌거나 변수 이름이 틀렸을 때 나옵니다.
Error: supabaseUrl is required.
TypeError: Cannot read properties of undefined (reading 'from')
이런 에러가 나오면 대부분 Supabase 연결 설정 문제입니다.
Supabase 연결 에러가 나. .env 파일과 Supabase 초기화 코드를 확인해줘.
[에러 메시지]
4. 로그인/인증 문제
회원가입은 됐는데 로그인이 안 되거나, 로그인 후 화면이 이상하게 동작할 때입니다.
로그인 버튼을 클릭하면 아무 반응이 없어.
Supabase 대시보드 Authentication에서 사용자는 확인했어.
브라우저 콘솔에 이 에러가 나와.
[에러 메시지]
5. 스타일이 깨짐
기능은 동작하는데 화면이 이상하게 보이는 경우입니다. 스크린샷을 찍어서 붙여넣는 게 가장 효과적입니다.
[스크린샷 첨부]
모바일에서 보면 메뉴가 화면 밖으로 삐져나와. 고쳐줘.
[스크린샷 첨부]
카드가 세로로 늘어나야 하는데 가로로 쌓이고 있어.
AI가 같은 실수를 반복할 때
같은 에러를 고쳤다고 하는데 계속 반복되는 경우가 있습니다. 이때는 순서대로 시도합니다.
첫 번째, 다른 방법을 요청합니다.
같은 에러가 계속 나. 지금 방식 말고 완전히 다른 방법으로 접근해봐.
두 번째, 문제 있는 부분을 처음부터 다시 만들라고 합니다.
이 컴포넌트를 수정하지 말고 처음부터 새로 만들어줘.
세 번째, /rewind로 되돌립니다. AI가 수정하기 전 상태로 돌아간 뒤, 다른 접근을 시도할 수 있습니다. Esc를 두 번 눌러도 됩니다.
네 번째, 대화를 새로 시작합니다. /clear를 입력합니다. 대화가 길어지면 AI가 이전 맥락에 갇혀 같은 접근을 반복하는 경우가 있습니다. 새 대화에서는 문제를 더 명확하게 설명하면서 다시 시도합니다.
두 번 이상 같은 문제를 수정했는데도 안 된다면, /clear 후 새로 시작하는 게 대부분 빠릅니다.
할루시네이션 감지하기
AI가 "고쳤습니다"라고 했는데 실제로는 안 되는 경우가 있습니다. 존재하지 않는 함수를 쓰거나, 잘못된 API 사용법을 알려주는 경우입니다.
감지 방법은 단순합니다. 직접 실행해보면 됩니다.
AI가 수정했다고 하면 반드시 브라우저에서 확인합니다. 버튼을 클릭하고, 데이터를 입력하고, Supabase 대시보드에서 실제로 저장됐는지 봅니다. 동작하면 맞는 거고, 안 되면 틀린 겁니다.
AI의 말을 의심하라는 뜻이 아닙니다. 대부분은 맞습니다. 다만 "AI가 됐다고 했으니 됐겠지"라고 확인 없이 넘어가지 마세요. 이 습관 하나가 나중에 발견하기 어려운 버그를 미리 막아줍니다.
✏️ 실습: 일부러 에러를 만들고 AI에게 고치게 시켜보기
에러에 익숙해지는 가장 좋은 방법은 직접 만들어보는 겁니다.
1단계: 8장에서 만든 프로젝트에서 Claude Code를 실행합니다.
2단계: AI에게 일부러 에러를 만들라고 합니다.
이 프로젝트에서 일부러 에러가 나도록 코드를 하나 수정해줘.
어떤 파일의 어떤 부분을 바꿨는지는 알려줘.
에러의 원인은 알려주지 마.
3단계: 브라우저를 열고 에러를 확인합니다. 화면에 에러가 보이면 복사합니다. 안 보이면 개발자 도구(Cmd+Option+J 또는 F12)를 열어서 Console 탭을 확인합니다.
4단계: /clear로 대화를 초기화합니다.
5단계: 에러 메시지만 가지고 원인을 찾아달라고 합니다.
이런 에러가 나. 원인을 찾아서 고쳐줘.
[에러 메시지 붙여넣기]
AI가 에러를 분석하고 수정하는 과정을 지켜보세요. 에러 메시지를 보고 어느 파일 몇 번째 줄에 문제가 있는지 찾아내는 걸 보면, 에러가 생각보다 무섭지 않다는 걸 느낄 수 있습니다.
참고자료