JSON

JSON이란?

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

---

 JSON (JavaScript Object Notation)

• simplest data interchange format (데이터를 주고받을 때 사용할 수 있는 가장 간단한 포맷)
• lightweight text-based structure (텍스트을 기반으로 한 가벼운 구조)
• easy to read (읽기 쉬운)
• key-value pairs (키와 값으로 이루어진)
• used for serialization and transmission of data between the network the network connection (데이터를 서버와 주고 받을 때, 직렬화하고 데이터를 전송할 때 사용)
• independent programming language and platform (프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있음) ✨

---

const message = {
  sender: "김마리모",
  receiver: "케이크",
  message: "당근 케이크 먹고싶다",
  createdAt: "2021-07-21 10:12:10"
}

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

전송 가능한 조건 (transferable condition)

1. 수신자(receiver)와 발신자(sender)가 같은 프로그램을 사용한다.

2. 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다.

 

자바스크립트에서 객체에 메소드 message.toString()이나 형변환 String(message)을 시도하면,

[object Object] 라는 결과를 리턴합니다.

그래서 객체를 JSON 형태로 변환하거나 JSON을 객체의 형태로 변환하여 데이터를 사용합니다.

JSON.stringify 를 사용하면 객체를 JSON 문자열로 변환합니다.

하지만, 함수와 symbol 타입은 JSON.stringify 하면 제외되고 JSON 문자열로 변환되지 않고 무시됩니다.

JSON.stringify로 특정 부분만 사용하고 싶다면, 콜백함수를 사용하면 됩니다.

const cake = {
  name: 'carrot cake',
  color: 'white and orange',
  size: null,
  birthDate: new Date(),
  eat: () => {
  console.log(`I am ${name}. Please eat me!`);
  },
};

json = JSON.stringify(cake);
console.log(json); // {"name":"carrot cake","color":"white and orange","size":null,"birthDate":"2021-07-21T14:16:14.335Z"}

// 특정한 부분만
json = JSON.stringify(cake, ['name']);
console.log(json); // {"name":"carrot cake"}

json = JSON.stringify(cake, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  
  // 모든 key와 value들이 콜백 함수에 전달되는데, 특이점은 객체를 감싸고 있는 제일 최상위의 것이 먼저 전달이 된 후부터
  // key와 value들이 하나씩 출력된다는 것입니다.
  // key: , value: [object Object]
  // key: name, value: carrot cake
  // key: color, value: white and orange
  // key: size, value: null
  // key: birthDate, value: 2021-07-21T14:16:14.335Z
  // key: eat, value: () => {
  // console.log(`I am ${name}. Please eat me!`);
  // }
  
  return key === 'color' ? 'snow-white' : value;
});
// 이렇게 삼항연산자를 사용해서 값을 바꿀수도 있습니다.
console.log(json); // "{\"name\":\"carrot cake\",\"color\":\"snow-white\",\"size\":null,\"birthDate\":\"2021-07-21T14:16:14.335Z\"}"

JSON.parse 를 사용하면 JSON 문자열을 Object type으로 변환합니다.

let transferableMessage = JSON.stringify(message)
console.log(transferableMessage)  // `{"sender":"김마리모","receiver":"케이크","message":"당근 케이크 먹고싶다","createdAt":"2021-07-20 10:11:20"}`
console.log(typeof(transferableMessage)) // `string`

이렇게 stringify 하는 과정을 "직렬화(serialize)한다" 라고 합니다.

 

JSON으로 변환된 객체의 타입은 문자열입니다. 발신자는 객체를 직렬화한 문자열을 누군가에게 객체의 내용을 보낼 수 있습니다. 그렇다면 수신자는 이 문자열 메세지를 어떻게 다시 객체의 형태로 만들 수 있을까요?

JSON.stringify와 정반대의 작업을 수행하는 메소드 JSON.parse를 사용할 수 있습니다.

 

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

json = JSON.stringify(cake);
console.log(cake); // {name: "carrot cake", color: "white and orange", size: null, birthDate: Wed Jul 21 2021 23:16:14 GMT+0900 (대한민국 표준시), eat: ƒ}
const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  // key: name, value: carrot cake
  // key: color, value: white and orange
  // key: size, value: null
  // key: birthDate, value: 2021-07-21T14:16:14.335Z
  // key: , value: [object Object] 
  
  // reviver 콜백함수를 사용해서 JSON.stringify로 인해 문자열로 멈춰있던 new Date()를 revive, 즉 다시 살아나게 할 수 있습니다.
  return key === 'birthDate' ? new Date(value) : value;
});
console.log(obj); // {name: "carrot cake", color: "white and orange", size: null, birthDate: Wed Jul 21 2021 23:16:14 GMT+0900 (대한민국 표준시)}

console.log(cake.birthDate.getDate()); // 21
console.log(obj.birthDate.getDate());  // 21

 

 

출처 : 코드 스테이츠

이처럼, JSON은 서로 다른 프로그램 사이에 데이터를 교환하기 위한 포맷입니다. 그리고 JSON 포맷은 자바스크립트를 포함한 많은 언어에서 범용적으로 사용하는 유명한 포맷입니다.

JSON의 기본 규칙

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

	자바스크립트 객체	JSON
키	키는 따옴표 없이 쓸 수 있음	반드시 큰따옴표를 붙여야 함
문자열 값	문자열 값은 어떠한 형태의 따옴표도 사용 가능	반드시 큰따옴표를 감싸야 함

또한 JSON은 키와 값 사이, 그리고 키-값 쌍 사이에는 공백이 있어서는 안됩니다.

 

https://www.json.org/json-en.html

JSON

 

유용한 사이트:

JSON Diff checker: http://www.jsondiff.com/

JSON Diff - The semantic JSON compare tool

JSON Beautifier/editor: https://jsonbeautifier.org/

Json Beautifier - Json Formatter | Json Viewer | Json Editor

JSON Parser: https://jsonparser.org/

JSON Parser - Best JSON Formatter | JSON Editor

JSON Validator: https://tools.learningcontainer.com/

Best free online Developer Tools

 

참고 : 코드 스테이츠, 드림코더 by 엘리 JSON 영상