JS JSON

1. HTTP를 활용한 통신 구조

1-1. HTTP 통신방법

• HTTP(HYperText Transfer Protocol)은 client-server 간에 데이터를 송수신할때 필요한것을 정의한 것
• client는 서버에 request를 날리고 server는 이에 response를 해줌

1-2. AJAX 기술

• 문서,이미지,HyperText 등의 resource를 보통 AJAX 기술을 활용
• XMLHttpRequest Object를 활용함 (Browser API에서 제공)
• 최근 Browser API 에 fetch()가 추가됨 (IE에서는 지원되지 않음) .
• 즉, XMLHttpRequest, fetch() API를 통해 client-server Data 송수신 가능

1-3. AJAX 기술 사용시 형식

• XML 형식을 많이 사용했음, but 가독성, 파일사이즈도 너무큰 단점
• 현재, XML의 단점을 보완해주는 JSON(Javascript Obeject Notation) 활용

1-4. JSON

• ECMAScript 3rd(1999)부터 사용되기 시작함
• 형식: Object {key:value}
• 브라우저 뿐만아니라 모바일에서도 활용됨
• 장점:
  1. Programming language나 플랫품에 상관없이 사용 가능
  2. 데이터를 직렬화(serialization)하여 데이터를 전송할수 있음
  3. 가독성이 좋고 간단한 포멧으로 이루어져있음

2. JSON(JavaScript Object Notation)

2-1. Object to JSON

<script>
 // stringify(obj)
  let json = JSON.stringify(true);
  console.log(json);

  const rabbit = {
    name: 'Hello',
    color: 'white',
    size: null,
    birthDate: new Date(),
    jump: () => {           //함수는 JSON으로 출력되지 않음
      console.log('${this.name} can jump!');
    },
  };

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

  json= JSON.stringify(rabbit);
  console.log(json,['name', 'color']);   //원하는 목록만 뽑아 낼수도 있음
 
  json= JSON.stringify(rabbit, {key, vlaue} => {    //callback 함수를 활용하여 좀더 세밀하게 통제 가능
    console.log('key: ${key}, value: ${value}');
    retrun key === 'name' ? 'ellie' : value;
  });
</script>  

2-2. JSON to Obejct

<script>
// parse(json)
console.clear();

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

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate());

</script>

2-3. 유용한 JSON 관련 정보

• JSON Diff Checker: http://www.jsondiff.com/
• JSON Beutifier/editor: https://jsonbeautifier./org/
• JSON Parser: https://jsonparser.org/
• JSON Validator: https://tools.learningcontainer.com/json-validator/