JS-ellie-JSON

06 Feb 2021

* JSON

HTTP(Hypertext Transfer Protocal) : 브라우저 동작하고 있는 웹사이트 클라이언트가 어떻게 서버와 통신하고 있는지를 정의한 것
- 클라이언트가 서버에게 데이터를 요청(request) 할 수 있고
- 서버는 그에 맞는 응답(response)을 하는 방식으로 진행된다

** JSON(JavaScript Object Notation) : Object { key : value} 로 이루어져 있다, 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때 또는 서버와 통신을 하지 않더라도 object를 파일 시스템에 저장할 때도 JSON 데이터 타입을 많이 이용하고 있다

- 데이터를 주고받을 쓸수 있는 가장 간단한 파일포멧이다
- 텍스트를 기반으로 하며 가볍다
- 사람눈으로 읽기 편하다
- key 와 value로 이루어져 있다
- 데이터를 보통은 서버와 주고 받을 때 직렬화 하고 데이터를 전송할 때 쓰인다
- 프로그래밍 언어와 플랫폼에 상관 없이 사용할 수 있다 

JSON

1.Object to JSON (stringify)

EX)


  let json = JSON.stringify(true);// stringify : object 를 JSON으로 변환하는 API
  console.log(json) // ture 출력

  json = JSON.stringify(['apple', 'banana']); // 배열을 json으로 변환
  console.log(json) // ["apple","banana"] 출력

  // object 를 JSON 으로 변환
  const rabbit = {
      name: 'tori',
      color: 'white',
      size: null,
      birthDate: new Date(),
      jump: () => { // 함수는 object에 포함된 데이터가 아니기 때문에 변환되지 않는다
          console.log(`${name} can jump!`);
      },
  };

  json = JSON.stringify(rabbit);
  console.log(json); // {"name":"tori","color":"white","size":json.null,"birthDate":"2021-02-05T13:20.22670Z"} 출력

  // ,사용 하여 조금더 세밀한 통제
  json = JSON.stringify(rabbit, ['name','color']); // ,를 사용하여 원하는 정보만 출력할 수 있다
  console.log(json); // {"name":"tori","color":"white"} 출력

  // callback함수 사용하여 세밀한 통제 
  json = JSON.stringify(rabbit, (key, value) => {
      console.log(`key:${key}, value : ${value}`); // 모든 key와 value가 전달된다
      return key === 'name' ? 'ellie' : value; //  key가 name이라는 것이 들어오면 무조건 ellie로 값설정 하고  key가 name이 아닌경우에는 원래의 값을 사용한다
  });

2.JSON to object (parse)

EX)

  json = JSON.stringify(rabbit); // 기존의 값
  const obj = JSON.parse(json); // parse를 이용해 변환하고 싶은 JSON를 전달해주면 된다ㄴ
  console.log(obj); // {"name":"tori","color":"white","size":json.null,"birthDate":"2021-02-05T13:20.22670Z"} 출력