디버깅 (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)이 메시지에서 읽어야 할 핵심은 세 가지입니다.
- 에러 종류:
TypeError- 데이터 타입이 맞지 않는 문제입니다. - 에러 내용:
Cannot read properties of undefined- undefined인 값에서 뭔가를 읽으려 했습니다. - 에러 위치:
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를 실행한 터미널 창을 항상 확인하세요.
📝 흔한 에러 유형과 해결법
| 에러 유형 | 의미 | 흔한 원인 |
|---|---|---|
| SyntaxError | 문법 오류 | 괄호, 쉼표, 따옴표 누락 |
| TypeError | 타입 불일치 | undefined 값에 접근 |
| ReferenceError | 존재하지 않는 변수 | 오타, import 누락 |
| NetworkError | 네트워크 문제 | API URL 오류, 서버 미응답 |
| CORS Error | 교차 출처 차단 | 다른 도메인의 API 호출 시 |
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초 요약
-
디버깅은 코드의 오류를 찾아 수정하는 과정입니다. 에러 메시지에서 에러 종류, 내용, 위치를 읽는 습관을 들이세요.
-
console.log로 코드 실행 흐름을 추적하고, 브라우저 DevTools의 Network 탭으로 API 문제를 확인하세요. 서버 에러는 터미널에서 확인합니다.
-
AI에게 에러 메시지 전문, 해당 코드, 발생 상황을 함께 전달하면 디버깅 속도가 훨씬 빨라집니다. "에러 났어 고쳐줘"보다 구체적인 맥락이 핵심입니다.
바이브코딩으로 만든 앱에서 에러가 발생했을 때, AI에게 가장 효과적으로 도움을 요청하는 방법은?
연관 개념
터미널과 CLI (Terminal & CLI)
컴퓨터에게 텍스트 명령어를 입력해서 작업을 수행하는 도구입니다. AI 코딩 도구가 '이 명령어를 실행하세요'라고 할 때 사용하는 바로 그 검은 화면입니다.
환경 변수와 .env (Environment Variables)
프로그램이 실행될 때 참조하는 설정값으로, API 키나 비밀번호 같은 민감한 정보를 코드와 분리하여 안전하게 관리하는 방법입니다.
Git과 버전 관리 (Version Control)
파일의 변경 이력을 기록하고 관리하는 시스템입니다. AI가 코드를 대량으로 수정해도, 이전 상태로 되돌리거나 변경 내역을 추적할 수 있게 해줍니다.
관련 인사이트
바이브코딩 vs AI 에이전트 다른점 알아보기
바이브코딩과 AI 에이전트(Claude Code 등)를 모두 실무에 사용해 본 경험을 바탕으로, 둘의 작업 방식·코드 이해 수준·적합한 상황이 어떻게 다른지 비유와 비교표로 정리했습니다.
초보자를 위한 OAuth 2.0 이해하기
바이브코딩과 AI 에이전트로 빠르게 서비스를 만들 수 있는 시대입니다. 하지만 인증 구조를 이해하지 못하면 비밀번호가 코드에 그대로 노출되는 사고가 일어납니다. 인증의 기본 개념부터 OAuth 2.0까지, 비개발자도 이해할 수 있도록 정리했습니다.
Claude Code 커뮤니티에서 찾은 커스텀 Skill 세 가지 패턴
Claude Code의 핵심은 코드 생성이 아니라 Skill 시스템입니다. TDD 강제, 팀 맞춤 코드 리뷰, 실행 가능한 런북까지 — 전 세계 커뮤니티에서 실제로 쓰이는 3가지 커스텀 Skill 패턴을 정리했습니다.
