JSON.stringify

nada_1221·2022년 8월 22일
0

공부

목록 보기
43/49

JSON의 탄생배경


JSON은 JavaScript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷이다.
네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고 가정하자. 이 객체의 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지라고 한다면, 다음 객체를 어떻게 전송할 수 있을까?

const message = {
  sender: "nada",
  receiver: "neoda",
  message: "I will be back",
  createdAt: "2022-08-22 10:11:12"
}

메시지 객체가 전송 가능하려면, 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 무자열 처럼 범용적으로 읽을 수 있는 형태여야 한다.

전송 가능한 조건(transferable condition)

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

객체는 타입 변환을 이용해 String 으로 변환할 경우 객체 내용을 포함하지 않는다. JS에서 객체를 문자열로 변환하기 위해서 메서드 message.toString()이나 형변환String(message)을 시도하면, [object object]라는 결과를 리턴한다.

이 문제를 해결하는 방법은 객체를 JSON의 형태로 변환하거나 JSON을 객체의 형태로 변환하는 방법이다.
이를 위한 메서드는 다음과 같다

  • JSON.stringify: 객체를 JSON으로 변환
  • JSON.parse:JSON을 객체로 변환한다.
let transferableMessage = JSON.stringify(message)

console.log(transferableMessage)
//{"sender":"nada","receiver":"neoda","message":"I will be back","createdAt":"2022-08-22 10:11:12"}
console.log(typeof(transferableMessage))
//string

stringify하는 이 과정을 직렬화serialize한다고 한다.

JSON으로 변환된 객체의 타입은 문자열이다. 발신자는 객체를 직렬화한 문자열을 누군가에게 객체의 내용을 보낼 수 있다. 그렇다면 수신자는 이 문자열 메시지를 어떻게 다시 객체의 형태로 만들 수 있을까? JSON.stringify와 정반대의 작업을 수행하는 메서드 JSON.parse를 사용할 수 있다.

let packet = {"sender":"nada","receiver":"neoda","message":"I will be back","createdAt":"2022-08-22 10:11:12"}
let obj = JSON.parse(packet)

console.log(obj)
//{
//  sender: "nada",
//  receiver: "neoda",
//  message: "I will be back",
//  createdAt: "2022-08-22 10:11:12"
//}
console.log(typeof(obj))
// 'object'

JSON.parse를 적용하는 이 과정을 역직렬화(deserialize)한다고 한다.

JSON의 기본 규칙


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

자바스크립트 객체JSON
키는 따옴표 없이 쓸 수 있음 {key:"property}반드시 쌍따옴표를 붙여야 함 {"key":"property"}
문자열 값작은따옴표도 사용 가능 {"key":'property'}반드시 큰따옴표로 감싸야 함 '{"key":"property"}'
키와 값 사이 공백사용 가능 {"key":'property'}사용 불가능 '{"key":"property"}'
키-값 쌍 사이 공백사용 가능 {"key":'proterty',num:1}사용 불가능 '{"key":"property","num":1}'
profile
FE_개발자_지망생

0개의 댓글