2020.06.30(화) Sprint 5. Asynchronous & Promise

Today I Learned

fetch API를 활용하여 Promise를 실습해보았다.

fetch(URL).then((reponse) => response.json()).then((data) => console.log(data));

Promise 생성자와 Promise 인스턴스에서 사용할 수 있는 메서드를 사용해보았다.

• Promise 생성자 메서드: resolve, reject, all, allSettled, race
  • resolve(value): 주어진 값을 이행하는 Promise 객체를 반환한다.
  • reject(reason): 주어진 이유로 거부된 Promise 객체를 반환한다.
  • all(iterable object): 객체 내 모든 Promise를 이행하고, 이행된 결과값을 배열로 then으로 전달하거나, 하나라도 거부가 된다면 catch의 에러 이유가 전달된다.
  • allSettled: all과 달리 이행과 거부가 담긴 모음을 인자로 전달한다. status를 통해 상태를 확인할 수 있다.
  • race: 가장 먼저 이행된 값만 전달한다.
• Promise 인스턴스 메서드: then, catch, finally
  • then method: Promise 인스턴스 내에서 resolve 함수가 호출되면 실행되는 메서드
  • catch method: Promise 인스턴스 내에서 reject 함수가 호출되면 실행되는 메서드
  • finally method: promise 처리가 완료되면 결과에 상관없이 지정된 콜백함수를 실행하는 메서드

Promise의 상태를 확인해보았다.

• pending: 이행되거나 거부되지 않은 초기 상태
• fulfilled: 연산이 성공적으로 완료되어 이행된 상태
• rejected: 연산에 실패하여 거부된 상태

const pending = new Promise(() => {});
const resolve = Promise.resolve(10);
const reject = Promise.reject(10);

console.log(pending);
// [[PromiseStatus]]: "pending"
// [[PromiseValue]]: undefined
console.log(resolve);
// [[PromiseStatus]]: "resolved"
// [[PromiseValue]]: 10
console.log(reject);
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: 10

event loop를 학습했다.

• stack이 모두 비워지면 실행되어 task queue에 저장된 작업을 stack으로 전달하는 역할을 한다.
• ECMAScript 자체에는 없지만, 브라우저 혹은 Node.js가 가지고 있다.

nodejs 환경에서 fetch는 사용할 수 없지만 third-party 모듈인 node-fetch를 사용하면 사용할 수 있다.

---

이번 스프린트는 굉장히 알차게 보낸 느낌이다. 배운 내용을 정리하여 모두 README.md에 기록했고, 별개의 파일을 만들어 하나씩 구현을 해보았다. 작성하면서 현재 부족한 부분은 무엇이고, 잘하고 있는 것은 무엇인지 객관적으로 판단할 수 있어서 매우 큰 도움이 되었다. 앞으로도 이런 식으로 학습을 해야겠다!