클라이언트와 서버가 웹상에서 소통하기 위한 규약을 HTTP라고 한다. AJAX는 동적으로 서버에게 데이터를 주고 받을 수 있는 기술이다. 대표적으로 XHR 오브젝트로, 이것은 브라우저가 제공하는 오브젝트 중에 하나 이 오브젝트를 이용하면 서버에게 데이터를 쉽게 받아올 수 있다. fetch() API를 사용하면 쉽게 사용이 가능하나 비교적 최신으로 익스플로러에서 사용할 수 없다. XMLHttpRequest 오브젝트와 fetch() api로 서버에게 XML 데이터 포맷으로 전달하던 것이 JSON 포맷 형식으로 많이 넘어가는 추세이다.
참고로 XML은 마크업 언어 중 하나로 태그를 사용해서 데이터를 표현한다. 서버와 데이터를 주고 받을 때는 다양한 포맷으로 주고 받을 수 있지만 초기에 이 XML로 이름을 지어서 기술과 오브젝트에 XML이 들어간다.
JSON(JavaScript Object Notation)은 데이터를 송신하기 위해 직렬화 한 데이터를 C, C#, JAVA, PHP, Python 등 다양한 언어로 해당 언어에 맞게 변환이 가능하다는 엄청난 강점이 있다. 직렬화(Serialize)란 오브젝트를 String으로 변환하는 것, 역직렬화(Deerialize)은 그 반대이다.
// Object를 String으로 변환
let json = JSON.stringify(true);
console.log(json); // true (문자열)
json = JSON.stringify(["apple", "banana"]);
console.log(json); // ["apple", "banana"]
const rabbit = {
name: "tori",
color: "white",
size: null,
birthDate: new Date(),
symbol: Symbol("id"),
jump: () => {
console.log(`${this.name} can jump!`);
},
};
json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tori","color":"white","size":null,"birthDate":"2021-03-02T13:30:05.733Z"}
// symbol과 function은 포함되지 않는다.Object를 JSON으로 변환하면 String으로 변환되며 객체의 내용이 문자열로 표기되지만 함수와 자바스크립트의 기능인 Symbol()와 같은 특별한 데이터도 JSON에 포함되지 않아서 내용이 빠지게 된다. Date 객체는 날짜가 String으로 변환되어 담긴다.
json = JSON.stringify(rabbit, ["name", "color", "size"]);
console.log(json);
// {"name":"tori","color":"white","size":null}
json = JSON.stringify(rabbit, (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === "name" ? "ellie" : value;
});
console.log(json);
// {"name":"ellie","color":"white","size":null,"birthDate":"2021-03-02T13:43:42.276Z"}
key와 value를 출력하면 모든 key와 value를 출력하지만 특이하게도 가장 먼저 오는 것은 오브젝트를 감싸고 있는 object이다.
// String을 Object로 변환
json = JSON.stringify(rabbit);
console.log(json);
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();
// obj.jump();
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());
String으로 만들어진 함수는 이제는 String이 되어서 복구가 안된다. Date도 마찬가지인데 Date 객체를 만들어서 Stirng으로 만들어진 값을 넣어서 새로 Date를 객체를 만드는 것으로 복구할 수 있다.
