'json 이쁘게 보기'에 해당되는 글 1건

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

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

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

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 를 잘 이용하는 방법입니다. 

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" 입니다. 샘플 코드 보실까요?

앞선 코드의 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