API 응답 JSON 보기 좋게 정리하는 방법

API 응답을 받았는데 한 줄로 쭉 이어진 JSON을 본 적 있나요? 데이터를 파악하기가 너무 어렵습니다. JSON을 보기 좋게 정리하는 방법을 알아보겠습니다.

JSON이란?

JavaScript Object Notation의 약자로, 데이터를 주고받을 때 사용하는 형식입니다. 키-값 쌍으로 구성되어 있고, 사람이 읽을 수 있으면서 컴퓨터도 쉽게 파싱할 수 있습니다.

Minified vs Pretty

Minified (압축): 공백, 줄바꿈 없이 한 줄로 압축. 파일 크기가 작아서 전송에 유리.

Pretty (정리): 들여쓰기와 줄바꿈으로 구조를 보기 좋게 표시. 디버깅에 유리.

압축된 JSON 예시

{"name":"홍길동","age":30,"skills":["JavaScript","Python"],"address":{"city":"서울","zip":"12345"}}

정리된 JSON 예시

{
  "name": "홍길동",
  "age": 30,
  "skills": [
    "JavaScript",
    "Python"
  ],
  "address": {
    "city": "서울",
    "zip": "12345"
  }
}

온라인으로 정리하기

JSON 포매터에 압축된 JSON을 붙여넣으면 바로 정리된 형태로 볼 수 있습니다. 에러가 있는 JSON도 어디가 잘못됐는지 알려줍니다.

개발 도구 활용

크롬 개발자 도구 Network 탭에서 응답을 보면 JSON이 예쁘게 정리되어 있습니다. 하지만 콘솔에 직접 출력하면 압축 형태입니다. console.log(JSON.stringify(data, null, 2))로 정리해서 볼 수 있습니다.

자주 발생하는 JSON 에러

유효성 검사

JSON 문법이 맞는지 확인하는 것도 중요합니다. JSON 정리 도구는 형식 오류가 있으면 어느 줄, 어느 위치가 문제인지 알려줍니다.

API 디버깅 팁

Postman이나 Insomnia 같은 API 테스트 도구에서도 JSON을 정리해서 보여줍니다. 하지만 빠르게 웹에서 확인하고 싶을 때는 온라인 JSON 뷰어가 더 편합니다.