신기한 연구소

자바스크립트에서 JSON 사용하기.

화면 간 데이터 이동이나 다른 시스템과 데이터 송수신을 위해 JSON을 사용한다.

JSON으로 전송하는 값은 숫자나 문자다.

1,2,100 같은 숫자값이나 "재고수량" 처럼 문자값을 전달한다.

숫자나 문자라면 객체 또한 전달이 가능하다.

객체도 숫자와 문자로 구성되어 있기 때문이다.

객체는 속성과 메서드로 구성되어 있다.

위 소스에서 객체 person도 JSON으로 전송이 가능하다.

다른 말로 다른 시스템에 객체를 전달할 수 있다는 의미다.

주의할 점 하나를 꼽자면 자바스크립트에서 문자열은 싱글과 더블 쿼테이션(따옴표) 모두 가능하다.

하지만 JSON에서 문자는 더블 쿼테이션만 가능하다. (큰따옴표)

배열도 JSON으로 가능.

자바스크립트의 배열도 JSON으로 전달 가능하다.

자바스크립트에서 흔히 사용하는 배열이다.

숫자 또는 문자로 값을 넣을 수 있고 혼용해서 사용이 가능하다.

JSON에서도 다음과 같이 배열을 사용할 수 있다.

전체를 배열로 해서 객체를 값으로 사용할 수 있고 객체 값에도 배열을 사용할 수 있다.

위 값을 보면 전체가 배열로 묶여 있고 그 안에 "contents"도 배열이다.

JSON은 객체?

JSON과 객체는 쌍둥이처럼 닮았다.

위에는 객체, 아래는 JSON이다. 

같은 듯 다르다.

먼저 주석이 없다.

그리고 name 같은 프로퍼티 명에도 더블쿼테이션(큰따옴표)이 있다.

JSON.parse()

이 이야기를 하는 이유는 JSON 데이터를 파싱 하면 자바스크립트 객체가 된다.

통신이나 화면 전환 값으로 넘어오는 것을 가정한 데이터가 jsonText다.

그 값을 parse 메서드를 통해 값을 추출할 수 있다.

JSON.parse()는 JSON 문자열을 자바스크립트 형식 데이터나 객체로 변환해 주는 메서드이다.

JSON.stringify()

어디선가 보내온 JSON 문자열 데이터를 자바스크립트에서 활용하기 위해 parse()를 사용했다.

그 반대로 자바스크립트 객체를 JSON 문자열 데이터로 변환도 해야 한다.

그래야 다른 곳에 보낼 수 있다.

배달앱에서 주문을 하면 배달기사에게 요청이 간다.

라이더 업체의 서버에 배달앱에서 주문 정보를 보내야 한다.

그 정보를 받아서 parse() 한 후 목록에 띄운다.

배달기사들의 폰에서 해당 목록을 조회할 수 있게 되고 선택 후 배달하면 된다.

배달앱 개발할 때 라이더 업체와 정보를 JSON 문자열로 정의했던 기억이 있다.

var rider에서 해당 값들은 화면에서 받은 값으로 채우면 된다.

받았다 치고 값을 임의로 정하고 테스트를 한 것이다.

보통은 우리가 원하는 데이터보다 더 많은 정보를 보낼 때가 있다.

우리 외 다른 시스템들과 통신을 하다 보니 점점 많아지게 된 것이다.

다 받기엔 너무 정보가 많고 딱 필요한 부분만 필터 해서 받는 방법이 있다.

JSON.stringify에서 두 번째 인수가 바로 필터다.

배열 형식으로 원하는 프로퍼티 이름을 지정하면 필요한 정보만 받을 수 있다.

var jsonText = JSON.stringify(rider, ["shop", "menu"], 4);

위 코드에 세 번째 인수가 추가되었는데 숫자다.

한 줄로 쭉 나오던 정보를 들여 쓰기를 적용해 보기 편하게 만들어준다.

훨씬 보기가 편해졌다.

마무리.

xml로도 데이터 전송 포맷이 가능하다.

하지만 xml은 DOM 객체로 변환되고 다시 자바스크립트에서 함수로 값을 찾는 과정이 있다.

하지만 JSON은 어느 시스템이나 개발 언어에서 사용 가능한 데이터 교환 포맷이다.

개발자도 한 번 사용하면 그 편리함을 찾게 될 것이다.

이번 포스팅은 여기까지다.

잘못된 정보는 댓글로~!