API 응답이 한 줄로 쭉 이어져서 뭐가 뭔지 알아볼 수가 없다. 중괄호와 대괄호가 뒤엉킨 JSON 문자열을 들여쓰기 없이 읽으려면 눈이 아프다.
JSON 포맷팅이 필요한 순간
개발 중에 JSON 데이터를 다루는 상황은 생각보다 잦다.
- API 응답 데이터 확인할 때
- 설정 파일(package.json, config.json) 편집할 때
- 로그에서 JSON 구조를 파악해야 할 때
- 팀원에게 데이터 구조를 공유할 때
특히 프로덕션 환경에서 JSON은 용량을 줄이기 위해 공백과 줄바꿈을 전부 제거한 상태(minified)로 전송된다. 사람이 읽으려면 다시 펼쳐야(pretty-print) 한다.
포맷터로 할 수 있는 것
보기 좋게 정리 (Pretty Print)
들여쓰기와 줄바꿈을 자동으로 넣어서 계층 구조가 한눈에 보이게 만든다. 들여쓰기 간격은 2칸 또는 4칸을 선택할 수 있다.
압축 (Minify)
반대로 불필요한 공백과 줄바꿈을 전부 제거해서 용량을 줄인다. API 요청 바디에 넣거나, 저장 공간을 절약할 때 쓴다.
키 정렬
JSON 객체의 키를 알파벳순으로 정렬하면 diff 비교가 깔끔해진다. 같은 데이터인데 키 순서만 달라서 변경 사항으로 잡히는 문제를 방지할 수 있다.
JSON 문법 오류 찾기
JSON은 문법이 엄격하다. 쉼표 하나 빠지거나, 키에 큰따옴표를 안 쓰면 파싱 에러가 난다.
// 잘못된 JSON 예시
{name: "홍길동", age: 30,} // 키에 따옴표 없음, 마지막 쉼표이런 오류는 코드 에디터에서도 잡아주지만, 복사해온 JSON 조각이 유효한지 빠르게 확인하고 싶을 때는 JSON 포맷터에 붙여넣으면 된다. 문법 오류가 있으면 어느 위치에서 틀렸는지 바로 표시해준다.
TIP JSON에서 가장 흔한 실수 세 가지: 마지막 항목 뒤 쉼표(trailing comma), 작은따옴표 사용, 주석 삽입. 이 세 가지는 JSON 표준에서 허용하지 않는다.
JSON을 자주 다루는 개발자라면 포맷터를 브라우저 즐겨찾기에 넣어두는 게 좋다. 데이터 구조를 눈으로 확인하는 시간이 줄면 디버깅 속도도 같이 빨라진다.