JSON.parse Unexpected Token 오류 원인과 해결 방법

이 글은 JSON.parse Unexpected token 문제 해결 안내입니다. 오류의 의미, position 읽기, 본문이 HTML일 때 할 일. 끝 쉼표, 따옴표, Unexpected End 등 더 넓은 오류 지도는 자주 발생하는 JSON 오류: 쉼표, 따옴표와 Unexpected Token 해결하기를 보세요.

JSON.parse()에서 “Unexpected Token”은 무슨 뜻인가?

JSON.parse()는 입력 문자열이 JSON 문법을 따라야 합니다. 현재 위치에서 허용되지 않는 문자나 토큰을 만나면 SyntaxError가 납니다. {“name”:“Alex”,}의 끝 쉼표는 유효한 JSON이 아닙니다. 메시지와 보고된 위치는 런타임마다 다를 수 있습니다.

JSON.parse()는 어떤 오류를 던지나?

유효하지 않은 JSON은 일반적으로 SyntaxError입니다. error.name으로 종류를 확인하세요. error.message 전체 문자열은 엔진과 버전에 따라 다르므로 고정하지 마세요.

try {
  JSON.parse('{"name":"Alex",}');
} catch (error) {
  console.log(error.name);
  // SyntaxError
}

1. 작은따옴표를 큰따옴표 대신 쓰는 경우

{‘name’:‘Alex’}는 유효한 JSON이 아닙니다. {“name”:“Alex”}가 유효합니다. JSON 문자열과 객체 멤버 이름은 큰따옴표를 씁니다. const user = { name: ‘Alex’ }는 유효한 JavaScript일 수 있어도 JSON 텍스트는 아닙니다.

유효하지 않음

{'name':'Alex'}

유효

{"name":"Alex"}

2. 끝 쉼표

마지막 속성이나 배열 항목 뒤의 쉼표는 표준 JSON에서 유효하지 않습니다. {“name”:“Alex”,“age”:30,}와 [1, 2, 3,]은 모두 실패합니다. Unexpected token의 한 원인으로만 다루고, 끝 쉼표의 자세한 설명은 자주 발생하는 JSON 오류: 쉼표, 따옴표와 Unexpected Token 해결하기를 보세요.

유효하지 않음

{
  "name": "Alex",
  "age": 30,
}

유효

{
  "name": "Alex",
  "age": 30
}

[1, 2, 3,]

3. 따옴표 없는 속성 이름

{ name: “Alex” }는 JavaScript 객체 리터럴일 수 있습니다. JSON에서 객체 멤버 이름은 문자열이며 큰따옴표가 필요합니다: {“name”:“Alex”}.

유효하지 않음

{
  name: "Alex"
}

유효

{
  "name": "Alex"
}

4. 잘못된 문자열 이스케이프

JSON 문자열에서 백슬래시는 이스케이프를 시작합니다. C:\Users\Alex처럼 raw 백슬래시가 들어가면 \U는 유효한 JSON 이스케이프가 아닙니다. JSON 텍스트에서는 백슬래시를 하나 더 이스케이프하세요. 호스트 언어 문자열 리터럴의 이스케이프와 JSON 이스케이프를 섞지 마세요. 이 사례는 자주 발생하는 JSON 오류: 쉼표, 따옴표와 Unexpected Token 해결하기에서 이미 다뤘으므로 여기서는 Unexpected token 유발 요인만 적습니다.

유효하지 않음

{"file":"C:\Users\Alex"}

유효

{"file":"C:\\Users\\Alex"}

5. JSON 앞뒤의 여분 텍스트

JSON.parse는 JSON 값 하나를 기대합니다. {“ok”:true} 앞의 Success:나 뒤의 done이 있으면 전체 문자열이 유효하지 않습니다. 값 주변의 의미 없는 공백은 허용됩니다. JSON 앞뒤에 공백이 있으면 안 된다는 말은 틀립니다.

Success:
{"ok":true}

{"ok":true}
done

6. JSON 대신 HTML을 파싱하는 경우

서버가 HTML 페이지를 반환했는데 response.json()을 호출하면 Unexpected token이 자주 납니다. 잘못된 엔드포인트, 404/500 HTML 오류 페이지, 로그인 리다이렉트, 리버스 프록시 본문, 앱 폴백 페이지가 마크업으로 시작하는 경우가 많습니다. “Unexpected token <는 항상 HTML”은 과도합니다. <는 강한 단서이지 증명은 아닙니다.

fetch('/api/data')
  .then(response => response.json())

“Unexpected Token <“는 보통 무슨 뜻인가?

JSON 값은 보통 <로 시작하지 않습니다. 본문이 이나 로 시작하면 <가 첫 잘못된 문자일 수 있습니다. 로컬 디버깅에서는 HTTP 상태, Content-Type, raw 본문을 확인하세요. 엔진 문구는 달라질 수 있습니다.

파싱하기 전에 응답을 확인하세요

fetch 본문은 보통 한 번만 읽을 수 있습니다. 로컬 디버깅에서는 text()를 먼저 읽고 앞부분을 본 뒤, 같은 문자열을 JSON.parse하세요. 같은 response에 response.json()과 response.text()를 연속 호출하지 마세요. 민감한 프로덕션 응답을 기본으로 로그하지 마세요.

const response = await fetch(url);
const text = await response.text();

console.log(response.status);
console.log(response.headers.get("content-type"));
console.log(text.slice(0, 200));

try {
  const data = JSON.parse(text);
  console.log(data);
} catch (error) {
  console.error("Invalid JSON:", error);
}

“at Position 123”은 무슨 뜻인가?

일부 엔진은 position, line, column을 제공합니다. 그 근처에서 잘못된 따옴표, 쉼표, 괄호, 이스케이프를 찾으세요. 보고된 인덱스는 파서가 문제를 감지한 지점입니다. 실제 원인은 그 앞의 빠진 따옴표나 쉼표일 수 있습니다. 항상 잘못된 문자 그 자체라고 보장하지 않습니다.

Unexpected Token과 Unexpected End

Unexpected token은 예상하지 못한 문자를 만났다는 뜻입니다. Unexpected end는 값이 끝나기 전에 입력이 끝난 경우, 예를 들어 닫는 중괄호가 없는 {“name”:“Alex”에서 나타날 수 있습니다. 정확한 문구는 엔진에 따라 다릅니다. 불완전한 JSON은 자주 발생하는 JSON 오류: 쉼표, 따옴표와 Unexpected Token 해결하기에서 더 넓게 다룹니다.

{"name":"Alex"

JSON은 JavaScript 객체 리터럴과 같지 않습니다

JSON은 데이터 형식입니다. JavaScript 객체 리터럴은 JavaScript 문법입니다. 따옴표 없는 키, 작은따옴표, 끝 쉼표가 있는 JS 객체는 유효한 JSON 텍스트가 아닙니다. JSON.parse는 JavaScript 객체 리터럴을 안전하게 파싱하지 않습니다.

const data = {
  name: 'Alex',
  active: true,
};

{
  "name": "Alex",
  "active": true
}

JSON에 주석을 넣을 수 있나?

표준 JSON은 주석을 지원하지 않습니다. 객체 안의 // 줄은 유효하지 않습니다. JSON5 등은 다른 형식입니다. JSON 정리·검사·비교은 JSON.parse로 표준 JSON을 검사하며 JSON5를 JSON으로 취급하지 않습니다.

{
  // user name
  "name": "Alex"
}

undefined, NaN, Infinity는 유효한 JSON인가?

아닙니다. 표준 JSON 값은 object, array, string, number, true, false, null입니다. JavaScript의 undefined, NaN, Infinity는 JSON 값이 아닙니다. 최상위 값이 반드시 객체나 배열일 필요는 없습니다. true, 123, “hello”, null도 유효한 JSON입니다.

{"a":undefined}
{"a":NaN}
{"a":Infinity}

true
123
"hello"
null

Unexpected Token 오류를 단계별로 고치는 방법

오류 문자열이 아니라 출처를 고치세요:

1. 입력이 실제로 JSON인지 확인합니다. HTML, 로그, JavaScript가 아닌지.
2. 원문 앞부분을 봅니다.
3. API에서 왔다면 HTTP 상태와 Content-Type을 확인합니다. 200이나 application/json만으로 유효 JSON이 보장되지 않습니다.
4. JSON 파서로 문법을 검사합니다.
5. 보고된 position, line, column은 단서이지 원인 위치의 보장은 아닙니다.
6. 그 근처의 따옴표, 쉼표, 중괄호, 대괄호, 이스케이프를 확인합니다.
7. 포맷·검증된 복사본과 비교합니다.
8. 시리얼라이저나 엔드포인트를 고칩니다. 보고된 토큰을 무작정 지우지 마세요.

JavaScript에서 JSON을 만들 때는 JSON.stringify()를 쓰세요

문자열을 손으로 이어 붙이기보다 JSON.stringify를 쓰세요. 직렬화하는 값에 대해 유효한 JSON 텍스트를 만듭니다. 모든 JavaScript 값을 그대로 보존하지는 않습니다. undefined, 함수, 심볼은 특수 동작이 있습니다. 여기서는 깊게 다루지 않습니다.

const data = {
  name: "Alex",
  active: true
};
const json = JSON.stringify(data);
// {"name":"Alex","active":true}

유효하지 않은 JSON과 실제 수정

아래 쌍은 JSON.parse로 확인했습니다. HTML은 문법을 고치는 것이 아니라 응답을 고칩니다.

문제	유효하지 않음	수정
작은따옴표	{'a':1}	{"a":1}
끝 쉼표	{"a":1,}	{"a":1}
따옴표 없는 키	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
HTML 본문	<html>...	엔드포인트와 raw 응답을 확인하세요. HTML을 JSON으로 편집하지 마세요.

간단한 Unexpected Token 판단 안내

JSON.parse가 실패했다면 따옴표를 고치기 전에 JSON인지부터 판단하세요.

• JSON.parse 실패
• ↓
• API인가? 상태, Content-Type, raw 본문 확인
• JSON으로 시작하는가? 아니면 출처/엔드포인트를 고친다
• 맞다면 따옴표, 쉼표, 괄호, 이스케이프, 지원되지 않는 값을 검사
• 보고된 위치는 단서로 사용
• ↓
• 출처를 고친 뒤 다시 파싱

파싱하거나 쓰기 전에 JSON을 검사하세요

NEXNARA JSON 정리·검사·비교은 브라우저에서 JSON.parse로 JSON을 검사합니다. eval을 쓰지 않습니다.

검사, 공백 2칸·4칸·탭 pretty-print, 압축, 복사, 다운로드, .json 업로드가 됩니다. JSON Diff는 중첩 객체와 배열을 비교하고 경로, 요약, 필터, 맞바꾸기를 보여 줍니다. 파싱 후에는 같은 데이터의 pretty/minified가 같다고 비교됩니다. 객체 키는 이름으로 비교합니다.

5 MB보다 큰 텍스트는 느릴 수 있습니다. 15 MB보다 큰 텍스트는 브라우저에서 처리하지 않습니다.

JSON 검사와 포맷은 브라우저에서 이뤄집니다. 이 도구는 JSON을 NEXNARA 서버로 보내지 않습니다. 광고와 다른 사이트 기능은 네트워크를 쓰며, JSON 처리와는 별개입니다.

실패한 문자열을 JSON 정리·검사·비교에 붙여 넣고, 따옴표를 고치기 전에 앞부분을 읽으세요.

FAQ

JSON.parse가 Unexpected token이라고 하는 이유는?

파서가 멈춘 지점에서 텍스트가 유효한 JSON이 아닙니다. 흔한 원인은 따옴표, 쉼표, 여분 텍스트, HTML 같은 JSON이 아닌 본문입니다.

JSON에서 Unexpected token <는 무슨 뜻인가?

첫 잘못된 문자가 <일 수 있습니다. HTML 페이지를 가리키는 경우가 많지만, 항상 404이거나 항상 HTML이라는 증명은 아닙니다. 상태, Content-Type, raw 본문을 확인하세요.

JSON 오류 위치는 어떻게 찾나?

엔진이 position, line, column을 주면 그 근처를 보세요. 실제 실수는 더 앞일 수 있습니다. 단서로 쓰고 검증하세요.

JSON에 작은따옴표를 쓸 수 있나?

없습니다. 표준 JSON 문자열과 멤버 이름은 큰따옴표를 씁니다.

JSON에 끝 쉼표를 쓸 수 있나?

없습니다. 표준 JSON은 마지막 속성이나 배열 항목 뒤 쉼표를 허용하지 않습니다.

문자열이 유효한 JSON인지 어떻게 확인하나?

try/catch에서 JSON.parse를 호출하거나 JSON 정리·검사·비교에 붙여 넣으세요. SyntaxError가 나면 유효한 JSON이 아닙니다.