디버깅 (Debugging)

🤔 혹시 이런 경험 있나요?

AI가 만들어준 코드를 복사해서 붙여넣었는데 화면에 아무것도 나오지 않습니다. 또는 빨간 에러 메시지가 잔뜩 뜨는데 뭔 말인지 하나도 모르겠습니다. AI에게 "에러 났어 고쳐줘"라고 했더니 또 다른 에러가 생깁니다. 이런 상황에서 필요한 것이 바로 디버깅입니다.

🐛 디버깅이란?

디버깅(Debugging)은 코드에서 발생한 오류(버그, Bug)의 원인을 찾아내고 수정하는 과정입니다. "Bug"는 벌레라는 뜻인데, 1947년에 실제로 컴퓨터에 나방이 들어가서 오작동이 생긴 사건에서 유래했습니다.

바이브코딩에서는 AI가 코드를 작성하지만, 에러가 발생했을 때 문제의 원인을 이해하고 AI에게 정확한 맥락을 전달하는 것은 여러분의 역할입니다. 디버깅 기초를 알면 에러 해결 속도가 완전히 달라집니다.

🔴 에러 메시지 읽는 법

에러 메시지가 무섭게 보여도, 대부분 일정한 구조를 따릅니다.

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (src/components/UserList.tsx:15:23)
    at renderWithHooks (react-dom.development.js:14985:18)

이 메시지에서 읽어야 할 핵심은 세 가지입니다.

1. 에러 종류: TypeError - 데이터 타입이 맞지 않는 문제입니다.
2. 에러 내용: Cannot read properties of undefined - undefined인 값에서 뭔가를 읽으려 했습니다.
3. 에러 위치: UserList.tsx:15:23 - UserList 파일의 15번째 줄, 23번째 글자 근처입니다.

이 정보만 읽을 수 있어도 AI에게 "UserList.tsx 15번째 줄에서 undefined 에러가 나요"라고 정확하게 전달할 수 있습니다.

🔧 디버깅의 기본 도구들

1. console.log - 가장 간단한 디버깅

코드가 어디까지 실행되는지, 변수에 어떤 값이 들어 있는지 확인하는 가장 기본적인 방법입니다.

async function getUsers() {
  console.log('1. 함수 시작')           // 실행 확인
  const response = await fetch('/api/users')
  console.log('2. 응답:', response)     // 응답 확인
  const data = await response.json()
  console.log('3. 데이터:', data)       // 데이터 확인
  return data
}

이렇게 중간중간 console.log를 넣으면, 어디에서 문제가 발생하는지 정확히 파악할 수 있습니다. 만약 "1. 함수 시작"은 출력되는데 "2. 응답"이 출력되지 않는다면, fetch 요청에서 문제가 생긴 것입니다.

2. 브라우저 개발자 도구 (DevTools)

크롬에서 F12 키를 누르면 개발자 도구가 열립니다.

• Console 탭: console.log의 출력과 에러 메시지를 확인합니다.
• Network 탭: API 요청이 성공했는지, 어떤 데이터가 오갔는지 확인합니다.
• Elements 탭: HTML 구조가 올바른지 확인합니다.

특히 Network 탭은 API 관련 문제를 해결할 때 매우 유용합니다. 요청이 404(주소 오류)인지, 401(인증 실패)인지, 500(서버 오류)인지 한눈에 볼 수 있습니다.

3. 터미널 로그

서버 사이드 코드(API 라우트, 서버 함수 등)의 에러는 브라우저가 아니라 터미널에 출력됩니다. npm run dev를 실행한 터미널 창을 항상 확인하세요.

📝 흔한 에러 유형과 해결법

CORS Error는 바이브코딩에서 특히 자주 만납니다. 프론트엔드에서 다른 도메인의 API를 직접 호출하면 브라우저가 보안상 차단하는데, 이때는 서버를 경유하거나 API 서버에서 CORS 설정을 추가해야 합니다.

💡 AI에게 디버깅을 잘 맡기는 방법

AI에게 단순히 "에러 났어"라고 하면 정확한 답을 얻기 어렵습니다. 다음 정보를 함께 전달하면 훨씬 빠르게 해결됩니다.

1. 에러 메시지 전문 (복사해서 전달)
2. 에러가 발생한 파일과 코드
3. 어떤 상황에서 에러가 나는지 (언제, 어떤 버튼 클릭 시 등)
4. 이미 시도한 해결 방법
5. 최근에 변경한 코드가 있다면 그 내용

예를 들어 "로그인 버튼을 누르면 TypeError: Cannot read properties of undefined (reading 'email')이 뜹니다. LoginForm.tsx 23번째 줄이 문제 같습니다"라고 전달하면, AI가 정확한 수정안을 제시할 수 있습니다.

📋 30초 요약

1. 디버깅은 코드의 오류를 찾아 수정하는 과정입니다. 에러 메시지에서 에러 종류, 내용, 위치를 읽는 습관을 들이세요.

2. console.log로 코드 실행 흐름을 추적하고, 브라우저 DevTools의 Network 탭으로 API 문제를 확인하세요. 서버 에러는 터미널에서 확인합니다.

3. AI에게 에러 메시지 전문, 해당 코드, 발생 상황을 함께 전달하면 디버깅 속도가 훨씬 빨라집니다. "에러 났어 고쳐줘"보다 구체적인 맥락이 핵심입니다.