[JS] JSON 개념정리와 활용방법

JSON

[JSON]

(1) HTTP(Hypertext Transfer Protocal) : Hypertext를 주고 받는 방법에 대한 통신 규약

(2) JSON (JavaScript Object Notation) : Object처럼 key,value로 구성, 브라우저와 모바일에서 서버와 데이터를 주고받을때, 서버와통신하지 않고도 object를 file system에 저장할 때 사용

 - 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 playform 

 

[Object to JSON]

1. stringify : object를 JSON으로 만든다.

- 오버로딩 : 함수의 이름은 같지만 어떤 파라미터를 몇개 전달하느냐에 따라 다른방식으로 호출 가능

'use strict';

// JSON
// JavaScript Object Notation

// 1. Object to JSON
// stringfy(obj)
let json = JSON.stringify(true);
console.log(json);

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

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

json = JSON.stringify(rabbit);
console.log(json); //{"name":"tori","color":"white","size":null,"birthDate":"2021-08-27T13:41:29.812Z"}

json = JSON.stringify(rabbit, ['name', 'color', 'size']);
console.log(json); //{"name":"tori","color":"white","size":null}

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'ellie' : value;
});
//key: , value: [object Object]
//key: name, value: tori
//key: color, value: white
//key: size, value: null
//key: birthDate, value: 2021-08-27T13:42:30.309Z
//key: jump, value: function () {console.log(`${this.name} can jump!`);}

console.log(json); //{"name":"ellie","color":"white","size":null,"birthDate":"2021-08-27T13:41:29.812Z"}

 

[JSON to Object]

1. parse : JSON을 object로 만든다.

// 2. JSON to Object
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
console.log(json); //{"name":"tori","color":"white","size":null,"birthDate":"2021-08-27T13:47:04.724Z"} birthDate가 string으로 할당

const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'birthDate' ? new Date(value) : value;
});
//key: name, value: tori
//key: color, value: white
//key: size, value: null
//key: birthDate, value: 2021-08-27T13:42:30.309Z
//key: , value: [object Object]

console.log(obj); //{name: "tori", color: "white", size: null, birthDate: Fri Aug 27 2021 22:45:59 GMT+0900 (KST)}
rabbit.jump(); //tori can jump!
// obj.jump();

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

 

 

유용한 웹사이트

1. JSON Diff : 서버에게 요청했을때, 첫번째로 받아온 데이터와 두번째로 받아온 데이터가 어떻게 다른지 보여주는 사이트

http://www.jsondiff.com

JSON Diff - The semantic JSON compare tool

 

2. JSON Beautifier : format을 이쁘게 해준다.

https://jsonbeautifier.org

Json Beautifier - Json Formatter | Json Viewer | Json Editor

 

3. JSON Parser : JSON으로 object가 어떻게 표기되는지

http://json.parser.online.fr

Json Parser Online

 

4. JSON Validator : 유효한 JSON인지

https://tools.learningcontainer.com/json-validator/

 

---

Thanks for 드림코딩 

https://youtu.be/FN_D4Ihs3LE