TIL 210624

jm·2021년 6월 24일
0

오늘 한 일

  • JS 강의 중 JSON에 대한 강의 시청
  • 노션 정리하기

공부한 내용

JS 10. JSON

https://youtu.be/FN_D4Ihs3LE

HTTP (Hypertext Transfer Protocal)

브라우저 위에서 동작하고 있는 클라이언트가 서버와 통신하는 방법

클라이언트 -request→ 서버

클라이언트 ←response- 서버

브라우저에서 서버와 통신 할 떄 fetch() API를 사용하거나 XHR 오브젝트를 사용한다.

AJAX (Asynchronous JavaScript And XML)

  • HTTP를 사용해서 서버에게 데이터를 요청해서 받아오는 방법
  • 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있음

XHR (XMLHttpRequest)

  • 브라우저 ApI에서 제공하는 오브젝트 중 하나
  • 최근 추가된 fetch() API을 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있음 → IE에서 지원하지 않음

XML

HTML과 같은 마크업 언어 중 하나, 태그들을 이용해서 데이터를 나타냄

  • XML을 사용하면 불필요한 태그가 너무 많이 들어가서 파일 사이즈도 커지고 가독성도 좋지 않음 → JSON 사용으로 해결

JSON JavaScript Object Notation

브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때나 서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때 이용

  • 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포멧
  • 텍스트를 기반으로 한 가볍고 읽기 편안함
  • key와 value의 값으로 이루어짐
  • 데이터를 서버와 주고 받을 때 직렬화하고 데이터를 전송할 때 쓰임
  • 프로그래밍 언어와 플랫폼에 상관 없이 사용 가능

JSON의 API

let json = JSON.stringify(true);
console.log(json);

함수의 이름은 동일하지만 어떤 파라미터인지 몇개의 파라미터를 전달하는 지에 따라 각각 다른 방식으로 호출이 가능함 → 오버로딩

  • parse JSON에 문자열 데이터를 넣으면 오브젝트로 변환됨

    revier 콜백함수, 오브젝트가 만들어지는 과정을 세밀하게 조정하여 결과 값을 변형함

  • stringfy 어떤 타입의 오브젝트를 받아와서 문자열로 변환됨

    replacer 콜백함수, 스트링이 만들어지는 과정을 세밀하게 조정하여 결과 값을 변형함

배열을 json으로 변환

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

["apple","banana"] 

object를 json으로 변환

stringify를 이용해서 변환하고자 하는 오브젝트를 전달함

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

json = JSON.stringify(rabbit);
console.log(json);
// {"name":"tori","color":"white","size":null,"birthDate":"2021-06-24T11:57:15.839Z"}
  • 'jump'라는 함수는 json에 포함되지 않음 → object에 있는 데이터가 아니기 떄문
  • JS에 있는 데이터 'Symbol'도 JSON에 포함되지 않음
json = JSON.stringify(rabbit, ["name"]);
console.log(json);
// {"name":"tori"}
  • 원하는 프로퍼티만 골라서 정의를 하게되면 해당하는 프로퍼티만 json으로 변환됨
json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === 'name' ? 'ellie' : value;
});
console.log(json);
// {"name":"ellie","color":"white","size":null,"birthDate":"2021-06-24T12:14:00.729Z"}
  • 콜백함수를 이용하여 값을 변환할 수 있음

JSON을 Object으로 변환

parse 를 이용해서 변환하고자 하는 JSON을 전달함

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
// {name: "tori", color: "white", size: null, birthDate: "2021-06-24T12:27:36.526Z"}
rabbit.jump(); // can jump!

obj.jump(); // Uncaught TypeError: obj.jump is not a function at json.js:44
  • 변환한 오브젝트는 직렬화가 된 JSON으로 부터 다시 오브젝트를 만들었기 때문에 함수는 직렬화 과정에서 포함되지 않음

JSON 강의 다음으로는

이 세 가지의 강의가 있었는 데 진도를 계속 나가는 것 보단 아무래도 이때까지 배운 내용을 복습하는 편이 나은 것 같아서 중도하차 했다. 엘리님이 엄청 세세하게 가르쳐주시지만 내가 다 받아먹지 못해서 생긴일...🥲

그리고 모던 JavaScript 튜토리얼 이라는 좋은 사이트를 알게 되어서 기존에 노션에 정리한 개념들을 추가 수정하고 있다. 배운 데 까지 다시 정리하려면 또 하루 넘게 걸리겠네 휴..

0개의 댓글