JSON

JSON (JavaScript Object Notation) : 성, 값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷 DLA이다. 

 

 

HTTP (Hypertext Transfer Protocal) 

: 클라이언트와 서버가 어떻게 통신할 수 있는 지를 정의한 것 

Hypertext: 는 웹의 하이퍼링크뿐만 아니라 전반적인 리소스(문저, 이미지파일), 등을 다 포함한 것. 

 

 

AJAX(Asynshronous Javascript And XML) 

: 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술 

 

EX) XHR (XMLHttpRequest)=object  

:object를 이용함으로써 간단히 데이터를 주고 받을 수 있다. 

 

XML : HTML과 같은 마크업 언어중 하나로 데이터를 표현할 수 있는 방법 중 하나이다. 

그러나 XML을 사용하면 가독성이 떨어지기 때문에 최근에는 fetch()API나 JSON을 많이 이용한다. 

XML은 <> <> 이렇게 시작값과 끝값으로 표현하여 메모리를 많이 차지하는데 

JSON의 경우 키: 값 으로 표현하기 때문에 XML보다 확실히 용량이 더 가볍다.

 

JSON(JavaScript Object Notation) 정의 

 

1. object {key: value} 

 

2. 브라우저뿐만 아니라 모바일에서도 데이터를 서버와 주고 받을 때 serialization(직렬화)를 위해 또는 서버와 통신하지 않아도 object를 시스템에 저장할 때에도 json데이터 타입을 이용한다. 

 

3. 가장 간단한 데이터 인터체인지 포멧 

 

4. 텍스트를 기반으로 하여 가볍고, 가독성이 좋다 

 

5. 프로그래밍 언어나 플랫폼과 상관없이 사용할 수 있다. 

 

=> 이렇게 키, 값으로 구성되어 있는 JSON에서 데이터를 추출하는 것을 파싱한다고 한다. 

 

 

Json으로 데이터 주고받는 방식 

object => string 으로 변환하는 것 serialize(직렬화) 

string => object 으로 변환하는 것 deserialize

 

JSON 객체에는 두 가지 메소드가 있다. 

Object를 string으로 바꿔주는 stringify 그리고 반대의 역할을 하는 parse 

 

 

parse(text: string, reviver?: (this: any, key: string, value: any) => any): any;

=> json에 string 데이터 넣으면, any타입의 object로 변환되며, 

=> callback함수이고 결과값을 변형한다는 뜻으로 string을 object로 만들 때 과정을 조정하고 싶다면 추가하는 것

 

 stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;

=>어떤 타입을 받아와서 string으로 변환해준다. 

=>string으로 만들 때 세밀하게 조장하고 싶다면 callback함수 추가

 

 

 

#코드 통해 보기 

1.Stringify 

 

=>{"name":"bob","color":"white","size":null,"birthDate":"2021-08-23T13:43:37.170Z"} =>date라는 object가 string으로 변환됨 

★여기서 jump라는 메소드는 json에 포함되지 않는다!

왜냐하면 함수는 object에 있는 데이터가 아니기 때문이다. 

replacer  callback함수 

=>key:,value:[object Object]
json.js:28 key:name,value:bob
json.js:28 key:color,value:white
json.js:28 key:size,value:null
json.js:28 key:birthDate,value:2021-08-23T13:43:37.170Z
json.js:28 key:jump,value:()=>{
        console.log(`${name} can jump!`);
    }
json.js:31 {"name":"hojin","color":"white","size":null,"birthDate":"2021-08-23T13:43:37.170Z"}

callback함수에서 이름을 받으면 bob에서 hojin으로 바꿀 수 있게 조정할 수도 있다. 

배열 

callback함수 혹은 배열을 넣어 추출하고자 하는 데이터를 세밀하게 만들 수도 있다. 

=>{"name":"bob","color":"white"} 

 

 

2. Parse

 

=>{name: "bob", color: "white", size: null, birthDate: "2021-08-23T13:53:49.656Z"}

 

rabbit의 객체에 메소드를 이용하여 => can jump!를 출력하게 할 수 있다.

그러나 함수는 직렬화 할 때 포함이 되지 않았다. 

즉 cjdma rabbit=> json으로 변환할 때, jump메소드를 가져가지 못해 obj에는 jump api를 이용할 수 없다.

 

=> 23(rabbit이 object)라 가져올 수 있다.

Uncaught TypeError: obj.birthDate.getDate is not a function

이렇게 에러가 뜨는데, 그 이유는 obj의 birthDate는 string이기 때문이다. 

따라서 이때는 reviver(callback)함수로 세밀하게 조정하여 추출할 수 있다. 

: return key==='birthDate'? new Date(value): value;(해석)

만약 key값이 birthDate라면 새로운 object(date)를 만들거고 아니면 그냥 value를 쓴다.

=>23,23 이렇게 출력된다.