API 응답 데이터가 한 줄로 쭉 늘어져서 돌아왔다. 중괄호와 대괄호가 뒤엉킨 채로 수백 자다. 어디서 오류가 난 건지 눈으로 찾기 어려울 때, 일단 정렬부터 해야 구조가 보인다.
JSON을 정렬해야 하는 이유
API 통신이나 설정 파일에서 돌아오는 JSON은 대부분 공백 없이 압축된 상태다. 사람이 읽기엔 불편하고, 구조 파악은 거의 불가능하다.
정렬 전
{"name":"홍길동","age":30,"address":{"city":"서울","zip":"06000"},"tags":["dev","design"]}정렬 후
{
"name": "홍길동",
"age": 30,
"address": {
"city": "서울",
"zip": "06000"
},
"tags": ["dev", "design"]
}들여쓰기 하나만 추가해도 어떤 키가 어떤 값을 가지고 있는지 바로 파악된다.
JSON 문법 오류 자주 나는 곳
JSON은 문법이 엄격하다. 쉼표 하나, 따옴표 하나 빠져도 파싱 에러가 난다. 자주 실수하는 부분은 정해져 있다.
- 마지막 쉼표: 배열이나 객체의 마지막 항목 뒤에 쉼표를 남기면 오류. JavaScript에서는 허용되지만 JSON에서는 안 된다.
- 작은따옴표: JSON은 반드시 큰따옴표(")만 허용한다. 'name' 대신 "name"으로 써야 한다.
- 키에 따옴표 누락: {name: "홍길동"}은 JavaScript 객체 문법이지 JSON이 아니다.
- 주석: JSON에는 주석이 없다. // 이나 /* */ 를 넣으면 파싱이 실패한다.
참고 에러 메시지에 "Unexpected token" 또는 "position 42"라고 나오면, 해당 위치 근처에서 쉼표나 따옴표를 확인해 보면 대부분 해결된다.
압축은 언제 쓸까
정렬이 사람을 위한 거라면, 압축(Minify)은 기계를 위한 작업이다. 공백과 줄바꿈을 전부 제거해서 파일 크기를 줄인다. API 응답 속도를 높이거나, 설정 파일을 배포할 때 불필요한 용량을 줄이고 싶다면 압축을 건다.
다만 압축된 JSON은 디버깅이 어려우니까, 개발 단계에서는 정렬된 상태로 작업하고 배포 직전에만 압축하는 게 일반적이다.
온라인에서 바로 처리하기
디버깅할 때마다 에디터 확장을 찾아 설치하기보다, JSON 포매터에 데이터를 붙여넣는 게 더 빠를 때가 있다. 왼쪽 입력창에 JSON을 넣고 정렬 버튼을 누르면 오른쪽에 들여쓰기된 결과가 바로 나온다.
- JSON 데이터를 입력창에 붙여넣는다.
- 들여쓰기 크기(2칸, 4칸, 탭)와 키 정렬 여부를 선택한다.
- 정렬, 검증, 압축 중 원하는 버튼을 누른다.
- 결과를 복사해서 코드에 적용한다.
파일 크기, 깊이, 키 개수 같은 통계 정보도 함께 표시되니 데이터 구조를 빠르게 파악하는 데 도움이 된다.
JSON 오류는 원인을 찾으면 고치는 데 1초다. 문제는 그 원인을 찾는 시간이다. 정렬된 상태로 보면 대부분 금방 보인다.