(SEB_FE) Section3 Unit1 JSON.stringify

• JSON 구조가 재귀 함수를 사용할 수 있는 트리 구조임을 이해할 수 있다.
  • JSON.stringify 와 JSON.parse 가 serialize, deserialize라는 것을 이해할 수 있다.
    JSON.stringify 와 JSON.parse를 사용하여 JavaScript 값과 JSON을 넘나들 수 있다.
    JSON에 재귀 호출을 사용할 때, 어디에 사용해야 할지 이해할 수 있다.

🍎JSON의 탄생 배경

🍒What is JSON?

JavaScript Object Notation 의 줄임말로,
데이터 교환을 위해 만들어진 객체 형태의 포맷이다.

예시로 아래와 같은 메세지 객체가 있다고 가정해보자.

const message = {
  sender: "김코딩",
  receiver: "박해커",
  message: "해커야 오늘 저녁 같이 먹을래?",
  createdAt: "2021-01-12 10:10:10"
}

이 메세지 객체를 전송하기 위한 조건(transferable condition)은 아래와 같다.

• 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다.
• 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다.

객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않는다.
만일, JavaScript에서 객체를 문자열로 변환하기 위해서

• 메서드(message.toString())나
• 형 변환(String(message))을 시도하면

[object Object] 라는 결과를 리턴함을 알 수 있다.

❓이 문제를 해결하기 위해선 어떻게 해야 할까?
➡ 객체를 JSON의 형태로 변환하거나 JSON을 객체의 형태로 변환하면 해결!

JSON.stringify : 객체를 JSON으로 변환
➡ stringify하는 이 과정을 직렬화(serialize) 한다고 한다.
(JSON으로 변환된 객체의 타입은 문자)

JSON.parse : JSON을 객체로 변환
➡ JSON.parse를 적용하는 이 과정을 역직렬화(deserialize) 한다고 한다.

예시로 살펴 보자.

// message 객체를 JSON으로 변환하는 메서드 JSON.stringify
let transferableMessage = JSON.stringify(message)

console.log(transferableMessage) 
// `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`

console.log(typeof(transferableMessage))
// `string`

• JSON으로 변환된 객체의 타입은 문자열. 따라서 발신자는 객체를 직렬화한 문자열을 누군가에게 보낼 수 있다!

그렇다면, 수신자는 이 문자열 메시지를 어떻게 다시 객체의 형태로 만들 수 있을까?
➡ JSON.parse 를 사용!

let packet = `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`

// 직렬화된 JSON에 메서드 JSON.parse를 적용하면 다시 객체의 형태로 변환
let obj = JSON.parse(packet)

console.log(obj)
/*
 * {
 * sender: "김코딩",
 * receiver: "박해커",
 * message: "해커야 오늘 저녁 같이 먹을래?",
 * createdAt: "2021-01-12 10:10:10"
 * }
 */

 console.log(typeof(obj))
 // `object`

🍎JSON의 기본 규칙

JSON은 얼핏 보기에 자바스크립트의 객체와 별반 다를 바가 없어 보이지만, 자바스크립트의 객체와는 미묘하게 다른 규칙이 있다.