[한입챌린지] 7일차 - JS 동기와 비동기 (미션)

비동기 작업(Queue)의 처리 우선순위

---

수업에서 비동기 설명에 사용되는 Callback Queue에 대해 조사해 보면 Task를 관리하는 Queue가 더 존재함을 알 수 있다. Callback Queue는 정식 명칭이 아니라는 블로그도 있고, 잠깐 찾아보면 아래와 같은 우선순위로 Event Loop 에서 처리됨을 알 수 있다. Macrotask Queue에는 setTimeout, setInterval 함수 등이 있고, Microtask Queue에는 Promise, Async/Await, Object.Obserce 등이 있다. Animation Frames에는 requestAnimationFrame과 같이 브라우저 렌더링과 관련된 비동기 작업을 수행한다.

 

(1) Microtask Queue > (2) Animation Frames > (3) (Macro)Task Queue

 

각각 비동기 작업을 애니메이션으로 보여주는 참고자료

 

7일차 과제

---

(1) 우승자는? 광고 시청하고 오시겠습니다!

- 목표: 우승자를 긴장감 있게 발표하기 위해 시간을 끌어줄 비동기 함수가 필요합니다.

- 다음 요구사항에 만족하는 delay 함수를 구현하세요.

- 1. 매개변수 ms로 밀리세컨즈 초를 제공받습니다.

- 2. 제공바든 ms만큼 대기했다가 resolve를 호출해 비동기 작업을 완료합니다.

- 힌트: Promise를 반환하는 함수는 비동기 함수가 됩니다.

- 힌트: setTimeout을 이용하면 특정 ms 만큼 기다렸다가 코드를 실행할 수 있습니다.

function delay(ms) {
  // 여기에 코드를 작성하세요
}

async function main() {
  console.log("3초 후 결과를 공개하겠습니다!");
  await delay(3000);
  console.log("승자는 이정환!");
}

main();
// 출력 결과 :
// 3초 후 결과를 공개하겠습니다!
// 승자는 이정환!

 

(2) 주문 접수 -> 처리 -> 취소하기

- 목표: Promise 체이닝을 이용해 여러개의 비동기 함수를 연달아 실행시켜야 합니다.

- 다음 요구사항을 만족하는 코드를 작성하세요.

- 다음 3개의 비동기 함수를 순서대로 연달아 실행시키세요. (함수를 수정해서는 안됩니다.)

   - i. revcievOrder: 주문을 받는 함수, 첫번째로 호출되어야 합니다.

   - ii. processOrder: 1번에서 받은 주문을 처리하는 함수, 두번째로 호출되어야 합니다.

   - iii. cancelOrder: 2번에서 처리가 완료된 주문을 취소하는 함수, 세번째로 호출되어야 합니다.

- 예외 상황을 방지하는 에러 핸들링 코드가 필요합니다.

   - 비동기 작업에서 오류가 발생할 경우 console.error() 메서드를 호출해 에러 메시지를 출력합니다.

/* 1. 주문하는 기능 (수정 X) */
function receiveOrder() {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log("주문 접수가 완료되었습니다.");
      resolve("주문번호: 123");
    }, 2000)
  );
}

/* 2. 주문을 처리하는 기능 (수정 X) */
function processOrder(orderId) {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(`[${orderId}] 주문이 처리 되었습니다.`);
      resolve(orderId);
    }, 2000)
  );
}

/* 3. 주문을 취소하는 기능 (수정 X) */
function cancelOrder(orderId) {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(`[${orderId}] 주문이 취소되었습니다`);
      resolve();
    }, 1500)
  );
}

// 여기에 코드를 작성하세요

// 출력 결과 :
// 주문 접수가 완료되었습니다.
// [주문번호: 123] 주문이 처리 되었습니다.
// [주문번호: 123] 주문이 취소되었습니다

 

정답: 내 GitHub 저장소에 올려둬음

https://github.com/redcontroller/onebite-react/blob/main/section02/mission-day07.js

onebite-react/section02/mission-day07.js at main · redcontroller/onebite-react

 

 

 

출처

---

(강의) 한입 크기로 잘라 먹는 리액트

(코드) GitHub - 강의 노트