브라우저에서 동작하는 웹 사이트나 웹 어플리케이션이
어떻게 서버와 통신할 수 있는지를 정의하는 것이 HTTP다.
이런 HTTP에서 클라이언트가 요청한 것들을
서버가 응답하는 방식이 여러가지가 있는데
이중 JSON에 대해 설명한다.
JSON이란, JavaScript Object Notation의 약자로
JavaScript를 이용해 서버와통신하는 방법이다.
이 방법은 ECMAScript 3rd에서 고안한 방식으로
Object가 key와 Value로 구성되어 있는 것을 참고해 만들어졌다.
때문에 JSON도 key와 value로 구성되어있다.
JSON의 특징은 다음과 같다.
- 데이터를 주고받을 때 쓸수 있는 가장 간단한 포멧이다
- 텍스트를 기반으로해 가볍다.
- 읽기 편하다
- key와 value로 구성되어있다.
- 서버와 데이터를 주고 받을때 직렬화 하여 주고받는다.
- 프로그래밍 언어나 플렛폼에 상관없이 사용 가능하다.
Object에서 JSON으로 변환하는 방법
let json = JSON.strigify(true);JavaScript에서 JSON으로 변환하면 string타입으로 변환된다.
boolean타입, primitive타입의 데이터도 변환할 수 있다.
json = JSON.strigify(['apple', 'banana']);배열도 JSON으로 변환할 수 있다.
const rabbit = {
name: 'tokkki',
color: 'white',
size: null,
birthDate: new Date(),
jump: () => {
console.log(`${this.name} can jump!`);
},
};json = JSON.stringify(rabbit);
console.log(json);JSON으로 변환 시 주의 사항은 JavaScript 고유의 데이터는
JSON에 포함되지 않는다.(funcion, symbol)
json = JSON.stringify(rabbit, ['name']);
console.log(json);이런식으로 배열을 넣어 원하는 데이터만 전송할 수 있다.
json = JSON.stringify(rabbit, (key,value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'name' ? 'pangho' : value;
});
console.log(json);또는 콜백함수를 넣어 name를 pangho로 변경할수도 있다.
특이한 점으로 제일 먼저 전달되는 데이터는
rabbit이 담겨있는 object가 먼저 전달되고
그 뒤로 name, color등이 전달된다.
이렇게 세세하게 데이터를 조정하고 싶으면
콜백함수를 이용하면 된다.
JSON에서 Object로 변경하는 방법
const obj = JSON.parse(json);
console.log(obj);주의할 점은 JavaScript에서 JSON을 objcet로 변경하면
함수는 JSON으로 변경되지 않기 때문에 object에 포함되지 않는다.
console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());또한 rabbit의 birthDate는 getDate라는
Date안의 API를 사용해 표현이 가능하지만
JSON을 object로 만든 birthDate는
string이기 때문에 API를 사용할 수 없다.
const obj = JSON.parse(json (key, value) => {
console.log(`key: ${key}, value: ${value}`);
return key === 'birthDate' ? new Date(value) : value;
});때문에 이런식으로 콜백함수를 이용해 JSON을 object로 만들때
원하는 부분을 새로운 object로 만들 수도 있다.
