3-2. 과제 Part 1 - 타이머 API

Part 1 - 타이머 API 개요

 

이번 과제에서는 비동기를 이해하기 위해 비슷한 상황을 연출합니다. 가장 간단한 비동기 구현은 타이머 API를 이용하는 방법입니다.

지금은 API가 소통하기 위한 인터페이스라는 것만 알면 됩니다. 타이머 API는 setTimeout()이라는 메서드를 이용해 구현할 수 있습니다. 구현된 타이머 API는 여러분이 익히 아는 타이머 기능을 수행할 수 있습니다.

callback과 promise, 그리고 async/await 키워드를 이용한 비동기 흐름을 제어하는 방법을 코드를 통해 살펴봅니다.

학습 목표

• callback, Promise, async/await 구현 방법을 이해한다.
• Promise 실행 함수가 가지고 있는 두 개의 매개변수 resolve 와 reject를 활용할 수 있다.
• new Promise()를 통해 생성한 Promise 인스턴스가 사용할 수 있는 메서드의 용도를 이해한다.
• Promise의 세 가지 상태는 각각 무엇인지 설명할 수 있다.
• async/await 키워드와 함께 실행되는 함수는 어떤 타입이어야 하는지 이해한다.
• await 키워드를 사용할 경우 어떤 값이 리턴되는지 설명할 수 있다.

 

---

시작하기

Getting started

레포지토리에 접속해 코드를 클론합니다.

Part I의 모든 코드는 이미 작성되어 있습니다.

1. 'part-1/index.html'을 브라우저에서 열어 보고, callback, Promise, async & await 버튼을 각각 클릭해 보세요. 이 버튼들은 정확히 동일한 액션을 하지만, 그 구현 방법은 조금씩 다릅니다.
   
   
2. 어떤 함수가 실행되는지 'part-1/script.js' 파일을 열어 확인해 보세요.
   • callback 버튼은 runCallback 함수를 실행합니다.
   • promise 버튼은 runPromise 함수를 실행합니다.
   • async & await 버튼은 runAsync 함수를 실행합니다.
     
     
3. delay 함수와 sleep 함수의 차이점을 확인해 보세요.
   • 해당 함수는 'part-1/01_callback.js' 파일, 그리고 'part-1/02_promiseConstructor.js' 파일에 각각 구현되어 있습니다.
     
     
4. runAsync 함수는 async 및 await 키워드의 사용법을 보여 줍니다. 비동기 함수가 마치 동기 함수처럼 작동합니다. 그러나 실제로는 Promise를 이용하여 결과를 리턴합니다.
   
   

Bare Minimum Requirements

• 세 가지 패턴의 비동기 코드를 사용하는 방법이 어떻게 다른지 이해하세요.
• 다음 질문에 대한 답을 찾아보세요. 실시간 세션을 통해 답을 확인합니다.
  
  

질문

• Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?
• resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?
  1. 직접 눈으로 확인해 보면 쉽게 이해할 수 있습니다. 반드시 다음을 실습해 보세요.
  2. sleep 함수를 아래와 같이 수정합니다.

---