JSON(Javascript Object Notation)

안녕하세요. 

오늘은 JSON 에 대해서 포스팅 해보도록 하겠습니다. 

 

프론트엔드와 백엔드가 어떻게 데이터를 주고 받는지에 대한 이야기이기도 합니다. 

 

먼저 필요 개념들을 간략하게 살펴봅시다. 

 

HTTP 

HTTP는 Hypertext Transfer Protocal의 줄임말으로,

W3 상에서 정보를 주고받을 수 있는 프로토콜입니다.

주로 HTML 문서를 주고받는 데에 쓰입니다. 

https://developer.mozilla.org/ko/docs/Web/HTTP

HTTP | MDN

 

AJAX

Asynchonous Javascript And XML의 줄임말입니다. 

그 자체가 특정 기술은 아닙니다.

 HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 제일 중요한 XMLHttpRequest 객체를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어입니다.

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX

AJAX - 웹 개발자 안내서 | MDN

 

fetch() API

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.  

XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.

단, IE 에서 지원하지 않습니다. 

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

Fetch API - Web API | MDN

 

XHR

XML HTTP Request의 줄임말으로, 

XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다.

https://developer.mozilla.org/ko/docs/Glossary/XHR_(XMLHttpRequest) 

XHR (XMLHttpRequest) - 용어 사전 | MDN

 

client(프론트)와 server(백)는 XML을 이용해서 과거에 데이터를 주고 받았지만, 

요즘에는 JSON을 주로 이용합니다.

XML 이 용량도 크고 필요없는 태그들도 많기 때문입니다.

 

 

JSON

Javascript Object Notation의 줄임말입니다. 

object를 {key: value} 형태로 주고 받는 것을 말합니다. 

 

그럼 JSON 을 이용하여 데이터를 주고받는다면, 

client에서 어떻게 직렬화(serialize)를 해서 server로 보내고, 

반대로 server에서 보낸 데이터를 어떻게 deserialize하여 사용할까요?

 

 

serialize : JSON 형태로 변경

json.js

// 1. Object to JSON
//stringfy(obj)

let json = JSON.stringify(true);
console.log(json);

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

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

json = JSON.stringify(rabit);
console.log(json);

결과화면

 

stringfy함수 잘 사용하기 

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

json = JSON.stringify(rabit, (key, value)=>{
    console.log(`key: ${key}, value: ${value}`);
    return key === 'name' ? 'erica' : value;
});
console.log(json);
//{"name":"erica","color":"white","size":"null","birthDate":"2021-08-29T06:14:17.017Z"}

콜백함수 이용 JSON 조작

위와 같이 , 뒤에 특정값만 JSON 으로 만들어 달라고 요청할 수도 있습니다. 

 

parse(json) : JSON을 객체로

 

유용한 사이트 

1. 두가지 json 파일이 어떻게 다른지 궁금할 때 

http://jsondiff.com/

JSON Diff - The semantic JSON compare tool

2. json 파일 포맷을 가독성있게 정리할 때 

https://codebeautify.org/jsonviewer

Best JSON Viewer and JSON Beautifier Online

3. json 이 객체 형태로 어떻게 나타나는지 궁금할 때 

http://json.parser.online.fr/

Json Parser Online

4. json 포맷에 문제가 있는지 쉽게 확인할 때 

https://jsonformatter.curiousconcept.com/

JSON Formatter & Validator