[자료구조/알고리즘] JSON 포맷

1. JSON (JavaScript Object Notation)

자바스크립트 객체 표기법.

데이터 교환을 위해 만들어진 객체 형태의 포맷.

2. JSON의 탄생배경

JSON의 탄생배경을 이해하기 위해 네트워크를 통해 어떤 객체의 내용을 다른 프로그램에게 전송하는 상황을 가정해 보겠습니다. 객체 내용은 아래와 같이 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지라고 가정합니다. 

// 메시지를 담고 있는 객체 message

const message = {
  sender: "네이버",
  receiver: "카카오",
  message: "카카오야 오늘 저녁 같이 먹을래?",
  createdAt: "2022-12-16 10:10:10"
}

위와 같은 메시지 객체를 네트워크를 통해 전송하려면 전송 가능 조건을 만족해야 합니다.

※ 전송 가능 조건 (transferable condition)
1) 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다.
2) 또는 전송할 데이터가 문자열처럼 범용적으로 읽을 수 있는 형태여야 한다.

따라서 우리는 네트워크를 통해 객체를 전송하기 위해서 객체를 문자열로 바꾸어 주어야 합니다. 이러한 변환 형식을 규정하기 위해 만들어진 것이 바로 JSON 포맷입니다. 네트워크를 통해 전송될 객체는 JSON 포맷에 따른 문자열로 변환하는 과정을 거쳐야합니다.

3. 전송을 위해 객체를 문자열로 바꾸기 : 직렬화(serialize)

하지만 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않습니다. 

JavaScript에서 객체를 문자열로 변환하기 위해 메서드(message.toString())나 형변환(String(message))을 시도하면, '[object Object]'라는 결과를 리턴합니다. 

이러한 문제를 간단히 해결하기 위해 자바스크립트에서는 객체를 JSON 형태로 변환하거나 JSON을 객체 형태로 변환하는 메서드를 제공합니다. (같은 기능을 수행하는 함수를 직접 만들어 사용하는 방법도 있습니다.)

 

• JSON.stringify : 객체를 JSON으로 변환하는 메서드
• JSON.parse : JSON을 객체로 변환하는 메서드

※ 자세한 내용은 JSON 공식 문서를 참고하기 바랍니다.

 

ex) JSON.stringify 메서드를 사용하여 message 객체를 JSON으로 변환한 예

let transferableMessage = JSON.stringify(message)

console.log(transferableMessage) 
// `{"sender":"네이버","receiver":"카카오","message":"카카오야 오늘 저녁 같이 먹을래?","createdAt":"2022-12-16 10:10:10"}`

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

위와 같이 객체를 문자열로 stringify하는 과정을 직렬화(serialize)한다고 합니다.

 

=> JSON으로 변환된 객체의 타입은 문자열입니다.
=> 발신자는 객체를 문자열로 직렬화하여 누군가에게 객체의 내용을 보낼 수 있습니다.

4. 수신한 문자열 데이터를 객체로 바꾸기 : 역직렬화(deserialize)

수신자는 역직렬화를 통해 수신 받은 문자열 메시지를 객체의 형태로 바꾸어 객체 안의 데이터를 사용할 수 있습니다.

 

ex) JSON.parse 메서드를 사용하여 JSON을 다시 객체로 변환한 예

let packet = `{"sender":"네이버","receiver":"카카오","message":"카카오야 오늘 저녁 같이 먹을래?","createdAt":"2022-12-16 10:10:10"}`
let obj = JSON.parse(packet)

console.log(obj)
/*
 * {
 * sender: "네이버",
 * receiver: "카카오",
 * message: "카카오야 오늘 저녁 같이 먹을래?",
 * createdAt: "2022-12-16 10:10:10"
 * }
 */

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

위와 같이 문자열을 다시 객체로 parse하는 과정을 역직렬화(deserialize)한다고 합니다.

5. JSON의 기본 규칙

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

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

6. 학습 내용 요약 정리

• JSON :  서로 다른 프로그램 사이에서 데이터를 교환하기 위해 범용적으로 사용하는 포맷
• JSON.stringify(object) : 객체를 JSON으로 변환(직렬화)하는 메서드
• JSON.parse(json) : JSON을 객체로 변환(역직렬화)하는 메서드