JSON이 유효하지 않은 7가지 이유와 해결 방법

대부분의 JSON.parse 오류는 몇 가지 실수 때문에 발생합니다. 여기 일곱 가지 사례를 제시하며, 각 경우에 대해 이전 코드와 수정된 코드를 보여주고 문제를 찾는 빠른 방법을 알려드립니다.

태그: json, webdev, beginners, tutorial

JSON 응답을 코드에 붙여넣고 JSON.parse를 실행했을 때 오류가 발생하지만, 에러 메시지는 완벽해 보이는 지점을 가리킵니다. 대부분의 경우 그 원인은 반복적으로 발생하는 몇 가지 실수 중 하나입니다.

여기 일곱 가지 사례가 있으며, 각 사례마다 이전 코드와 수정된 코드가 있습니다.

1. 트레일링 쉼표 (A trailing comma)

{ "name": "Ali", "age": 25, }

마지막 쉼표를 제거하세요:

{ "name": "Ali", "age": 25 }

JavaScript 객체 리터럴과 다른 많은 언어들은 트레일링 쉼표를 허용합니다. 하지만 JSON은 그렇지 않으며, 이것이 에디터에서는 괜찮아 보이는 코드가 JSON으로 파싱될 때 실패하는 이유입니다.

2. 작은따옴표 (Single quotes)

{ 'name': 'Ali' }

JSON은 키와 문자열 값 모두에 큰따옴표만 허용합니다:

{ "name": "Ali" }

3. 따옴표가 없는 키 (Keys without quotes)

{ name: "Ali" }

이것은 유효한 JavaScript이지만, 유효한 JSON은 아닙니다. 모든 키는 큰따옴표로 감싸야 합니다:

{ "name": "Ali" }

4. 주석 (Comments)

{
  // the user's name
  "name": "Ali"
...

JSON에는 주석 구문이 없습니다. 따라서 //와 /* */ 모두 오류를 발생시킵니다. 이들을 제거해야 합니다. VS Code의 설정 파일과 같은 일부 도구는 주석을 허용하지만, 이는 JSON 자체가 관대한 것이 아니라 해당 도구가 관대하기 때문입니다. 만약 형식을 제어하고 메모가 필요하다면, "_comment"와 같은 키를 사용하면 됩니다.

5. undefined, NaN 및 Infinity

{ "score": undefined, "ratio": NaN }

이 값들은 JSON에 존재하지 않습니다. 대신 null을 사용하거나 해당 키를 제외하세요:

{ "score": null, "ratio": null }

만약 JSON.stringify로 JSON을 생성한다면, 이 문제는 자주 보지 못할 것입니다. 왜냐하면 undefined 값은 제거되고 NaN과 Infinity는 null로 변환되기 때문입니다. 이 문제는 보통 JSON이 수동으로 작성되거나 문자열 결합으로 만들어질 때 발생합니다.

6. 이스케이프가 필요한 문자 (Characters that need escaping)

{ "path": "C:\Users\ali" }

백슬래시()\는 이스케이프 시퀀스를 시작하며, \U는 유효하지 않습니다. 백슬래시를 두 번 사용하세요:

{ "path": "C:\Users\ali" }

줄 바꿈도 마찬가지입니다. 문자열 내부의 실제 줄 바꿈은 허용되지 않습니다. 대신 \n을 작성하세요.

7. 코드에서 사용하는 방식대로 작성된 숫자들

{ "id": 007, "bonus": +5, "rate": .5, "mask": 0xFF }

JSON 숫자는 JavaScript 숫자보다 더 엄격합니다. 선행 0(leading zeros) 금지, 플러스 기호 금지, 점만 있는 소수점 금지, 16진수 표기 금지:

{ "id": 7, "bonus": 5, "rate": 0.5, "mask": 255 }

알아두면 좋은 점이 하나 더 있습니다. JavaScript가 파싱할 때 9007199254740991을 초과하는 숫자는 정밀도를 잃습니다. 큰 ID를 전송해야 한다면 문자열로 전송하세요.

문제를 빠르게 찾는 방법

try/catch 블록으로 파싱을 감싸고 메시지를 기록하세요:

try {
  JSON.parse(text);
} catch (err) {
...

메시지의 문구는 브라우저와 엔진마다 다릅니다. 어떤 것은 줄과 열(line and column)을 제공하고, 다른 것은 문자 위치만 제공합니다. 메시지가 도움이 되지 않을 때는 JSON을 포매터에 붙여넣으세요. 유효하다면 포매터가 들여쓰기를 하여 구조를 읽을 수 있게 해줍니다. 그렇지 않다면 즉시 오류를 알게 됩니다.

저는 무료 브라우저 도구 사이트를 운영하고 있는데, 그중 하나가 JSON 포매터입니다. 이 도구는 JSON을 포맷하고, 최소화하며, 검사합니다. 그리고 전적으로 사용자의 브라우저에서 실행되므로 붙여넣은 내용은 업로드되지 않습니다. 어떤 포매터를 사용해도 같은 작업을 수행하므로 마음에 드는 것을 사용하세요.

대부분의 문제를 예방하는 습관

만약 코드가 JSON을 생성한다면, 라이브러리에게 맡기세요. JavaScript에서는 JSON.stringify를, Python에서는 json.dumps를 사용하고, 그에 상응하는 기능을 사용하면 따옴표, 이스케이프 처리, 쉼표 등을 자동으로 처리해줍니다. 대부분의 유효하지 않은 JSON은 사람이 수동으로 문자열을 만들 때 발생합니다.