HTTP (Hypertext Transfer Protocal)
브라우저 위에서 동작하고 있는 클라이언트가 서버와 통신하는 방법
클라이언트 -request→ 서버
클라이언트 ←response- 서버
브라우저에서 서버와 통신 할 떄 fetch() API를 사용하거나 XHR 오브젝트를 사용한다.
AJAX (Asynchronous JavaScript And XML)
XHR (XMLHttpRequest)
XML
HTML과 같은 마크업 언어 중 하나, 태그들을 이용해서 데이터를 나타냄
브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때나 서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때 이용
let json = JSON.stringify(true);
console.log(json);
함수의 이름은 동일하지만 어떤 파라미터인지 몇개의 파라미터를 전달하는 지에 따라 각각 다른 방식으로 호출이 가능함 → 오버로딩
parse
JSON에 문자열 데이터를 넣으면 오브젝트로 변환됨
→ revier
콜백함수, 오브젝트가 만들어지는 과정을 세밀하게 조정하여 결과 값을 변형함
stringfy
어떤 타입의 오브젝트를 받아와서 문자열로 변환됨
→ replacer
콜백함수, 스트링이 만들어지는 과정을 세밀하게 조정하여 결과 값을 변형함
json = JSON.stringify(['apple', 'banana']);
console.log(json);
["apple","banana"]
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"}
json = JSON.stringify(rabbit, ["name"]);
console.log(json);
// {"name":"tori"}
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"}
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 강의 다음으로는
이 세 가지의 강의가 있었는 데 진도를 계속 나가는 것 보단 아무래도 이때까지 배운 내용을 복습하는 편이 나은 것 같아서 중도하차 했다. 엘리님이 엄청 세세하게 가르쳐주시지만 내가 다 받아먹지 못해서 생긴일...🥲
그리고 모던 JavaScript 튜토리얼 이라는 좋은 사이트를 알게 되어서 기존에 노션에 정리한 개념들을 추가 수정하고 있다. 배운 데 까지 다시 정리하려면 또 하루 넘게 걸리겠네 휴..