json debugging syntax-error web-development javascript

JSON의 'Unexpected token' 및 일반적인 JSON 파싱 오류 해결 방법

JSON.parse의 'Unexpected token', 'invalid JSON format', 후행 쉼표 등 JSON 파싱 오류를 식별하고 수정하는 종합 가이드입니다. 일반적인 원인과 해결 방법을 알아보세요.

JSON의 "Unexpected token in JSON" 및 일반적인 JSON 파싱 오류 해결 방법: 완전 가이드

JSON (JavaScript Object Notation)은 현대 웹 통신의 핵심입니다. REST API 구축, 서버 설정, 애플리케이션 상태 저장 등 JSON은 어디에나 있습니다. 하지만 엄격한 문법으로 인해 SyntaxError: Unexpected token, JSON.parse: unexpected character 또는 단순한 invalid JSON format과 같은 답답한 오류가 자주 발생합니다.

이 가이드에서는 가장 일반적인 JSON 파싱 오류를 분석하고, 왜 발생하는지 설명하며, 정확한 해결 방법을 보여드립니다.

1. 일반적인 JSON 오류 메시지

구문 분석기(JavaScript의 JSON.parse() 등)가 유효하지 않은 JSON을 만나면 오류를 발생시킵니다. 환경에 따라 다음과 같은 메시지가 표시될 수 있습니다.

  • 브라우저 (Chrome/V8): SyntaxError: Unexpected token ' in JSON at position 0
  • Firefox: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
  • Node.js: SyntaxError: Unexpected token ... in JSON at position ...
  • Python: json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes

핵심 정보는 보통 예상치 못한 문자와 그것이 발생한 위치(또는 행/열)입니다.


2. 주요 원인 및 해결 방법

2.1 큰따옴표 대신 작은따옴표 사용

JSON은 키와 문자열 값 모두에 **큰따옴표(")**를 사용할 것을 엄격히 요구합니다. 작은따옴표(')는 JavaScript 객체에서는 유효하지만 JSON 문자열에서는 유효하지 않습니다.

오류 예시 (single quotes in JSON):

{
  'name': 'Tool3M'
}

해결 방법: 모든 작은따옴표를 큰따옴표로 바꿉니다.

{
  "name": "Tool3M"
}

2.2 후행 쉼표 (Trailing Commas)

현대 JavaScript와 달리 JSON은 객체나 배열의 마지막 항목 뒤에 쉼표를 허용하지 않습니다.

오류 예시 (trailing comma in JSON):

{
  "id": 1,
  "status": "active",
}

해결 방법: 마지막 속성 뒤의 쉼표를 제거합니다.

{
  "id": 1,
  "status": "active"
}

2.3 따옴표가 없는 키

JSON에서 키는 항상 큰따옴표로 묶인 문자열이어야 합니다.

오류 예시:

{
  id: 123
}

해결 방법: 키를 큰따옴표로 감쌉니다.

{
  "id": 123
}

2.4 JSON 내 주석

JSON 표준은 주석(// 또는 /* */)을 지원하지 않습니다 (comments in JSON). 일부 도구(tsconfig.json을 위한 VS Code 등)에서는 허용되지만, 표준 JSON.parse()는 실패합니다.

오류 예시:

{
  "id": 1 // 이것은 주석입니다
}

해결 방법: 파싱하기 전에 모든 주석을 제거합니다. 메타데이터가 필요한 경우 "__comment": "text"와 같은 속성을 사용하세요.

2.5 특수 값: NaN, Infinity, Undefined

JSON은 NaN, Infinity, -Infinity, undefined를 지원하지 않습니다. 이들은 JavaScript 전용 값입니다.

오류 예시 (NaN in JSON, Infinity in JSON):

{
  "value": NaN,
  "expired": undefined
}

해결 방법: 대신 null이나 자리 표시자 문자열/숫자를 사용하세요.

{
  "value": null,
  "expired": null
}

2.6 제어 문자 및 줄바꿈

JSON의 문자열은 이스케이프되지 않은 원시 제어 문자(탭 또는 실제 줄바꿈 등)를 포함할 수 없습니다.

오류 예시:

{
  "description": "이것은
여러 줄 문자열입니다"
}

해결 방법: 줄바꿈에는 \n, 탭에는 \t를 사용하세요.

{
  "description": "이것은 \n여러 줄 문자열입니다"
}

3. 고급 문제 해결

3.1 BOM (Byte Order Mark)

파일이 완벽해 보이는데도 위치 0에서 SyntaxError가 발생하는 경우가 있습니다. 이는 종종 파일 시작 부분에 숨겨진 UTF-8 BOM 문자로 인해 발생합니다. 해결 방법: 파일을 "BOM 없는 UTF-8"로 다시 저장하세요.

3.2 잘못 이스케이프된 문자

문자열에 백슬래시(\)나 큰따옴표(")가 포함된 경우 이스케이프해야 합니다.

  • 올바름: "path": "C:\\Windows\\System32"
  • 올바름: "quote": "그가 \"안녕하세요\"라고 말했다"

4. 예방 조치

  1. Linter 사용: jsonc-parser가 포함된 ESLint나 VS Code의 기본 JSON 유효성 검사를 사용하세요.
  2. 자동 서식 지정: 설정 파일에 저장하기 전에 항상 포맷터를 통해 JSON을 실행하세요.
  3. 스키마 검증: JSON Schema를 사용하여 데이터 구조를 정의하고 프로그래밍 방식으로 검증하세요.
  4. Try-Catch: 동적 데이터를 파싱할 때는 항상 JSON.parse()try...catch 블록으로 감싸 오류를 적절히 처리하세요.
try {
  const data = JSON.parse(userInput);
} catch (e) {
  console.error("JSON 파싱 실패:", e.message);
  // 사용자에게 친숙한 오류 메시지 표시
}

5. FAQ: 자주 묻는 질문

Q: 왜 "Unexpected token < in JSON at position 0" 오류가 발생하나요?

A: 이는 거의 항상 코드가 JSON을 기대했지만 HTML을 받았음을 의미합니다. 일반적으로 API 호출이 실패하고 서버가 예상된 JSON 응답 대신 HTML 오류 페이지(404 또는 500 페이지 등)를 반환할 때 발생합니다.

Q: JSON에서 16진수를 사용할 수 있나요?

A: 아니요. JSON은 표준 10진수만 지원합니다. 0xFF는 파싱 오류(JSON parse error)를 유발합니다. 대신 255를 사용하세요.

Q: 파서를 중단시키는 대용량 JSON 파일은 어떻게 처리하나요?

A: 매우 큰 파일의 경우, 파일을 메모리에 모두 로드하는 대신 조각별로 처리하는 JSONStream(Node.js) 또는 ijson(Python)과 같은 "스트リーミング" 파서를 사용하세요.


6. 빠른 확인 도구

누락된 쉼표나 잘못된 따옴표를 찾는 데 어려움을 겪고 있다면 당사의 **JSON 포맷터 및 검증기**를 사용해 보세요.

  • 구문 오류를 즉시 강조 표시합니다.
  • 작은따옴표나 후행 쉼표와 같은 일반적인 문제를 수정합니다.
  • JSON을 포맷하여 사람이 읽기 쉽게 만듭니다.

관련 오류

  • 'invalid base64 string' 오류 해결
  • JavaScript에서 'malformed URL'을 수정하는 방법
  • YAML 들여쓰기 오류 이해하기