[aboutJS] JSON

참고영상: 드림코딩 | 자바스크립트 기초 강의

클라이언트와 서버의 통신은? http!

• 어떻게 이 hypertext를 주고받을지에 대한 규약으로 request하면 response하는 방식
• hypertext <= link, document, image... 모두 포함

서버에게 데이터를 요청해서 받아올 수 있는 방법으로는?

1. ajax
   ; asynchronous javascript and xml
2. xhr(_xml_httprequest): object중 하나로 간단하게 서버에게 데이터를 요청하고 받아올 수 있음
   like fetch() API(※IE는 지원 안됨)

🖐🏻 xml?
마크업언어 중 하나

🖐🏻 근데 서버랑 데이터 주고받을때 xml로만 가능해?
ㄴㄴ 다양한 포맷 가능(ex. json)

다만 ms 개발자들이 참여 당시 xml을 활발하게 사용해서 이름을 그렇게 붙이게 됨
(xml이라는 이름을 붙여버린건 크나큰 실수쓰)

그러나 xml을 사용하면 불필요한 태그도 많고, 용량도 커지고, 가독성도 떨어져서..
👉🏻 json을 더 많이 사용!

3. json
   ; javascript object notation(es3에 큰 영감을 받아서 만들어짐!)
   ex. object = {key: value}

📌 client에서 {key: value}로 server에 request를 하면 => server는 {key: value}로 client에 response를 함

1. object to json

stringify(obj)

let json = JSON.stingify(true)
console.log(true)

true가 출력된다.

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

["apple", "banana"] 로 출력된다.
json 규약이 쌍따옴표이기 때문이다.

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

json = JSON.stringify(rabbit)
console.log(json)

jump 함수는 출력되지 않는다.

{"name":"tori","color":"white","size":null,"birthDate":"2020-09-02T11:16:53.865Z"}

🖐🏻 why??

• jump 함수는 object에 있는 data가 아니기때문에 제외
• js에만 있는 함수도 포함되지 않음 ex. Symbol()

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

이런식으로 하면 원하는 property만 전달하는 것도 가능하다.
더 세밀하게 조건을 달고 싶다면 콜백함수를 쓰는 것이 좋다.

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`)
  return key === 'name' ? 'yang' : value
})

이렇게 조건을 달아주면, name의 값이 yang으로 바뀌어서 출력된다.

2. json to object

parse(json)

json = JSON.stringify(rabbit)
const obj = JSON.parse(json)

obj에 json을 parse했다.
obj를 출력하면?

{name: "tori", color: "white", size: null, birthDate: "2020-09-02T11:24:37.135Z"}

🙅🏻‍♀️ 주의사항!

obj.birthDate.getDate()

는 에러가 난다 !

🖐🏻 why?
rabbit.birthDate.getDate()의 경우 Date() 로 지정했기 때문에 해당 api도 쓸 수 있지만,
obj.birthDate.getDate()는 string으로 들어오기 때문에 Date()가 아니라서 해당 api를 사용할 수 없다.

그래서...

const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`)
  return key === 'birthDate' ? new Date(value) : value
})

이렇게 만들어주면 birthDate를 new Date()로 생성해주어 getDate()를 사용할 수 있게 된다.

유용한 사이트들

• JSON Diff
• JSON Beautifier
• JSON Parser
• JSON Validator