왜 JSON.parse가 유효한 JSON에서 실패할까 (숨겨진 유니코드 문자)

Source: Dev.to

문제: JSON.parse가 “Unexpected token”을 던짐

때때로 JSON.parse는 JSON이 완전히 정상처럼 보여도 “Unexpected token” 오류를 발생시킵니다. 이는 JSON을 Slack, Word, Notion, 혹은 ChatGPT와 같은 곳에서 복사했을 때 특히 혼란스럽습니다.

const json = '{ "name": "John" }';

문자열은 올바르게 보이지만, 보이지 않는 유니코드 문자가 포함되어 있을 수 있습니다.

흔히 발생하는 원인

• Zero Width Space – U+200B
• Byte Order Mark (BOM) – U+FEFF
• Non‑breaking space – U+00A0

이 문자들은 대부분의 편집기에서 보이지 않지만, 엄격한 파서에서는 오류를 일으킵니다.

숨겨진 문자가 포함된 예시

{​ "name": "John" }

따옴표 앞에 있는 아주 작은 보이지 않는 문자가 다음과 같은 오류를 유발할 수 있습니다:

Unexpected token in JSON at position X

숨겨진 문자 감지 및 제거

다음 정규식을 사용해 일반적인 숨겨진 문자를 제거할 수 있습니다:

const clean = str.replace(/[\u200B-\u200D\uFEFF]/g, "");

제거하기 전에 문자 코드를 로그에 출력해 실제 존재 여부를 확인하는 것이 유용합니다.

감지를 위한 브라우저 도구

이 문제를 디버깅하면서 보이지 않는 유니코드 문자를 감지하고 제거하는 작은 브라우저 도구를 만들었습니다. 이 도구는 다음을 강조 표시합니다:

• Zero Width Space
• BOM
• Non‑breaking spaces
• 기타 숨겨진 유니코드 문자

여기서 직접 사용해 볼 수 있습니다:
도구는 100 % 클라이언트‑사이드에서 실행되므로 텍스트가 브라우저를 떠나지 않습니다.

JSON.parse가 실패했을 때 해야 할 일

1. 숨겨진 유니코드 문자 확인 – 보이지 않는 코드 포인트가 있는지 문자열을 검사합니다.
2. 문자 코드 로그 – 문자열을 순회하면서 charCodeAt 값을 출력합니다.
3. 제로‑폭 문자 제거 – 위에 제시된 정규식이나 유사한 방법을 사용합니다.

보이지 않는 문자는 파싱 버그의 놀라울 정도로 흔한 원인입니다. 이를 제거하면 JSON.parse가 정상적으로 동작합니다.