HTTP
HTTP(Hypertext Transfer Protocol)는 서버와 클라이언트가 서로 어떻게 하이퍼텍스트를 주고 받을지 그 방식을 정한 규약이다. 클라이언트는 서버에 요청(request)을 보내고, 서버는 클라이언트의 요청에 응답(response)을 보내는 방식으로 정해져있다.
하이퍼텍스트는 링크, 문서, 이미지 등의 전반적인 리소스를 포함한다.
AJAX / XHR
이렇게 서버와 통신하는 방법 중에 AJAX(Asynchronous JavaScript and XML)가 있다. 웹페이지-서버 간에 데이터를 동적으로 주고받을 수 있게 해주는 기술이다.
AJAX 통신 기술에서는 XHR(XMLHttpRequest)객체를 통해 데이터를 주고받는다. AJAX과 XHR 모두 이름에 XML을 포함하여 혼동될 수 있지만, XHR 객체로는 XML뿐만 아니라 JSON, HTML, 일반 텍스트 형식 등 다양한 타입(포맷)의 데이터를 주고받을 수 있다. XML 포맷은 가독성이 떨어지고 태그가 많아 파일 크기도 크기 때문에, 현 시점에서는 JSON 포맷이 가장 널리 쓰인다.
JSON
JSON(JavaScript Object Notation)은 자바스크립의 객체에서 영감을 받아 만들어진 {key: value} 객체이다. 데이터를 직렬화(serialization)하고 전송(transmission)하는데에 쓰인다. 프로그래밍 언어와 플랫폼에 구애받지 않는 것이 강점이다.
직렬화는 데이터를 전송할 때, 전송하기에 적합한 포맷으로 변환하는 것을 말한다. 데이터를 요청하려면 우선 자바스크립트 객체를 JSON으로 직렬화하고, 응답을 받아오려면 직렬화된 JSON을 다시 자바스크립트 객체로 역직렬화 해야하는 것이다.
JSON 포맷에서의 직렬화 / 역직렬화
1. Object to JSON (직렬화)
// JSON.stringify() - 문자열화
let json = JSON.stringify(['apple', 'banana'])
console.log(json)
// "["apple","banana"]"
// JSON 규격에 따라 배열은 문자열이 되고, single quotes는 double quotes가 된다.
const rabbit = {
name: 'tori',
color: 'white',
size: null,
birthDate: new Date(),
jump: () => {
console.log(`${name} can jump!`);
},
};
json = JSON.stringify(rabbit)
console.log(json)
// ""name":"tori","color":"white","size":null,"birthDate":"2020-06-04T06:02:06.362Z"}"
// null은 그대로 출력된다.
// new Date() 객체도 문자열로 변환된다.
// 함수는 포함하지 않는다.
2. JSON to Object (역직렬화)
// JSON.parse() - 객체화
json = JSON.stringify(rabbit)
const obj = JSON.parse(json)
console.log(obj)
// {name: "tori", color: "white", size: null, birthDate: "2020-06-04T06:11:04.369Z"}
obj.jump()
// Uncaught TypeError: obj.jump is not a function
