AI와 함께 디버깅

코드를 짜면 에러는 반드시 납니다. 중요한 건 에러를 안 내는 게 아니라 빠르게 고치는 능력입니다. AI 도구는 강력한 디버깅 파트너지만, "안 돼요"라고만 던지면 AI도 추측밖에 못 합니다. 이번 챕터에서는 에러를 읽는 법, 문제를 재현하는 법, 그리고 AI에게서 정확한 답을 끌어내는 질문법을 익힙니다.

에러 메시지부터 끝까지 읽기

초보자가 가장 많이 하는 행동은 에러가 뜨자마자 메시지를 닫고 코드를 마구 바꾸는 것입니다. 에러 메시지에는 해결의 절반이 이미 들어 있습니다. 세 가지를 봅니다.

• 에러 종류 — 예: TypeError, SyntaxError처럼 무슨 부류의 문제인지 알려줍니다.
• 설명 문장 — 예: "Cannot read properties of undefined"처럼 무엇이 잘못됐는지 말합니다.
• 위치(스택) — 파일명과 줄 번호입니다. 보통 맨 위가 직접 원인에 가장 가깝습니다.

TypeError: Cannot read properties of undefined (reading 'name')
    at showUser (app.js:42)
    at app.js:58

재현이 먼저, 수정은 그 다음

고치기 전에 "어떤 조건에서 항상 똑같이 발생하는가"를 찾아야 합니다. 재현 절차를 모르면 고쳐도 진짜 고쳐졌는지 확인할 수 없습니다.

1. 문제가 나는 최소한의 단계를 적습니다(이 버튼을 누르면, 빈 칸으로 제출하면 등).
2. 변수 값을 console.log로 찍어 "내 예상과 실제가 어디서 갈라지는지" 확인합니다.
3. 문제를 일으키는 가장 작은 코드 조각으로 줄여 봅니다(불필요한 부분 제거).

function showUser(user) {
  console.log('받은 값:', user); // 여기서 user가 undefined인지 확인
  return user.name;
}

AI에게 잘 묻는 법

AI는 맥락을 주는 만큼 정확해집니다. "안 돼요"와 아래의 차이를 비교해 보세요.

나쁜 질문: "코드가 안 돼요. 고쳐줘."
좋은 질문: "이 함수를 호출하면 'TypeError: Cannot read properties of undefined' 에러가 app.js 42번 줄에서 납니다. 코드는 아래와 같고, user를 빈 폼에서 제출할 때만 발생합니다. 원인과 수정안을 알려주세요."

좋은 질문에는 다음이 들어갑니다.

• 에러 메시지 전문 — 줄여 쓰지 말고 그대로 붙입니다.
• 관련 코드 — 문제 함수와 호출부를 함께 줍니다.
• 기대 vs 실제 — "이렇게 되길 기대했는데 이렇게 됐다"를 명확히 합니다.
• 재현 조건 — 언제 발생하고 언제는 안 나는지.
• 이미 시도한 것 — 헛다리 짚는 것을 막아 줍니다.

정리하면, 에러 메시지(종류·설명·위치)를 끝까지 읽고, 항상 같은 조건으로 재현한 뒤, 맥락을 갖춘 질문으로 AI와 협업합니다. 이 순서를 지키면 같은 시간에 훨씬 더 많은 버그를 잡을 수 있습니다.