드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (10편)

JSON

HTTP (Hypertext Transfer Protocol)

- 웹사이트, 웹 어플리케이션과 같은 클라이언트가 어떻게 서버와 통신할 것인지 정해놓은 규약

- 클라이언트가 서버에게 데이터를 요청 (request), 서버는 클라이언트 요청에 맞게 응답(response)

 

Hypertext

- HyperLink, 문서, 이미지 파일 등을 포함한 것들을 말함

 

AJAX (Asynchronous JavaScript And XML)

- 웹 페이지에서 동적으로 서버와 데이터를 주고 받을 수 있는 기능을 말함

- 대표적으로 XHR(XMLHttpRequest)라는 Object가 있음, 브라우저 오픈 API에서 제공하는 것들 중의 하나

- 최근에는 새로 추가된 fetch() API를 통해서 데이터를 쉽게 주고 받을 수 있지만, IE에서는 제공을 하지 않음

 

XML

- HTML과 같은 마크업 언어

 

JSON (JavaScript Object Notation)

- ECMAScript 3rd 1999에서 영감을 받아 만들어진 데이터 포맷

- Object { key: value }로 이루어져 있음

- 웹 뿐만 아니라, 모바일, Object를 파일 시스템으로 저장할 때도 쓰임

- 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

-> 언어와 언어가 쓰는 플랫폼에 상관없이 쓰일 수 있다는 최대 장점!!

 

JSON 공부 방법

1. Object -- serialize --> JSON(string)

2. Object <-- deserialize -- JSON(string)

---

1. Object to JSON

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

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

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

// JSON으로 변환하면 자바스크립트에만 있는 symbol이나 함수는 포함되지 않는다.
json = JSON.stringify(rabbit);
console.log(json);

// 원하는 properties만 지정해서 JSON파일로 변경 가능함
json = JSON.stringify(rabbit, ["name"]);
console.log(json);

// JSON 파일을 더 세밀하게 조정하고 싶을 때는 콜백함수를 이용할 수 있음
json = JSON.stringify(rabbit, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'ellie' : value;
});
console.log(json);

cf ) 오버로딩(Overloading) : 함수 이름은 동일하지만, 어떤 파라미터, 몇개의 파라미터를 호출하냐에 따라서 다르게 호출이 가능함

 

2. JSON to Object

// 2. JSON to Object
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
rabbit.jump();
// obj.jump();

console.log(rabbit.birthDate.getDate()); // Date API에 의해서 오늘 날짜 출력
console.log(obj.birthDate); // string 값 출력

---

JSON과 관련된 유용한 사이트

 

JSON Diff

jsondiff.com

- 첫번째 JSON 파일과 두번째 JSON 파일의 다른 점을 알려줌

 

JSON Beautifier

jsonbeautifier.org

- 서버에서 받아온 JSON 파일 포맷이 망가진 경우에 올바르게 고쳐주는 사이트

 

JSON Parser

jsonparser.org

- JSON을 Object 형태로 확인하고 싶을 때 유용함

 

JSON Validator

tools.learningcontainer.com/json-validator

- JSON 형태로 유효한지 확인할 수 있음

---

출처

https://www.youtube.com/watch?v=FN_D4Ihs3LE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC