출처 : 유튜브 드림코딩 자바스크립트
서버통신의 시작 JSON
client (data request-->) <------------->(<--response) server
client와 server 간의 서버통신을 위해 http가 등장.
HTTP(HyperText Transfer Protocol) : 어떻게 Hypertext를 서로 주고받을 수 있는지를 규약한 protocol 중 하나.
Hypertext는 웹사이트에서 이용되어지는 Hyperlinks만 이야기하는 것이 아니라 전반적으로 쓰여지고 있는 resource, 문서나 이미지 file들을 포함해서 말한다.
HTTP를 이용해서 serverdprp data를 요청해서 받아올 수 있는 방법 => AJAX
AJAX? Asynchoronous Javascript and XML, 웹페이지에서 동적으로 server에게 data를 주고받을 수 있는 기술.
그밖에 XHR object(XML Http Request), fetch API 또한 있음.
참고) XML : html과 같은 markup언어 중 하나. AJAX, XHR은 XML뿐 아니라 다양한 data를 주고받을 수 있음!
요즘은 XML대신 JSON을 많이 쓴다.
JSON
Javascript Object Notation
키 - 값 쌍으로 이루어진 data object를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형표준 포맷 특히 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있음.
- simplest data interchange format
- light weight text-based structure
- easy to read
- key-value pairs
- used for serialization and transmission of data between the network and the network connection
- independent programming language and platform
-> 프로그래밍 언어나 플랫폼에 상관없이 JSON사용이 가능하다.
공부해야할 것
- object를 어떻게 string으로 serialize(직렬화)해서 JSON으로 변환할 지
- string을 어떻게 deserialize하여 object로 변환할 지
1. Object to JSON
stringfy(Obj)
let json = JSON.stringify(true);
console.log(json) //true;
json = JSON.stringify(['apple','banana']);
console.log(json)//["apple","banana"] => 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);
//{"name":"tori","color":"white","size":null,"birthDate":"2021-10-26T11:31:39.352Z"} 함수 jump는 제외됌. why? 함수는 object 내에 있는 data가 아니기 때문.
symbol도 제왜됨. why? js에만 있는 특별한 데이터도 json에 포함되지 않는다.
json = JSON.stringify(rabbit, ['name', 'color']);
console.log(json); // {"name":"tori", "color":"white"}
json = JSON.stringify(rabbit, (key, value) => {
console.log(`key : ${key}, value : ${value}`);
return key ==='name' ? 'ellie' : value;
})
console.log(json) // name이 ellie로 변경되어 출력된다.2. JSON to Object
parse(json)
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
rabbit.jump();
//obj.jump();//변환한 object는 함수는 serialize될때 포함되어있지 않았음. -> 함수 없어짐. error 발생.
console.log(rabbit.birthDate.getDate());
//console.log(obj.birthDate.getDate());// error 발생. why? birthDate 는 string 이기 때문!
// json에서 저장된 문자열이 다시 object 형태에 문자열 타입으로 값이 할당 된 것! 아래와 같이 콜백함수를 전달하여 세밀하게 무언가를 통제할 수 있다!
const obj2 = JSON.parse(json, (key, value)=>{
console.log(`key : ${key}, value : ${value}`);
return key === 'birthDate' ? new Date(value) : value;
})
console.log(obj2.birthDate.getDate()); // 값 얻을 수 있음! 참고)
overloading : 함수의 이름은 동일하지만 어떤 parameter를 전달하냐에 따라서 각각 다른 방식으로 호출 가능한 것
JSON 관련 유용한 사이트)
- JSON Diff - 서버에 요청했을 때 첫번째로 받아온 데이터와 두번째로 받아온 데이터 어떤 게 다른지 잘 모르겠을 때 비교 가능
- JSON Beaufier - 서버에서 받음 json을 붙여넣으면 format이 망가지는 경우 있음. 포맷 예쁘게 만들어줌
- JSON Parser - json type을 object 형태로 어떻게 표기되는지 확인 가능!
- JSON Validator - 유효한 json data인지 확인 가능
