지난 2주동안 갑자기 내용이 너무 어려워져서 따라가느라고 TIL 정리할 시간이 없었다...🤦♀️ 그리고 연휴에 정리하려고 했는데 너무 열심히 놀았고 ㅋㅋㅋㅋㅋ
오늘부터는 다시 TIL을 열심히 써야겠다!!
Ajax
Asynchronous JavaScript And XML 의 약자
서버와 비동기적으로 통신할 때 사용하는 API
과거에는 XMLHttpRequest를 사용했지만, 현재는 fetch를 사용한다.
HTTP (hypertext transfer protocol)란?
→ 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약
(ex. 사이트 방문 시 웹 페이지가 없으면 404 not found라고 뜨고 잘 가져오면 200 OK)
json-server
json server 설치 링크
→ 연습용 서버를 만들 수 있게 해주는 라이브러리
Asynchronous / Synchronous
자바스크립트는 싱글 스레드 방식인데 이를 보완하기 위해 비동기(Asynchronous)라는 개념을 사용한다.
비동기란 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 Ajax라고 부른다.
callback
→ 함수의 인자로 전달된 함수
Promise
→ 비동기 동작을 잘 처리하기 위한 도구, fetch api가 promise를 이용한다.
→ callback 지옥을 탈출할 수 있게 해줌!!
state로는 pending / fulfilled / rejected를 갖는다.
Producer
- Promise 객체를 생성하면 두 가지 콜백함수를 인자로 가지는 executor라는 콜백함수를 전달해야 한다.
resolve()는 이행시 실행되고 이는.then()을 이용하여 처리 결과 값을 받을 수 있다.reject()호출 시 rejected state가 되고 이 경우 실패한 이를catch()로 받을 수 있다.
const promise = new Promise((resolve, reject) => {
//doing some heavy work(network, read files)
console.log('doing something...');
setTimeout(() => {
resolve('data')
}, 1000);
});Consumer
promise
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error)
});fetch
→ fetch() 는 첫번째 인자로 url 두 번째 인자로 옵션 객체를 받고 promise를 return한다.
- promise는 then을 호출하면 된다.
- then에는 함수를 넣어준다.
- 그 함수는 이 작업이 성공됐을 때 호출될 것이다
- 함수의 첫번째 parameter에는 데이터가 들어가있다.
then & catch
- promise는 성공했을 때 then의 콜백함수를 호출하고 실패했을 때 catch의 콜백함수를 호출한다.
- then의 콜백함수가 promise를 리턴하면 그 다음 then이 이를 처리할 수 있다.
Rest API
→ (REpresentational State Transfer) 아키텍처 스타일의 디자인 원칙을 준수하는 API
REST API 디자인 가이드
- url은 정보의 자원을 표현해야 한다.
- 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.
Create → POST
Read → GET
Update → PUT
Delete → DELETE
