[JS] 실습 - 타이머 API

 

 

 

 

 

 

📌 타이머 API

 

 

 

📖 학습 목표

 

• 각 함수들을 실행해보고 어떤 함수들인지 주석 달기
• delay함수와 sleep함수의 차이점을 확인
• 다음 질문에 대한 답을 찾아보기

 

 

• callback 버튼은 runCallback 함수를 실행합니다.
• promise 버튼은 runPromise 함수를 실행합니다.
• async & await 버튼은 runAsync 함수를 실행합니다.

 

 

📍 delay함수와 sleep함수의 차이점

 

callback.js

const delay = (wait, callback) => {
  setTimeout(callback, wait);
}

 

promiseConstructor.js

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(resolve, wait);
  });
}

 

delay 함수는 콜백함수를 이용해서 setTimeout을 실행하고,

slee함수는 Promise를 사용해서 setTimeout을 실행한다.

 

 

📍각 함수들을 실행해보고 어떤 함수들인지 주석 달기

 

runCallback 함수

 

function runCallback() {
  resetTitle(); // 제목을 초기화하는 함수
  playVideo(); // 영상을 재생하는 함수

  delay(1000, () => {
    pauseVideo(); // 영상을 멈추는 함수
    displayTitle(); // 제목을 표시하는 함수

    delay(500, () => { // 콜백함수를 이용해서 delay 함수 호출
      highlightTitle(); // 제목을 강조하는 함수

      delay(2000, resetTitle); // 제목을 초기화하는 함수
    });
  });
}

 

runPromise 함수

 

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000).then(() => { // promise 사용해서 sleep 함수 사용
    pauseVideo();
    displayTitle();
  })
    .then(sleep.bind(null, 500)) // then 함수 사용해서 sleep함수 호출
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle)
}

 

runAsync 함수

 

async function runAsync() { // 함수 안에 async 키워드를 사용하고 async 함수 내에서만 await 키워드를 사용
  resetTitle();
  playVideo();

  await sleep(1000); 
  pauseVideo();
  displayTitle();

  await sleep(500);
  highlightTitle();

  await sleep(2000);
  resetTitle();
}

 

 

📍다음 질문에 대한 답을 찾아보기

 

🧐 Promise 실행 함수가 가지고 있는 두 개의 파라미터 resolve 와 reject 는 각각 무엇을 의미하나요?

 

🧑‍💼 resolve : 기능을 정상적으로 수행해서 최종적으로 데이터를 전달함
      reject : 기능을 수행하다가 중간에 문제가 생기면, 호출하게 됨

 

🧐 resolve, reject함수에는 전달인자를 넘길 수 있습니다. 이때 넘기는 전달인자는 어떻게 사용할 수 있나요?

 

🧑‍💼 실습해보기

 

promiseConstructor.js

 

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('hello');
    }, wait);
  });
};

 

runPromise 함수

 

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then((param) => {
      console.log(param);
      pauseVideo();
      displayTitle();
      return "world";
    })
    .then((param) => {
      console.log(param);
      return sleep(5000);
    })
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle);
}

 

 

실행결과

 

영상이 멈추면서 world 출력

 

 

🧐 new Promise()를 통해 생성한 Promise 인스턴스에는 어떤 메서드가 존재하나요? 각각은 어떤 용도인가요?

 

🧑‍💼

all: ƒ all() -> 배열안에 비동기 메서드를 각각 요소로 넣고 결과를 반환한 배열을 반환한다.
catch: ƒ catch() -> 오류를 인자로 받아 오류를 출력해줌
constructor: ƒ Promise() -> Promise 생성자 함수
finally: ƒ finally() -> 성공 실패 여부 상관없이 콜백함수 실행
then: ƒ then() -> resolve나 reject의 인자값을 받아온다. 콜백함수 실행

 

🧐 Promise의 세 가지 상태는 각각 무엇이며, 어떤 의미를 가지나요?

 

🧑‍💼

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

new Promise() 메서드를 호출하면 대기(Pending)상태가 된다.

Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

🧐 await 키워드 다음에 등장하는 함수 실행은 어떤 타입을 리턴할 경우에만 의미가 있나요?

 

🧑‍💼 await은 Promise가 fulfill되기를 기다렸다가, 해당 값을 리턴

 

🧐 await 키워드를 사용할 경우, 어떤 값이 리턴되나요?

 

🧑‍💼 실습해보기

 

promiseConstructor.js

 

resolve로 전달한 값이 리턴되어 변수에 할당된다.

 

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("hello");
    }, wait);
  });
};

let returnValue = await sleep(1000); // 개발자도구에 넣어보고 값 확인
returnValue // outPut -> 'hello'