[JS-엘리] JS 10강 - JSON 개념 정리 와 활용방법 | (JavaScript ES6)

동영상 수강 전 본문 내용 스캔.

동영상 수강 후 본문 내용 스캔.

안 보고 직접 코드 타이핑 하기.

JSON 이해에 필요한 기본 개념

 

HTTP (HyperText Transfer Protocol)

브라우저와 서버간 데이터 (링크, 텍스트, 이미지 등) 통신 규약

 

AJAX (Asynchronous Javascript And XML)

전체 페이지 새로고침 않고도 일부 데이터 전송 가능.

 

XML (Extensible Markup Language)

데이터 전송에 유리하도록 확장된 마크업 언어. 태그명 자유롭게 명명 가능.

 

XHR (XMLHttpRequest)

브라우저 API중 하나. /AJAX에서 데이터 교환할 때 사용하는 Object.

 

JSON (JavaScript Object Notation) 

JS 객체 명세서. 데이터를 저장・교환할 때 유용. (ECMAScript 3rd 1999)

object 형태 : {key:value, key:value, ...}

json 형태 : {"key":"value", "key":"value",...}

 

fetch() API : 데이터 교환 위해 최근 등장. (IE는 지원 X)

 

※ 전송 데이터 형태 : XML・JSON

※ 데이터 전송 방법 : XMLHttpRequest ・ fetch() 이용해 서버와 통신.

JSON 특징

 

1. 가장 간단한 데이터 교환 포맷.

2. 가벼운 텍스트 기반 구조.

3. 읽기 편함. (Easy to read)

4. 이름:값 형식. (Key:value pairs)

5. 데이터 전송에 편리한 형식으로 저장 (= 직렬화)하는데 사용.

6. 독립적인 프로그램 언어・플랫폼

※ JSON 공부 핵심 

serialize (직렬화) : JSON.stringify(obj)

deserialize(직렬화 해제) : JSON.parse(json)

※ VScode 에디터에서 JSON API 확인 

api 위에 마우스커서 올린 후 Ctrl 키 눌러 링크 활성화 시킨 후, 해당 링크를 클릭.

1. Object → JSON 변환 : JSON.stringify(obj)

 

// JSON

// JavaScript Object Notation

// 1. Object → JSON 변환 :

// JSON.stringify(obj)

let json;

// 예1

json = JSON.stringify(true);

console.log(json); // true

// 예2

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

console.log(json); // ["apple","banana"]

// 예3

const rabbit = {

  name: 'tori',

  color: 'white',

  size: null,

  // symbol: Symbol('id'), // JSON에 포함 X

  bithDate: new Date(), // 변환되어 포함.

  jump: () => {

    // 화살표 함수 경우 JSON에 포함 X, 만약 일반함수로 표현 시 JSON에 포함 O

    console.log(`${name} can jump!`);

  },

};

json = JSON.stringify(rabbit);

console.log(json); // {"name":"tori","color":"white","size":null,"bithDate":"2020-07-31T20:28:26.519Z"}

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

console.log(json); // {"name":"tori"}

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

console.log(json); // {"name":"tori","color":"white"}

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 value; // 하단 주석의 결과값 참고.

});

console.log(json); // {"name":"tori","color":"white","size":null,"bithDate":"2020-07-31T21:03:46.990Z"}

/* 

※ 결과값: 

key: , value: [object Object]

key: name, value: tori

key: color, value: white

key: size, value: null

key: bithDate, value: 2020-07-31T21:08:45.393Z

key: jump, value: () => {

    // 화살표 함수 경우 JSON에 포함 X, 만약 일반함수로 표현 시 JSON에 포함 O

    console.log(`${name} can jump!`);

  }

※ 주의: 

처음엔 rabbit 객체 자체 정보 출력되고, 두 번째부터 rabbit 객체 안 key:value 출력.

※ Tip

rabbit 객체에서 jump 메서드를 화살표 함수 대신 일반 함수로 선언 시 name에 접근 가능.

객체의 메서드를 화살표 함수로 선언할 경우 this는 전역객체를 가리켜서 window가 출력됨.

(예제) 

jump: function() { console.log(`${this.name} can jump!`); } 

또는 

jump() { console.log(`${this.name} can jump!`); }

By. 유튜버 Jerome 님

*/

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

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

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

});

console.log(json); // {"name":"ellie","color":"white","size":null,"bithDate":"2020-07-31T21:21:17.267Z"}

 

결과보기

2. JSON → Object : JSON.parse(json)

 

// 2. JSON → Object

// JSON.parse(json)

console.clear();

json = JSON.stringify(rabbit);

console.log(json);

const obj = JSON.parse(json);

console.log(obj); // {name: "tori", color: "white", size: null, birthDate: "2020-07-31T21:49:25.781Z"}

rabbit.jump(); // can jump!

// obj.jump(); // 에러 발생. (∵ JSON에서 변환된 객체엔 jump 메서드 포함 X)

console.log(rabbit.birthDate.getDate()); // 1  (※ 코드 테스트한 날의 일자)

// console.log(obj.birthDate.getDate()); // 에러 발생. (∵ JSON에서 변환된 객체 경우, birthDate 값은 문자열이므로)

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

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

  return value;

});

/* 

결과값:

key: name, value: tori

json.js:96 key: color, value: white

json.js:96 key: size, value: null

json.js:96 key: birthDate, value: 2020-07-31T23:34:05.781Z

json.js:96 key: , value: [object Object]

*/

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

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

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

});

/*

결과값:

key: name, value: tori

json.js:101 key: color, value: white

json.js:101 key: size, value: null

json.js:101 key: birthDate, value: 2020-07-31T23:34:05.781Z

json.js:101 key: , value: [object Object]

*/

console.log(obj3.birthDate.getDate()); // 1

 

결과보기