JSON 뷰어
접었다 펼치는 트리로 JSON 구조 파악
데이터는 서버로 전송되지 않습니다 — 모든 처리는 브라우저 안에서만 서버 전송 0건
전체 노드
13
개
최대 깊이
4
단계
객체 {4}
order:객체 {2}
id:"A-1024"
total:48000
items:배열 [2]
0:객체 {2}
1:객체 {2}
paid:true
memo:null
JSON 뷰어 사용법
JSON을 붙여넣으면 접었다 펼칠 수 있는 트리로 바뀝니다. 삼각형을 눌러 필요한 가지만 열어보고, 위쪽 카드에서 전체 노드 수와 중첩 깊이를 확인하세요. 문법이 틀렸다면 몇 번째 줄 몇 번째 글자에서 깨졌는지 함께 알려줍니다.
트리로 볼 때 유리한 경우
API 응답처럼 구조는 반복되는데 깊이가 깊은 데이터에서 특히 유용합니다. 텍스트로 보면 수백 줄을 스크롤해야 알 수 있는 계층 관계가, 트리에서는 한 번 접는 것으로 드러납니다. 응답에 어떤 필드가 있는지부터 파악해야 하는 상황이라면 포맷터보다 빠릅니다.
JSON에서 자주 나는 오류
- 후행 콤마 — 마지막 항목 뒤의
,는 허용되지 않습니다 - 작은따옴표 — 키와 문자열은 반드시 큰따옴표여야 합니다
- 주석 —
//나/* */를 쓸 수 없습니다 - 따옴표 없는 키 —
{ name: "값" }은 자바스크립트이지 JSON이 아닙니다 - NaN·Infinity·undefined — JSON에 없는 값입니다. 빈 값은
null로 씁니다
이 다섯 가지가 실무에서 마주치는 JSON 오류의 대부분입니다. 공통점은 전부 자바스크립트에서는 되지만 JSON에서는 안 되는 것이라는 점입니다. 코드에서 복사해 왔다면 이쪽부터 확인하세요.
자주 묻는 질문
- JSON 포맷터와 무엇이 다른가요?
- 포맷터는 들여쓰기를 정리해 텍스트로 보여주고, 뷰어는 접고 펼칠 수 있는 트리로 보여줍니다. 수천 줄짜리 API 응답에서 필요한 필드만 찾을 때는 트리가 훨씬 빠릅니다. 정리된 텍스트를 그대로 복사해야 한다면 JSON 포맷터를 쓰세요.
- 오류 위치가 실제 문제와 다른 곳을 가리킵니다.
- JSON 파서는 문법이 깨진 지점이 아니라 "더는 해석할 수 없게 된 지점"을 알려줍니다. 그래서 따옴표를 빼먹거나 콤마를 더 찍으면 오류 위치가 그보다 뒤에 표시되곤 합니다. 표시된 줄의 바로 앞줄부터 살펴보면 대개 원인이 나옵니다.
- 마지막 항목 뒤의 콤마는 왜 오류인가요?
- JSON 표준은 후행 콤마(trailing comma)를 허용하지 않습니다. 자바스크립트 객체 리터럴에서는 허용되기 때문에 코드에서 복사해 붙여넣을 때 가장 흔히 생기는 오류입니다. 주석(//)도 마찬가지로 JSON에서는 쓸 수 없습니다.
- 큰 파일을 넣어도 괜찮나요?
- 모든 처리가 브라우저 안에서 이루어지므로 데이터는 서버로 전송되지 않습니다. 다만 수십 MB 수준이면 브라우저 메모리를 많이 쓰므로 필요한 부분만 잘라 넣는 편이 쾌적합니다.