[TIL] JSON

정세비·2021년 5월 21일
0

JavaScript

목록 보기
10/16
post-thumbnail

📌 HTTP

  • 브라우저 위에서 동작하고 있는 웹사이트나 웹어플리케이션과 같은 client들이 어떻게 server와 통신할 수 있는지 정의한 것
  • Hypertext Transfer Protocal의 약자로써, 어떻게 hyertext를 서로 주고받을 수 있는지 규약한 protocal로써
  • http는 client가 server에게 데이터를 request할 수 있고
    server는 client의 request에 따라 response(응답)을 보내주는 방식으로 진행됨

http를 이용해서 server에게 데이터를 요청해서 받아올 수 있는 방법으로 AJAX를 사용.



📌 AJAX (Asynchronous JavaScript And XML)

AJAX는 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술

  • 대표적으로 XHR(XMLHttpRequest)라는 object가 있음
    브라우저 api에서 제공하는 object 중 하나로 server에게 데이터를 요청하고 받아올 수 있음
  • fetch() API 는 IE에서는 지원되지 않음.
  • 요즘에는 JSON을 많이 사용하고 있음


📌 JSON (JavaScript Object Notation)

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

  • 데이터를 주고받을 때 쓸 수 있는 가장 간단한 format
  • 텍스트를 기반으로 하여 가볍다
  • 가독성이 좋다
  • key와 value로 이루어져 있는 file format
  • 데이터를 서버와 주고받을 때 직렬화(serialization)하고 데이터를 전송(transmission)할 때 쓰임
  • 프로그래밍 언어나 플랫폼에 상관없이 쓸 수 있음


JSON 공부방법

(1) object를 어떻게 직렬화(serialize)해서 JSON으로 변환할지
(2) 직렬화된 JSON을 어떻게 deserialize해서 object로 변환할지

(1) object 를 JSON으로 변환하는 방법

stringify를 이용하여 json파일로 변환하기

let json = JSON.stringify(true);

  • 배열을 JSON으로 변환
json = JSON.stringify(['blue', 'green']);
console.log(json);

//output: ["blue","green"]

- object를 JSON 변환
const cat = {
  name : 'nabi'
  color : 'black'
  size : null,
  birthDate : new Date(),
  run : () => console.log(`${name} can run!`);
};

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

/*output: 
{"name":"nabi","color":"white","size":null,"birthdate":"2021-05-21T10:30:38.287Z"} */

여기서 jump라는 함수는 json에 포함되지 않는 것을 확인할 수 있다.
함수는 object에 있는 데이터가 아니기때문에 함수는 제외된다.
마찬가지로 simbol도 포함되지 않는다.


  • JSON을 좀 더 세밀하게 제어하고 싶다면
    (1) 콤마 후 배열에 property 이름만 넣어주거나
    (2) array 대신에 callback 함수를 이용하면 된다.
(1) 
json = JSON.stringify(cat, ['name']);

//output : {"name":"nabi"}


(2) key에 name이 들어오면 이름을 serena로 바꾸고 싶을 경우! 
  
json = JSON.stringify(cat, (key, value) => {
  return key === 'name' ? 'serena' : value;
});

console.log(json);

/*output: 
{"name":"serena","color":"white","size":null,"birthdate":"2021-05-21T10:38:15.103Z"} */


(2) JSON을 object로 변환하는 방법

string으로 만들어진 JSON을 다시 어떻게 object로 변환할 땐
.parse() 를 이용한다

json = JSON.stringify(cat);
const obj = JSON.parse(json);

console.log(obj);

/* output:
{name: "nabi", color: "white", size: null, birthdate: "2021-05-21T10:42:15.390Z"} */
  • JSON으로 변환할 때 함수가 포함되지 않았으므로, JSON을 다시 object로 변환했을 때 함수가 호출되지 않음을 유의할 것!!

⭐ 또한, birthdate object는 string으로 변환되었기 때문에, 다시 object로 가져올 때도 string으로 호출되었다.
하지만 원래 birthDate는 Date()라는 object 자체였기 때문에 이를 세밀하게 데이터로 변환하고 싶다면 callback 함수를 이용할 수 있다.

json = JSON.stringify(cat);
const obj = JSON.parse(json, (key, value) => {
  return key === 'birthdate' ? new Date(value) : value;
});

console.log(cat.birthdate.getDate()); // 21
console.log(obj.birthdate.getDate()); // 21

💡 overloading

함수의 이름은 동일하지만 어떤 parameter를 전달하는지, 몇 개의 parameter를 전달하냐에 따라 다른 방식으로 호출이 가능한 것을 이야기함



유용한 사이트 소개
(1) JSON Diff : 데이터 차이를 비교해볼 수 있어 문제를 디버깅할 때 유용함
(2) JSON Beautifier : 흐트러진 포맷을 정리해줌
(3) JSON Parser : JSON 타입을 object 형태로 확인할 수 있음
(4) JSON Validator : JSON이 이상할 때 문제가 어딘지 확인할 수 있음

profile
파주

0개의 댓글