[ javascript 코딩 ] JSON.stringify() 사용방법 - JSON 가독성 높이기

안녕하세요. 제임스 입니다. 

JSON.stringify ( value[, replacer[, space]] ) 

위 함수를 이용하여 문자열의 가독성을 높이는 방법을 알아 보겠습니다. 

var lottoDrawNum = 
    {"bnusNo":42,"firstAccumamnt":17064247876,"firstWinamnt":4266061969,
    "returnValue":"success","totSellamnt":73065981000,    "drwtNo3":13,
    "drwtNo2":12,"drwtNo1":3,"drwtNo6":32,"drwtNo5":31,"drwtNo4":18,
    "drwNoDate":"2018-05-05","drwNo":805,"firstPrzwnerCo":4};
 
console.log('JSON.stringify(a) = \n'+JSON.stringify(a));

var lottoDrawNum 이라는 변수값이 JSON string 입니다. 

변수명을 보시면 아시겠지만 나눔로또 (805회) 당첨 번호 정보 입니다. 

이를 위와 같이 호출 하게 되면 결과는 아래와 같이 나옵니다. 

JSON.stringify(a) = 

{"bnusNo":42,"firstAccumamnt":17064247876,"firstWinamnt":4266061969,"returnValue":"success","totSellamnt":73065981000,"drwtNo3":13,"drwtNo2":12,"drwtNo1":3,"drwtNo6":32,"drwtNo5":31,"drwtNo4":18,"drwNoDate":"2018-05-05","drwNo":805,"firstPrzwnerCo":4}

가독성이 좀 떨어집니다.

만약 정말... 엄청 긴 json 값이 있다면... 상상하기도 싫을 겁니다.

가독성을 뛰어나게 해줄 수 있는 방법이 있습니다. 

바로 JSON.stringify() 의 replace 와 space 파라미터를 활용 하는 방법입니다. 

더 정확하게는 replace 는 사용하지 않고 space 를 잘 이용하는 방법입니다. 

console.log('JSON.stringify(a, null, 2) = \n'+JSON.stringify(a, null, 2));

replacer 에 null (사용하지 않습니다) 을 space 에 2를 입력했습니다. 

space 파라미터에 숫자값이 들어 갈 경우 최종 문자열의 간격을 제어 할 수 있습니다. 

2를 입력 함으로써 각각의 문자열 (key:value, 또는 {, } 등등)의 간격을 스페이스 2칸으로 지정 했습니다. 

위 코드를 실행 시키면 아래와 같은 결과가 나옵니다. 

JSON.stringify(a, null, 2) = 

{

  "bnusNo": 42,

  "firstAccumamnt": 17064247876,

  "firstWinamnt": 4266061969,

  "returnValue": "success",

  "totSellamnt": 73065981000,

  "drwtNo3": 13,

  "drwtNo2": 12,

  "drwtNo1": 3,

  "drwtNo6": 32,

  "drwtNo5": 31,

  "drwtNo4": 18,

  "drwNoDate": "2018-05-05",

  "drwNo": 805,

  "firstPrzwnerCo": 4

}

가독성이 정말 좋아 졌습니다. 

첫번째 "{" 이후 줄바꿈이 일어나고 첫번째 key:value 값이 프린트 되는데 두칸의 스페이스 공간이 생겼습니다. (직접 코드 작성해서 테스트 해보세요 ^^)

space 에 숫자뿐만 아니라 TAB 효과를 주는 문자를 사용 할 수 있습니다. 

이미 많이 알고 있는 TAB 효과를 주는 문자는 !!! "\t" 입니다. 샘플 코드 보실까요?

console.log('JSON.stringify(a, null, \\t) = \n'+JSON.stringify(a, null, '\t'));

앞선 코드의 2 대신에 '\t' 가 들어 갔습니다. 

실행 결과는 아래와 같습니다. 

JSON.stringify(a, null, \t) = 

{

"bnusNo": 42,

"firstAccumamnt": 17064247876,

"firstWinamnt": 4266061969,

"returnValue": "success",

"totSellamnt": 73065981000,

"drwtNo3": 13,

"drwtNo2": 12,

"drwtNo1": 3,

"drwtNo6": 32,

"drwtNo5": 31,

"drwtNo4": 18,

"drwNoDate": "2018-05-05",

"drwNo": 805,

"firstPrzwnerCo": 4

}

문자열간 간격이 확실히 넓어 졌습니다. 실제로 위 코드를 실행 해보신 후 결과 값에 마우스 커서를 가져가 보면 탭 공간으로 한칸만 잡혀 있습니다. 

JSON 문자열 가독성 높이기 JSON.stringify() 함수의 세번째 인자 "space" 부분만 잘 사용하면 간단하게 할 수 있습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D