JS의 핵심! : JSON

YouTube Link
	자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6)
	https://youtu.be/FN_D4Ihs3LE

http를 통해서 서버에게 데이터를 요청해 가져올 수 있는 방법으론 ajax가 있다. 웹페이지를 다시 로딩하지 않고 동적으로 서버에게 데이터를 주고 받는 기술이다.(검색창 미리보기와 같은) 이것 말고도 브라우저 API에서 제공하는 XHR도 있다. 최근에 추가된 브라우저 API는 fetch() API가 있다.(XML은 html과 같은 마크업 언어이다.)

JSON은 key와 value로 이루어져 있다. JSON은 Object로 직렬화해서 JSON의 데이터를 저장하거나 전송 또는 역직렬화 하기도 한다..

---

JSON.stringify() : 문자열로 반환

let json = JSON.stringify(true);

console.log(json);//true

json = JSON.stringify(['apple', 'banana']);

console.log(json);

//object 만들기JSON화 시키기

//함수는 표현되지 않는다.

const rabbit = {

  name: 'tori',

  color: 'white',

  size: null,

  birthDate: new Date(),

  // Symbol: Symbol('id'),

  jump: () => { console.log(`${name} can jump`); }

};

//JSON.stringify

json = JSON.stringify(rabbit);

console.log(`1: ${json}`);

//Object의 원하는 property만 지정하고 싶다면 아래처럼 작성하면 된다.

json = JSON.stringify(rabbit, ['name', 'color', 'size']);

console.log(`2: ${json}`);

json = JSON.stringify(rabbit, (key, value) => {

  console.log(`3: key : ${key}/ value : ${value}`);//[object;object]는 제일 최상의 객체가 전달이 먼저 된다.

  return key === 'name' ? 'ellie' : value;

});

console.log(`4: ${json}`);

JSON.parse() : JS객체로 반환

//JSON.parse

console.log("START=======================");

const rabbit = {

  name: 'tori',

  color: 'white',

  size: null,

  birthDate: new Date(),

  // Symbol: Symbol('id'),

  jump: () => { console.log(`${this.name} can jump`); }

};

const json = JSON.stringify(rabbit);

// const obj = JSON.parse(json);

const obj = JSON.parse(json, (key, value) => {

  console.log(`key:${key}/ value:${value}`);

  console.log(new Date(value));//여기서 value가 string이다.

  console.log(`type : ${typeof (value)}`);//string

  console.log(`type : ${typeof (new Date(value))}`);//obj

  return key === 'birthDate' ? new Date(value) : value;

});

// let test = new Date('2023-05-08T08:05:28.839Z')

// console.log('test' + test);

// console.log(obj);

// rabbit.jump();

// json.jump();//error

// obj.jump();//error

console.log(rabbit.birthDate.getDate())

console.log(obj.birthDate.getDate())

크게 어려움은 없었으나 프로젝트를 진행하면서 활용 해봐야 겠다. 좀 더 가독성이 좋은 코드를 만들기 위함이다.

Json Parser Online

 

JSON파일 만들기