JSON (2) 개념

이 포스트는 드림코딩 by 엘리님의 자바스크립트 10. JSON 강의를 정리한 것입니다.

youtu.be/FN_D4Ihs3LE

 

 

 

저번 시간 복습)

웹브라우저와 서버가 통신할 때 사용하는 규칙이 http

http의 단점을 보완한 Ajax라는 기술이 등장했다.

- Ajax 기술을 구현하는 다양한 방법 중 하나가 fetch API

- 주고받는 데이터의 포맷으로 주로 XML을 사용했지만 최근에는 JSON을 사용한다. 

 

 

 

JSON 공부 포인트

1. Objet를 JSON으로 어떻게 serialize 할지

2. JSON을 어떻게 deserialize해서 Object로 바꿔줄지

 

 

 

 

1. Object to JSON

JSON.stringify('object');

 

stringify라는 API를 사용하면 간단하게 Object가 JSON string으로 serialization된다.

 

 

 

let json = JSON.stringify(true);
console.log(json);

간단한 Boolean Type의 Object도 JSON으로 바꿔줄 수 있다.

 

 

 

json = JSON.stringify(["apple", "banana"]);
console.log(json);

간단한 배열 Object도 JSON string으로 바꿔주면

 

 

이렇게 JSON data format으로 바뀐다.

JSON은 쌍따옴표""를 사용한다.

 

 

 

 

 

 

const rabbit = {
  name: "tori",
  color: "white",
  size: null,
  birthDate: new Date(),
  jump: () => {
    console.log(`${this.name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);

Object를 JSON으로 바꿔주면

 

 

 

 

 

역시나 이렇게 JSON 타입으로 변환된 것을 볼 수 있다.

 

한 가지 주의할 점은!

Object 속에 있던 함수 jump는 JSON으로 변환되지 않는다!! (console 창에도 없음)

(자바스크립트 자체 symbole:Symbol('id) 같은 것도 포함되지 않는다고 한다.)

 

 

 

 

 

 

Replacer를 이용하면 Object가 JSON으로 변화되는 걸 컨트롤 할 수 있다.

 

json = JSON.stringify(rabbit, ["name"]);
console.log(json);

 

이렇게 배열을 넣어주면

 

 

해당하는 Property만 JSON으로 변환시켜줄 수 있다.

 

 

 

 

 

 

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  //return value;
  return key === "name" ? "ellie" : value;
});

console.log(json);

이렇게 해주면 rabbit이라는 객체가 들어오면 

key, value 값을 받아서 보여주고

만약 key 값이 name이면 value를 ellie로 바꿔주고 아니면 원래 value로

 

 

 

 

이렇게 하니까!

우선 가장 윗줄에 rabbit이라는 object를 감싸고 있는 더 큰 object 출력

그리고 rabbit object의 key value값이 차례대로 출력 (심지어 jump 함수도!!!!)

그리고 마지막에 return 값에서 name key의 value가 ellie로 바뀐 것을 볼 수 있다.

 

 

 

이렇게 Object를 JSON으로 바꿔줄 때, control도 가능하다는 사실!!!

 

 

 

 

 

 

 

 

2. JSON to Object

JSON.parse(json);

JSON.parse API를 사용하면 json을 받아와서 Object로 바꿔줄 수 있다.

 

 

const obj = JSON.parse(json);
console.log(obj);

 

아까 Rabbit Object를 JSON으로 변환시킨 것을 

다시 Objet로 deserialize 했다.

 

 

다시 JavaScript의 Object로!

 

한 가지 주의 할 점은,

아까 Rabbit Object를 stringify해서 JSON으로 만들었을 때, 함수는 변환되지 않았다.

 

그래서

rabbit.jump();
obj.jump();

원래 rabbit 객체 자체는 jump 함수를 사용할 수 있지만

stringify했다가 다시 parse해서 만든 object는 jump함수를 가지고 있지 않다.

 

 

 

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());

rabbit은 Date라는 Object를 통해서 생일을 만들었고 getDate method에 접근할 수 있다.

하지만 obj의 경우,

stringify 됐다가 다시 parse 되었는데

그때 생일은 그냥 그대로 JavaScript의 string으로 받았기 때문에 getDate()를 사용할 수 없다.

 

 

 

 

 

 

 

위는 rabbit object를 console.log 해본 것이고

아래는 obj를 console.log 한 것

birthDate 부분이 obj에서는 쌍따옴표 안 string으로 되어 있다.

 

 

 

 

stringify에서 replacer 콜백을 이용해서 JSON으로 바꿔줄 때 control을 할 수 있었다면

parse에서는 reviver 콜백을 이용하면 된다.

 

const obj = JSON.parse(json, (key, value) => {
  console.log(`key:${key}, value: ${value}`);
  return key === "birthDate" ? new Date(value) : value;
});
console.log(obj);

 

여기서 소문자 json은 우선 아까 rabbit을 stringify해서 바꾼 JSON이다.

그 json을 다시 parse해서 Object로 바꿔줄 건데

key가 birthDate이면 새로운 그 value 값을 넣어서 새로운 Date 객체로 만들어 주고,

나머지 key들은 원래 value 그대로 return 해달라는 뜻이다.

 

 

 

 

 

이렇게 birthDate가 원래 Date Object로 돌아온 것을 볼 수 있다!

 

 

그러면 아까는 못썼던 getDate() method를 다시 사용할 수 있다.

const obj = JSON.parse(json, (key, value) => {
  console.log(`key:${key}, value: ${value}`);
  return key === "birthDate" ? new Date(value) : value;
});
console.log(obj);
console.log(obj.birthDate.getDate()); //가능