JSON and Copy

JSON? 💯

JSON이 무엇인지 알기 위해선 약간의 배경지식이 필요하다.

AJAX(Asynchronous JavaScript And XML), XHR(XMLHttpRequest) 등과 같이 XML이란 단어가 보이는데 XML이란 HTML과 같은 markup언어 중에 하나이다.(태그를 이용해 데이터 나타냄) 이러한 markup언어를 통해 서버와 데이터를 주고 받을 수 있는데 예전에는 XML이 주였다면 지금은 JSON(JavaScript Object Notation)을 많이 사용한다고 한다. 이유는 XML은 불필요한 태그가 많이 들어가서 파일이 커지고 가독성도 좋지 않기 때문이다.

요약 : 클라이언트와 서버가 통신을 하기위해 markup언어중 하나인 XML을 많이 썼는데 지금은 JSON을 사용한다.

이제 JSON이 무엇인지 알아보자

JSON이란

• 브라우저 뿐만아니라 모바일에서 서버와 데이터를 주고받을때, 또 통신목적이아닌 Object를 파일시스템에 저장할때도 사용됨
• 텍스트를 기반으로하여 만들었기에 가볍고 key와 value로 구성되어 읽기 쉽다.
• 주로 데이터를 직렬화하여 서버와 주고받을때 사용함
• 대부분의 프로그램언어나 플랫폼에서도 사용할 수 있다.

요약 : 텍스트를 기반으로하여 key와 value로 구성되었고 서버와 통신을 하기위한 markup언어이다.

---

JSON 사용방법

interface JSON {
  parse(
    text: string,
    reviver?: (this: any, key: string, value: any) => any
  ): any; //오브젝트로

  stringify(
    value: any,
    replacer?: (this: any, key: string, value: any) => any,
    space?: string | number
  ): string; //스트링으로

  stringify(
    value: any,
    replacer?: (number | string)[] | null,
    space?: string | number
  ): string; //스트링으로
}

JSON의 API는 parse, stringify 이렇게 두가지가 있는데 stringify처럼 같은이름으로 매개변수가 다르게 정의된것을 오버로딩(overLoading)이라고 한다.

1. Object to JSON

let person = {
  name: "jh",
  age: 28,
  tall: null,
  day: new Date(),
  canWhat() {
    console.log(`${this.name} can eat rice`);
  },
};

JSON.stringify(person); // {"name":"jh","age":28,"tall":null,"day":"대충시간들"}

JSON.stringify(person, ["name"]); // {"name":"jh"}

JSON.stringify(person, (key, value) => {
  console.log(key, value);
}); // 한번해보셈

JSON은 함수나 심벌은 나타내지않는다. 또한 콜백함수를 활용하여 원하는것만 변환가능

2. JSON to Object

JSON.parse(person, (key, value) => {
  return key === "day" ? new Date(value) : value;
});

다시 Object 형태로 바꿔준다.

유용한사이트 : JSON파일 비교 JSON파일 유효한가