클라이언트에서 서버에 원하는 바를 request(요청)을 하게되면,
서버는 요청사항에 맞는 결과를 response(응답)하는 형태로 동작하게 된다.
AJAX ( Asynchronous Javascript And XML)
웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술을 의미한다.
대표적인 예로는 XHR (XMLHttpRequest)라는 오브젝트.
Axios or fetch API
이 부분에 대해서는 아직 나의 내공이 부족하므로 나중에 꼭 공부해서 포스팅 하도록 하자.
이러한 이유들로 최근에는 JSON을 많이 사용하고 있다.
const rabbit = {
name: 'tori',
color: 'white',
size: null,
birthDate: new Date(),
Something: undefined,
jump: function () {
console.log(`${this.name} can jump!`);
},
};
let json = JSON.stringify(rabbit);
console.log(json)
// {"name":"tori","color":"white","size":null,"birthDate":"2021-08-09T06:32:24.336Z"}
let json1 = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json1)
//"{\"name\":\"tori\",\"color\":\"white\",\"size\":null}"
let json2 = JSON.stringify(rabbit, (key, value) => {
return key === 'name' ? 'DK' : value;
});
console.log(json2)
//"{\"name\":\"ellie\",\"color\":\"white\",\"size\":null,\"birthDate\":\"2021-08-09T06:32:24.336Z\"}"
let json = JSON.stringify(rabbit);
let obj1 = JSON.parse(json)
console.log(obj1)
/*{ name: "tori",
color: "white",
size: null,
birthDate: "2021-08-09T06:32:24.336Z"
}*/
이때 birthDate property의 경우, Date객체에서 얻어온 값이 아니다.
JSON형식의 문자열을 그대로 파싱해온 string이다.
때문에 rabbit.birthDate.getDate()는 가능하나, obj1.birthDate.getDate()는 Error가 발생.
이럴때 revive에 함수를 넣어 Date객체를 반환하도록 할 수 있다.
const obj2 = JSON.parse(json, (key, value) => {
return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj2)
/*{ name: "tori",
color: "white",
size: null,
birthDate: Mon Aug 09 2021 15:32:24 GMT+0900 (한국 표준시)
}*/
나는 JSON을 서버에 데이터를 보내기 위해 써본적은 없다.
다만 todo list 만들기를 할 때 todo를 localstorage에 Array형태의 string으로 저장하고,
저장한 데이터를 JS에서 사용할 수 있는 Array로 파싱하기 위해 사용하였다.
JSON의 개념을 아예 모르고 사용했기에, JSON에 대해 알아보고자 공부해보았다.
JSON에 대해 알았으니 AJAX, fetch, Axios들도 공부해 봐야 할텐데...
아마 날씨나 지역 같은것을 얻어올 때 사용해 볼 수 있을거 같다.
아직은 내 실력이 부족하므로 사용하게 될 때 공부해서 포스팅 하도록 하겠다.