10. JSON 개념 정리 와 활용방법

HTTP (Hyper Text Transfer Protocol) : HyperText를 클라이언트와 서버가 어떻게 주고받을지를 정한 프로토콜

-Client는 Server에 'Request' 할 수 있고,

-Server는 Client에 Request에 맞는 'Response'를 해준다.

​

HyperText: 인터넷에서 사용되는 하이퍼링크 이외에도 문서나 이미지들

​

AJAX(Asynchronous JavaScript And XML) : 웹페이지에서 동적으로 서버에게 데이터를 주고받을수 있는 기술

- 대표적으로 XHR(XMLHttpRequest) :브라우저에서 제공하는 Object중에 하나이다.

​

최근에는 fetch API 도 추가되었지만 ie에서는 지원하지 않는다.

​

XML : HTML과 마찬가지로 데이터를 표현할 수 있는 표현방법. (현재는 가독성도 좋지않고 파일크기도 커지기때문에 많이 사용되고 있지는 않는다.)

​

★JSON(JavaScript Object Notation): 자바스크립트의 object가 key와 value로 이루어진것처럼 같은방식으로 표현함.

-프로그래밍 언어와 상관 없이 직렬화 시킬 수 있어서 많이 사용한다.

*직렬화 : Object를 문자열로 바꾸는것 (serialize)

*역직렬화 : String을 Object로 바꾸는것 (deserialize)

//JSON

//1. Object -> JSON
//stringify(obj)
let json = JSON.stringify(true);
console.log(json);

json = JSON.stringify(['apple','banana']);
console.log(json);

const rabbit = {
    name:'tori',
    color:'white',
    size:null,
    birthDate : new Date(),
    jump: ()=>{
        console.log(`${name} can jump!`);  //함수는 오브젝트에 들어있는 데이터가 아니기때문에 제외된다. 자바스크립트전용 특별한 데이터도 포함시키지 않는다.
    },
};

json = JSON.stringify(rabbit);
console.log(json);

json = JSON.stringify(rabbit,["name","size"]); //원하는 프로퍼티만 골라서 json으로 변환이 가능하다
console.log(json);

json = JSON.stringify(rabbit,(key,value)=>{
    console.log(`key: ${key}, value: ${value}`);
    return key ==='name'?'banban':value;
}); //원하는 프로퍼티만 골라서 json으로 변환이 가능하다
console.log(json);


//2. JSON -> Object
//parse(json)
console.clear();
json = JSON.stringify(rabbit);
const obj = JSON.parse(json, (key,value)=>{
    console.log(`key: ${key}, value: ${value}`);
    return key =='birthDate' ? new Date(value) : value;
});
console.log(obj);
rabbit.jump();

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());