AI로 버그 잡기
에러는 실패가 아니라 단서입니다. 브라우저 콘솔에서 에러를 확인하고, AI에게 효과적으로 전달해 원인을 찾아 고치는 법을 익힙니다.
에러는 적이 아니라 단서입니다
코드가 동작하지 않으면 당황하기 쉽지만, 에러 메시지는 사실 “여기가 문제예요”라고 알려주는 안내문입니다. 읽는 법만 익히면 문제 해결이 훨씬 빨라집니다.
1단계: 콘솔에서 에러 확인하기
-
브라우저에서 페이지를 연 뒤 F12(또는 마우스 오른쪽 → 검사)를 누릅니다.
-
Console(콘솔) 탭을 엽니다. 빨간 글씨가 에러 메시지입니다.
-
에러 줄에 보통 무엇이(메시지) 어디서(파일·줄 번호) 났는지 적혀 있습니다.
2단계: AI에게 잘 전달하기
에러를 AI에게 물을 때는 세 가지를 함께 주면 정확한 답을 받습니다.
- 무엇을 하려 했는지 (예: “버튼을 누르면 목록에 항목이 추가되게 하려고 했어”)
- 에러 메시지 전체 (콘솔의 빨간 글씨를 그대로 복사)
- 관련 코드 (문제로 보이는 부분)
“버튼을 누르면 목록에 항목을 추가하려고 했는데, 콘솔에 이런 에러가 떠: (메시지). 관련 코드는 이거야: (코드). 원인과 해결법을 알려줘.”
3단계: 고치고 다시 확인하기
-
AI가 제안한 수정을 적용합니다.
-
페이지를 새로고침하고 같은 동작을 다시 해봅니다.
-
같은 에러가 사라졌는지, 새 에러가 생기지 않았는지 콘솔로 확인합니다.
-
해결되면 Git으로 커밋해 그 지점을 저장해둡니다.
흔한 실수 체크리스트
id이름과getElementById의 이름이 정확히 같은가?<script>가<body>끝에 있는가? (요소보다 먼저 실행되면 못 찾음)- 따옴표·괄호의 짝이 맞는가?
- 오타는 없는가? (대소문자 포함)
다음 단계
기본기를 갖췄습니다. 이제 한 단계 더 나아가 외부 데이터를 가져오는 API 연동을 배웁니다.