JSON 문법 오류 원인, 메시지로 찾는 법
JSON을 붙여넣었을 때 뜨는 "Unexpected token" 오류는 JSON 문법 규칙 중 하나를 어겼다는 뜻입니다. 오류 메시지 안에는 이미 어떤 문자에서, 몇 번째 자리에서 문제가 생겼는지가 들어 있습니다. 이 글은 자주 나오는 문법 오류 유형과, 그 메시지를 읽어 원인을 찾는 방법을 정리합니다.
요약 ① JSON은 트레일링 콤마·작은따옴표·주석·따옴표 없는 키를 문법상 허용하지 않습니다. ② JSON.parse가 던지는 오류 메시지에는 문제가 된 문자와 위치(position)가 함께 표시됩니다. ③ 위치 값은 문자열 맨 앞부터 센 글자 수이므로, 그 지점 앞뒤를 보면 원인을 좁힐 수 있습니다.
왜 이런 오류가 자주 나는가
API 응답을 콘솔에서 복사해 설정 파일에 붙여넣거나, 여러 응답을 손으로 이어 붙이다가 마지막 항목 뒤에 콤마를 하나 더 남기는 일이 흔합니다. 자바스크립트 코드 안에 있던 객체 리터럴을 그대로 떼어내 JSON이라고 붙여넣는 경우도 자주 생깁니다.
두 문법은 겉보기에 비슷하지만 규칙이 다릅니다. 자바스크립트 객체 리터럴에서는 되는 표현(작은따옴표, 따옴표 없는 키, 트레일링 콤마)이 JSON에서는 전부 문법 오류입니다. 그래서 코드에서는 멀쩡히 동작하던 값을 그대로 옮기면 JSON.parse가 즉시 오류를 던집니다.
문제는 오류 메시지가 "Unexpected token } in JSON at position 42"처럼 코드처럼 보인다는 점입니다. 어떤 문법 규칙을 어겼는지, 42라는 숫자가 무엇을 가리키는지 모르면 메시지를 읽고도 원인을 못 찾습니다.
JSON 문법 규칙과 오류 메시지 읽는 법
JSON은 정해진 문법을 따르는 표준 형식입니다. 실제로 오류를 일으키는 규칙은 몇 가지로 정리됩니다.
- 문자열과 키는 반드시 큰따옴표(")로 감쌉니다. 작은따옴표(')는 JSON 문법에 없습니다.
- 객체나 배열의 마지막 항목 뒤에는 콤마를 붙이지 않습니다(트레일링 콤마 금지).
- 키는 항상 따옴표로 감싼 문자열이어야 합니다. 따옴표 없는 키는 JSON이 아니라 자바스크립트 객체 리터럴 문법입니다.
- 주석(// 또는 /* */)은 JSON 문법 자체에 포함되어 있지 않습니다.
- 숫자는 앞에 불필요한 0을 붙이거나(01처럼), + 기호를 붙이거나, NaN·Infinity 같은 값을 쓸 수 없습니다.
- true, false, null은 소문자로만 씁니다.
이 규칙 중 하나라도 어기면 브라우저의 JSON.parse는 값을 돌려주지 않고 오류(SyntaxError)를 던집니다.
오류 메시지 속 위치(position) 정보 읽는 법
이 오류에는 두 가지 정보가 담깁니다. 문제가 된 문자와, 그 문자가 문자열의 몇 번째 자리에 있는지 나타내는 위치(position)입니다. 위치는 줄바꿈까지 포함해 문자열 맨 앞(0)부터 센 글자 수입니다.
메시지 형식은 브라우저 엔진마다 다릅니다. 크로미움 계열은 position(문자 위치), 파이어폭스 계열은 line·column(줄·칸) 형태로 보여주지만, 가리키는 지점은 같습니다.
원인을 찾으려면 이 위치를 기준으로 앞뒤 문자를 살펴보면 됩니다. 다만 JSON이 길어질수록 위치를 손으로 세는 건 번거롭고 오차가 생기기 쉽습니다.
저희 도구로 확인하기.
JSON을 붙여넣고 정렬 버튼을 누르면 오류 위치와 메시지를 바로 확인할 수 있습니다. 브라우저 안에서만 처리되어 서버로 전송되지 않습니다.
자주 헷갈리는 문법 오류 유형
같은 "오류가 난다"는 결과라도 원인은 서로 다릅니다. 자주 나오는 유형을 정리하면 다음과 같습니다.
| 오류 유형 | 예시 | 왜 오류인가 |
|---|---|---|
| 트레일링 콤마 | {"a":1,"b":2,} | 마지막 항목 뒤에는 콤마를 붙이지 않습니다 |
| 작은따옴표 사용 | {'a':1} | 문자열·키는 큰따옴표만 허용됩니다 |
| 키에 따옴표 누락 | {a:1} | 키는 반드시 따옴표로 감싼 문자열이어야 합니다 |
| 주석 포함 | {"a":1} // 설명 | JSON 문법에는 주석이 없습니다 |
| undefined 값 | {"a":undefined} | JSON은 undefined를 표현할 수 없습니다(null만 가능) |
| 숫자 앞 0 | {"a":01} | 0으로 시작하는 숫자는 0 자체 외에는 허용되지 않습니다 |
이 중 트레일링 콤마와 작은따옴표는 자바스크립트 코드에서는 자연스럽게 쓰이는 표현이라, 코드에서 값을 복사해 JSON으로 옮길 때 특히 자주 섞여 들어갑니다.
정리
- JSON은 큰따옴표·콤마 규칙 등 정해진 문법을 따르는 형식이며, 자바스크립트 객체 리터럴과 문법이 다릅니다.
- 트레일링 콤마, 작은따옴표, 따옴표 없는 키, 주석 포함이 실제로 가장 자주 나오는 오류 원인입니다.
- JSON.parse가 던지는 오류 메시지에는 문제가 된 문자와 위치(position 또는 line/column)가 함께 담깁니다.
- 위치 값은 문자열 맨 앞부터 센 글자 수이므로, 그 지점 앞뒤를 확인하면 원인을 좁힐 수 있습니다.
- 긴 JSON에서는 위치를 손으로 세는 대신 도구로 바로 확인하는 편이 빠르고 정확합니다.
JSON을 붙여넣고 정렬 버튼을 누르면 오류 위치와 메시지를 바로 확인할 수 있습니다. 브라우저 안에서만 처리되어 서버로 전송되지 않습니다.
자주 묻는 질문
"Unexpected token" 오류는 정확히 무슨 뜻인가요?
JSON.parse가 문법상 나올 수 없는 문자를 만났다는 뜻입니다. 메시지에는 그 문자와, 문자열의 몇 번째 자리(position)에서 발견됐는지가 함께 표시됩니다. 위치 앞뒤를 확인하면 원인을 바로 찾을 수 있습니다.
position 뒤에 붙은 숫자는 무엇을 의미하나요?
문자열 맨 앞을 0으로 두고 센 글자 수(문자 인덱스)입니다. 줄바꿈 문자도 포함해서 셉니다. 예를 들어 position 42라면 문자열 시작부터 43번째 글자 자리에서 문제가 생겼다는 뜻입니다.
주석이 있는 JSON은 왜 오류가 나나요?
JSON 문법 자체에 주석 표기법이 정의되어 있지 않기 때문입니다. // 나 /* */ 같은 주석은 자바스크립트나 JSON5·JSONC 같은 확장 형식에서는 허용되지만, 표준 JSON에서는 오류로 처리됩니다.
자바스크립트 객체를 그대로 JSON으로 써도 되나요?
안 됩니다. 자바스크립트 객체 리터럴은 키에 따옴표를 생략하거나 작은따옴표를 쓰거나 트레일링 콤마를 남길 수 있지만, JSON은 이런 표현을 모두 문법 오류로 봅니다. 큰따옴표로 감싸고 마지막 콤마를 지워야 JSON으로 쓸 수 있습니다.