API 응답으로 받은 JSON이 한 줄에 죽 이어져 있다. 중괄호와 대괄호가 뒤엉켜서 어디가 어디인지 알 수가 없다. 콘솔에서 눈으로 추적하다 보면 괄호 하나를 빼먹은 오류를 찾는 데만 30분이 걸린다.
JSON이 읽기 어려운 이유
서버에서 전송하는 JSON은 용량을 줄이기 위해 공백과 줄바꿈을 모두 제거한 상태(minified)다. 데이터 전송에는 효율적이지만, 사람이 읽기에는 최악이다.
예시 압축된 JSON
{"name":"홍길동","age":30,"skills":["JavaScript","Python"],"address":{"city":"서울","zip":"06000"}}
위 데이터는 짧아서 그나마 읽히지만, 실무에서 다루는 JSON은 수백~수천 줄이다. 들여쓰기 없이는 구조를 파악할 수 없다.
포맷팅하면 이렇게 바뀐다
같은 데이터를 정렬(prettify)하면 구조가 한눈에 보인다.
{
"name": "홍길동",
"age": 30,
"skills": [
"JavaScript",
"Python"
],
"address": {
"city": "서울",
"zip": "06000"
}
}들여쓰기가 생기면서 어떤 키가 어떤 객체에 속하는지, 배열에 몇 개의 항목이 있는지 바로 파악된다.
JSON 문법 오류가 나는 흔한 원인
JSON은 규칙이 엄격하다. 쉼표 하나, 따옴표 하나만 틀려도 전체가 파싱되지 않는다.
| 오류 유형 | 잘못된 예 | 올바른 예 |
|---|---|---|
| 마지막 쉼표(trailing comma) | {"a":1,} | {"a":1} |
| 작은따옴표 사용 | {'a':1} | {"a":1} |
| 키에 따옴표 누락 | {a:1} | {"a":1} |
| 주석 사용 | {"a":1 // 값} | {"a":1} |
| 숫자 앞 0 | {"a":01} | {"a":1} |
JavaScript 객체 문법과 헷갈려서 실수하는 경우가 많다. JSON에서는 키에 반드시 큰따옴표를 쓰고, 주석은 허용되지 않으며, 마지막 항목 뒤에 쉼표를 넣으면 안 된다.
온라인에서 바로 정리하고 검증하기
IDE에 플러그인을 설치하는 방법도 있지만, 빠르게 한 번 확인할 때는 JSON 포매터에 붙여넣는 게 빠르다. 포맷팅, 문법 검증, 키 정렬, 압축 기능을 한 화면에서 처리할 수 있고, 파일 크기나 중첩 깊이 같은 통계 정보도 함께 나온다.
- API 응답이나 설정 파일의 JSON 데이터를 복사해서 입력창에 붙여넣는다.
- 포맷 버튼을 누르면 들여쓰기가 적용된 정렬 결과가 나온다. 문법 오류가 있으면 위치와 내용이 표시된다.
- 수정한 뒤 압축(minify) 기능으로 다시 한 줄로 만들어서 서버에 전송할 수 있다.
실무에서 JSON을 다루는 팁
- API 디버깅
- 응답이 예상과 다를 때, 먼저 포맷팅해서 구조를 확인한다. 중첩된 객체 안에 원하는 데이터가 들어 있는 경우가 많다.
- 설정 파일 편집
- package.json, tsconfig.json 같은 설정 파일을 수정한 뒤 검증을 돌려보면 실수를 사전에 잡을 수 있다.
- 데이터 비교
- 키 정렬 기능으로 두 JSON의 키 순서를 통일하면 diff 비교가 훨씬 수월해진다.
괄호 하나 때문에 배포가 실패하는 건 흔한 일이다. 30분 동안 눈으로 찾을 걸 3초 만에 끝낼 수 있으니, 검증 한 번 돌리는 습관이 시간을 아껴준다.