AI보다 먼저 '에러 메시지'를 믿어야 하는 이유 (feat. JSON Syntax Error)
🛑 문제 상황: Mock 서버 연동 후 데이터 미출력
Postman으로 Mock 서버를 생성하고 HTML(Frontend)과 연동하는 작업을 진행했습니다. 분명히 API 호출은 성공하는 것 같은데, 화면에는 데이터가 전혀 나타나지 않았습니다.
🔍 시도해본 것들
- “데이터가 없어서 그런가?”: 단순히 조회가 안 되는 문제라 생각하여 데이터를 넣어주기 위해
POST API를 추가로 작성하고 호출해 보았습니다. - AI에게 질문: 코드를 복사해서 AI에게 물어보며 해결책을 찾으려 노력했습니다.
하지만 결과는 여전히 ‘데이터 미출력’이었습니다.
🛠️ 해결 과정: 답은 ‘Console’ 탭에 있었다
무심결에 브라우저 개발자 도구(F12)의 Console 탭을 확인했을 때, 생각지도 못한 에러 메시지를 발견했습니다.
Uncaught SyntaxError: Unexpected token ']' in JSON at position ...
1. 원인 분석 (Troubleshooting)
Postman의 Add Example 기능을 사용해 Mock 데이터를 만들 때 작성했던 Body 내용이 문제였습니다.
- 기존 코드(Error): ```json [ {“id”: 1, “name”: “Item 1”}, {“id”: 2, “name”: “Item 2”}, // 마지막 요소 뒤에 쉼표(,)가 붙어 있음 ] 문제점: JSON 표준 형식에서는 배열이나 객체의 마지막 요소 뒤에 콤마(Trailing Comma)를 허용하지 않습니다. 이 작은 쉼표 하나 때문에 브라우저가 응답 받은 데이터를 정상적인 JSON으로 인식하지 못하고 파싱 에러를 낸 것이었습니다.
2. 해결 방법
Postman Mock 서버의 Example Body에서 마지막 쉼표를 제거하고 저장하니, HTML 화면에 데이터가 정상적으로 출력되었습니다.
- 수정 후 코드(Success):
JSON
1
2
3
4
[
{"id": 1, "name": "Item 1"},
{"id": 2, "name": "Item 2"}
]
🧠 회고: AI 시대에 더 중요해진 ‘기본’
이번 삽질(?)을 통해 두 가지 큰 교훈을 다시 상기할 수 있었습니다.
에러 메시지는 거짓말을 하지 않는다: 추측만으로 POST API를 새로 만드는 등의 행동을 하기 전에, 시스템이 내뱉는 에러 메시지를 먼저 읽었다면 30분 넘게 고민할 문제를 1분 만에 해결했을 것입니다.
AI 의존도 낮추기: 최근 AI에게 질문하는 습관이 들면서, 개발자의 가장 기본 소양인 ‘로그 확인’과 ‘디버깅’ 과정을 건너뛰고 있지는 않았는지 반성하게 되었습니다. AI는 훌륭한 도구이지만, 내 눈앞의 에러 메시지를 확인하는 것이 가장 빠른 지름길임을 잊지 말아야겠습니다.
💡 오늘의 한 줄 요약
“AI에게 물어보기 전에 오류 먼저 분석하는 개발자가 되자!”