AI와 함께 디버깅

동작하는 코드

먼저 의도적으로 버그가 있는 코드를 만들어봅시다:

> bug-demo.js 파일을 만들어줘:
> const users = [{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }];
> console.log(users.find(u => u.name === "Charlie").age);

이제 이 코드를 실행해보세요:

> node bug-demo.js를 실행해줘

TypeError: Cannot read properties of undefined 에러가 발생합니다. Claude는 에러를 보고 바로 원인을 분석합니다:

> 이 에러를 수정해줘

Claude가 find의 결과가 undefined일 수 있다는 점을 파악하고, 옵셔널 체이닝이나 null 체크를 적용합니다.

직접 수정하기

더 현실적인 시나리오로 해봅시다. 실제 프로젝트에서 에러가 발생했다고 가정합니다:

> npm run build를 실행해줘

빌드 에러가 나면 Claude가 에러 로그를 읽고 원인을 분석합니다. 에러가 없는 프로젝트라면 직접 에러를 만들어보세요:

> server.js에서 import 경로를 일부러 틀리게 바꿔줘. 그다음 실행해서 에러를 보자.

에러를 확인한 뒤:

> 이 에러를 수정해줘

"왜?" — Claude Code가 디버깅에 강한 이유

Claude Code는 에러 메시지만 보는 게 아닙니다. 프로젝트 전체 맥락을 알고 있기 때문에:

1. 에러가 발생한 파일뿐만 아니라 관련 파일도 확인합니다.
2. import 관계를 추적해서 근본 원인을 찾습니다.
3. 설정 파일(tsconfig, package.json 등)과의 불일치도 감지합니다.

효과적인 디버깅 요청 패턴

> npm test를 실행하고 실패하는 테스트를 수정해줘

> 이 에러 로그를 분석해줘: [에러 메시지 붙여넣기]

> users API에서 500 에러가 나는데 원인을 찾아줘

> 이 함수에 console.log를 추가해서 데이터 흐름을 추적해줘

디버깅 워크플로우

에러 발생 → Claude에게 실행 요청 → 에러 자동 분석 → 수정 제안 → 승인 → 재실행으로 확인

복잡한 버그의 경우 한 번에 해결되지 않을 수 있습니다. 그때는 단계적으로 접근하세요:

> 이 에러의 원인을 분석해줘. 수정은 아직 하지 마.

원인을 이해한 뒤에:

> 알겠어, 그러면 ~방식으로 수정해줘

심화 학습