JavaScript에서 JSON 문자열을 보기 좋게 포맷하는 방법

JavaScript에서 JSON 문자열을 사람이 읽기 쉬운 형태로 포맷하려면 JSON.stringify() 메서드에 추가 매개변수를 활용하면 됩니다. 이 메서드는 세 번째 인자로 들여쓰기(공백) 개수를 지정할 수 있어, 한 줄로 압축된 JSON을 계층 구조가 잘 드러나는 '예쁜(pretty)' 형식으로 변환해 줍니다.

JSON.stringify()의 기본 문법

JSON.stringify()는 다음과 같은 세 가지 매개변수를 받습니다.

• value: JSON 문자열로 변환할 객체 또는 값
• replacer: 특정 속성만 선택적으로 직렬화할 때 사용하는 함수 또는 배열 (선택 사항)
• space: 들여쓰기에 사용할 공백의 개수 (선택 사항)

예제 코드

아래 예제에서는 일반적인 JSON 출력과 들여쓰기를 적용한 pretty JSON 출력을 비교합니다.

var details = {
    studentId: 101,
    studentFirstName: 'David',
    studentLastName: 'Miller',
    studentAge: 21,
    subjectDetails: {
        subjectId: 'JavaScript_101',
        subjectName: 'Introduction to JavaScript'
    }
};
console.log("Not Pretty JSON Format=")
console.log(JSON.stringify(details));
console.log("Pretty JSON Format=")
console.log(JSON.stringify(details, null, 3));

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력하세요.

node fileName.js

여기서는 파일 이름이 demo127.js라고 가정합니다.

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\JavaScript-code> node demo127.js
Not Pretty JSON Format=
{"studentId":101,"studentFirstName":"David","studentLastName":"Miller","studentAge":21,"subjectDetails":{"subjectId":"JavaScript_101","subjectName":"Introduction to JavaScript"}}
Pretty JSON Format={
   "studentId": 101,
   "studentFirstName": "David",
   "studentLastName": "Miller",
   "studentAge": 21,
   "subjectDetails": {
      "subjectId": "JavaScript_101",
      "subjectName": "Introduction to JavaScript"
   }
}

핵심 정리

세 번째 매개변수인 space 값을 지정하지 않으면 JSON이 한 줄로 압축되어 출력되고, 숫자(예: 3)를 지정하면 해당 개수만큼의 공백으로 들여쓰기가 적용됩니다. 이처럼 JSON.stringify(details, null, 3)처럼 작성하면 디버깅이나 로그 확인 시 훨씬 가독성 높은 JSON 데이터를 얻을 수 있습니다.