API를 호출하면 응답이 JSON으로 오는 경우가 많다. 그런데 한 줄로 쭉 이어진 형태라서 어디가 어딘지 파악하기 어렵다. 들여쓰기가 된 보기 좋은 형태로 바꿔야 디버깅이 가능하다.
Minified JSON의 문제
서버에서 응답을 보낼 때 용량을 줄이기 위해 공백과 줄바꿈을 제거한다. 이게 minified JSON인데, 기계가 읽기에는 문제없지만 사람이 보기에는 거의 불가능하다. 특히 중첩된 객체나 배열이 많으면 구조를 파악하기 힘들다.
예를 들어 {"name":"홍길동","age":30,"address":{"city":"서울","district":"강남구"}} 같은 게 있으면, 어디까지가 address 객체인지 한눈에 안 들어온다.
JSON 포맷터 사용법
JSON 포맷터에 minified JSON을 붙여넣으면 들여쓰기가 된 보기 좋은 형태로 변환된다. 각 레벨마다 들여쓰기가 되어서 구조가 명확하게 보인다.
변환 전후 비교
변환 전: {"users":[{"id":1,"name":"김철수"},{"id":2,"name":"이영희"}]}
변환 후:
{"users": [ { "id": 1, "name": "김철수" }, { "id": 2, "name": "이영희" } ]}JSON 유효성 검사
JSON 형식이 잘못되면 API 연동이 안 된다. 쉼표 하나, 따옴표 하나가 빠져도 파싱 에러가 난다. JSON 포맷터는 형식 검사도 해줘서, 문법 오류가 있으면 어디가 잘못됐는지 알려준다.
개발 시 활용 팁
크롬 개발자 도구의 Network 탭에서 API 응답을 볼 수 있지만, 복잡한 응답은 별도 도구로 보는 게 편하다. 응답 내용을 복사해서 포맷터에 붙여넣으면 구조를 훨씬 쉽게 파악할 수 있다.
Postman 같은 API 테스트 도구도 JSON을 예쁘게 보여주지만, 간단한 확인 용도로는 웹 기반 JSON 포맷터가 더 빠르다.