동기

특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것

비동기

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 것

---

타이머 관련 API

setTimeout(callback, millisecond) : 일정 시간 후에 함수를 실행

• 매개변수 : 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)
• return 값 : 임의의 타이머 ID

setTimeout(function() {
console.log("첫 번째 메시지")
}, 5000);    // 5초 후 콘솔창에 첫 번째 메시지 출력

clearTimeout(timerId) : setTimeout 타이머를 종료

• 매개변수 : 타이머 ID
• return 값 : 없음

const timer = setTimeout(function() {
console.log("첫 번쨰 메시지")
}, 5000);
clearTimeout(timer);

setInterval(callback, millisecond) : 일정 시간의 간격을 가지고 함수를 반복적으로 실행

• 매개변수 : 실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간 간격(밀리초)
• return 값 : 임의의 타이머 ID

setInterval(function() {
console.log("첫 번째 메시지")
}, 1000);

clearInterval(timerId) : setInterval 타이머를 종료

• 매개변수 : 타이머 ID
• return 값 : 없음

const timer = setInterval(function() {
console.log("첫 번째 메시지")
}, 1000);
clearInterval(timer);

---

Part-1 타이머 API 과제

https://github.com/forhrever/fe-sprint-async-and-promise.git

promiseConstructor.js

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(() => {     // 일정 시간 후에 함수를 실행
      resolve('hello');   // 타이머 아이디
    }, wait);
  });
}

script.js

function runPromise() {
  resetTitle();   // 제목을 초기화합니다.
  playVideo();    // 영상을 재생합니다. 

  sleep(1000).then((param) => {
    console.log(param);     //sleep(1000)에서 return 값으로 나온 hello를 첫번째 then 이 param으로 받고 출력하고
    pauseVideo();     // 영상을 멈춥니다.
    displayTitle();   // 제목을 표시합니다.
    return "world";    // world 출력 
  })
    .then((param) => {
      console.log(param);  // 리턴값으로 준 world가 두번쨰 then에서 param으로 받습니다
      return sleep(5000);  // 5초 실행 ? 
    })
    .then(highlightTitle)  // 제목을 강조합니다. // than()으로 여러 개의 프로미스를 연결하는 방식 
    .then(sleep.bind(null, 2000)) // 2초후에 실행?
    .then(resetTitle) // 제목을 초기화합니다. 
    .catch(err => {
      console.log(err);
    })
}

// 제목을 초기화합니다 / 영상을 재생합니다. -> 1초 후 -> 영상을 멈춥니다. / 제목을 표시합니다. -> 5초 후 -> 제목을 강조합니다. -> 2초 후 -> 제목을 초기화합니다.

---

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

• Promise.reject(reason) - 주어진 사유로 거부하는 Promise 객체를 반환합니다. (실패했을때)
• Promise.resolve() - 주어진 값으로 이행하는 Promise 객체를 반환합니다. (성공했을때)

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

• resolve로 넘긴 전달인자는 then으로 받아서 사용할 수 있음
• reject로 넘긴 전달인자는 catch로 받아서 사용할 수 있음

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

• then : Promise가 성공했을 때 실행되며, resolve 전달인자가 전달됨
• catch : Promise가 실패했을 때 실행되며, reject의 전달인자가 전달됨
• finally : Promise의 성공과 실패와 상관없이 실행됨

Q : Promise.prototype.then 메서드는 무엇을 리턴하나요? -> 성공했을때
Q : Promise.prototype.catch 메서드는 무엇을 리턴하나요? -> 실패했을때

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

• 이행(fulfilled) : Promise 성공 (연산이 성공적으로 완료됨)
• 거부(rejected) : Promise 실패 (연산이 실패함)
• 대기(pending) : fulfilled, rejected가 아닌 상태

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

• promise타입을 리턴

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

• Promise의 resolve로 전달된 값이 리턴