디버깅

에러가 나면 안심하세요

에러 메시지는 컴퓨터가 "여기가 문제야"라고 알려주는 것입니다. 진짜 무서운 건 에러 없이 조용히 잘못 동작하는 버그입니다. 빨간 글씨가 나오면 절반은 해결된 겁니다.

바이브 코딩에서 디버깅은 여러분이 코드를 고치는 게 아닙니다. 문제를 정확히 관찰해서 AI에게 정확히 전달하는 것입니다.

에러는 세 곳에 나타납니다

장소	여는 법	어떤 에러
브라우저 콘솔	F12 → Console 탭	화면(프론트) 동작 에러
개발 서버 로그	Code 탭의 실행 결과(터미널이면 npm run dev 실행 중인 창)	서버 라우트, 빌드 에러
Vercel 로그	Vercel → 프로젝트 → Logs	배포된 서버의 에러

"뭔가 안 돼요"라고 느끼면 세 곳을 순서대로 봅니다. 대부분 첫 두 곳에 있습니다.

에러 메시지 읽는 법

TypeError: Cannot read properties of undefined (reading 'map')
    at MenuList (src/components/MenuList.tsx:12:20)

세 가지만 뽑으세요.

1. 무슨 일: Cannot read properties of undefined (reading 'map') → "없는 것(undefined)에 .map을 하려 했다"
2. 어디서: MenuList.tsx:12:20 → MenuList 파일 12번째 줄
3. 언제: 무엇을 클릭했을 때 / 어떤 화면을 열었을 때

이 셋을 뽑을 수 있으면 영어를 몰라도 됩니다. 뜻은 AI가 설명해줍니다.

AI에게 버그 보고하는 형식

"안 돼"는 정보가 0입니다. 이 형식으로 보내면 한 번에 고칠 확률이 크게 올라갑니다.

[증상] /menus 화면을 열면 하얗게 나옴
[기대] 저장한 메뉴 목록이 보여야 함
[재현] 로그인 → 메뉴 저장 → 헤더의 '내 메뉴' 클릭
[에러] (콘솔에서 복사)
TypeError: Cannot read properties of undefined (reading 'map')
    at MenuList (src/components/MenuList.tsx:12:20)
[최근 변경] 14강에서 user_id 필터를 추가한 뒤부터

(재현 = 같은 문제를 다시 일으켜 보는 방법을 적는 칸입니다.) [최근 변경]이 특히 강력합니다. "뭘 바꾼 뒤부터 안 되나"는 원인의 80%를 좁혀줍니다. Code 탭에 "최근 커밋 5개를 보여줘"라고 하면 기억이 납니다. (터미널이면 git log --oneline -5)

에러 없이 이상할 때

빨간 글씨 없이 "그냥 안 됨"이면 상태를 눈으로 보이게 만듭니다.

콘솔을 보면 data: null, error: {...} 처럼 실제 값이 보이고, 그 값을 AI에게 보내면 됩니다. 확인 후 "console.log 지워줘"를 잊지 마세요.

디버깅의 세 가지 규칙

1. 한 번에 하나만 바꾼다

AI가 "세 곳을 고쳤다"고 하면 어느 게 해결했는지 모릅니다. 안 되면 되돌리고 하나씩.

2. 세 번 실패하면 접근을 바꾼다

같은 요청을 말만 바꿔 반복하지 마세요. 대신:

• "지금까지 시도한 것을 정리하고, 원인이 될 수 있는 것을 3가지 나열해줘. 아직 고치지 마."
• 원인 후보를 하나씩 확인시킵니다.

3. 되돌리기는 실패가 아니다

"마지막 커밋 상태로 되돌려줘"(git checkout .)는 여러분의 가장 강력한 디버깅 도구입니다. 30분 헤맬 바엔 되돌리고 요청을 더 작게.

따라하기 1: 일부러 에러 내보기 (연습)

진짜 버그를 만나기 전에, 에러를 일부러 한 번 내봅니다. 에러 화면이 낯설지 않게 되고, 되돌리기 연습도 됩니다. 먼저 지금 상태를 커밋해 두세요.

따라하기 2: 버그 사냥

지금까지 "일단 넘어간" 것들을 적어봅니다. 예:

• 재료를 빠르게 두 번 추가하면 중복됨
• 추천 중에 다른 화면으로 가면 에러
• 로그아웃 후에도 헤더에 이메일이 남음
• 폰에서 버튼이 너무 작음

각각 위 형식으로 AI에게 보고하고 하나씩 잡습니다. 하나 잡을 때마다 커밋. 오늘 3개 목표.

오늘의 체크리스트

직접 해보고 눈으로 확인한 것만 체크하세요.

다음 강의

4부 시작. 16강 배포 — 진짜 도메인과 환경 정리로 "세상에 공개하기".