JSON trailing comma 에러가 나는 이유
JSON을 붙여 넣었는데 Unexpected token }나 Unexpected token ] 같은 에러가 난다면, 가장 먼저 의심할 항목 중 하나가 trailing comma입니다. trailing comma는 객체나 배열의 마지막 요소 뒤에 불필요하게 붙은 쉼표를 뜻합니다. JavaScript 객체 리터럴에서는 허용되는 경우가 있어 더 헷갈리지만, 표준 JSON에서는 허용되지 않습니다.
1) 어떤 형태가 문제인가
예를 들어 아래 입력은 JavaScript처럼 보여도 JSON으로는 잘못된 형식입니다.
{"name":"dev","items":[1,2,3],}
배열도 마찬가지입니다.
[1,2,3,]
마지막 값 뒤의 쉼표 때문에 JSON 파서는 다음 토큰을 기대하는데 바로 닫는 괄호를 만나게 됩니다.
2) 왜 자주 생기나
이 에러는 사람이 직접 입력할 때보다 문자열을 조합해서 JSON을 만들 때 더 자주 발생합니다. 템플릿 반복문으로 항목을 이어 붙이거나, 조건에 따라 필드를 추가하는 코드에서 마지막 쉼표 제거를 놓치면 쉽게 생깁니다. 수동 편집에서도 배열 요소를 지운 뒤 쉼표가 남아 같은 문제가 납니다.
3) JavaScript와 JSON의 차이
브라우저 콘솔이나 일부 코드 포맷에서는 trailing comma가 자연스럽게 보입니다. 그래서 많은 사람이 JSON도 같을 거라고 생각합니다. 하지만 JSON은 언어 독립적인 데이터 교환 포맷이라 문법이 훨씬 엄격합니다. 주석이 안 되는 것처럼 trailing comma도 허용되지 않습니다.
4) 빠르게 찾는 방법
에러 메시지의 위치가 모호하더라도 마지막 항목 뒤를 먼저 보세요. 특히 객체가 여러 줄로 정렬되어 있다면 닫는 } 또는 ] 바로 위 줄 끝에 쉼표가 남아 있는지 확인하면 됩니다. 한 줄 JSON이라면 포매터에 넣어 구조를 펼친 뒤 보는 편이 더 빠릅니다.
5) 실무에서 반복되는 사례
- API mock 데이터를 손으로 편집한 경우
- 설정 파일 일부를 지운 뒤 저장한 경우
- 서버에서 문자열 연결로 JSON을 생성한 경우
- 로그 일부를 복사하는 과정에서 문장이 잘린 경우
반복적으로 발생한다면 사람의 실수보다 JSON 생성 방식을 점검하는 편이 낫습니다.
6) 어떻게 예방하나
가능하면 문자열 이어 붙이기 대신 객체를 만든 뒤 JSON.stringify를 사용하세요. 수동 편집이 필요하다면 저장 전 포매터나 린터를 한 번 거치면 대부분 바로 잡을 수 있습니다. CI나 테스트에서 JSON 파싱 검증을 추가하는 것도 효과적입니다.
7) 에러 위치가 예상보다 뒤에 찍히는 이유
trailing comma 오류는 실제 문제 지점보다 닫는 괄호 근처에서 드러나는 경우가 많습니다. 파서는 쉼표를 본 순간 “다음 값이 더 오겠구나”라고 기대하는데, 바로 }나 ]를 만나면서 실패하기 때문입니다. 그래서 메시지만 보고 괄호가 문제라고 생각하기 쉽지만, 실제 원인은 직전 줄 끝의 쉼표인 경우가 많습니다.
8) 템플릿 생성 코드에서 자주 생기는 패턴
서버에서 문자열을 수동 조합하는 코드가 있다면 반복문 마지막 요소 처리 로직을 먼저 보세요. 예를 들어 항목을 순회하며 매번 쉼표를 붙이고 마지막 요소만 예외 처리해야 하는 방식은 쉽게 깨집니다. 이런 경우에는 배열을 만든 뒤 join(',')을 쓰거나, 애초에 객체/배열을 만든 뒤 JSON.stringify로 직렬화하는 것이 훨씬 안전합니다.
9) 체크리스트
- 마지막 항목 뒤에 쉼표가 남아 있지 않은가
- JSON이 아니라 JavaScript 객체 문법을 복사한 것은 아닌가
- 서버에서 수동 문자열 조합으로 JSON을 만들고 있지 않은가
- 포매터로 구조를 펼쳐서 다시 확인했는가
10) 관련 도구
JSON Formatter & Validator에 입력하면 trailing comma를 포함한 대표적인 문법 오류를 빠르게 찾을 수 있습니다. 에러 메시지 자체를 먼저 보고 싶다면 JSON parse error 오류 가이드와 함께 보는 것이 좋습니다.