싱글스레드

• 자바스크립트는 싱글스레드이다.
• 즉, 하나의 일이 끝날 때까지 다른 일을 하지 못한다.
• 따라서 비동기로 이러한 문제점을 해결할 수 있다.

Callback 함수, Promise, Async Await을 이용할 수 있다.

콜백 함수(Callback)

• 특정 함수에 매개변수로 전달된 함수이다.
• 콜백 함수는 함수를 전달받은 함수 안에서 호출된다.
• but 가독성이 떨어지고, 모든 콜백에서 각각 에러 핸들링을 해줘야한다.

Promise

• promise 객체는 new와 생성자 키워드를 사용하여 만든다.
• 비동기 작업이 맞이할 미래의 완료/실패/결과값을 나타낸다.
• Promise 의 상태
  1) 대기 (pending)
  2) 이행 (fulfilled)
  3) 거부 (rejected)

let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout(function () {
    resolve("성공!"); // 와! 문제 없음!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage는 위에서 resolve(...) 호출에 제공한 값입니다.
  // 문자열이어야 하는 법은 없지만, 위에서 문자열을 줬으니 아마 문자열일 것입니다.
  console.log("와! " + successMessage);
});

promise.all()

• 순회 가능한 객체에 주어진 모든 프로미스가 이행된 후 or 프로미스가 주어지지 않았을 때 이행하는 프로미스를 반환한다.
• 주어진 프로미스 중 하나가 거부하면 첫 번째로 거절한 프로미스를 이유를 사용해 자신도 거부한다.

promise.race()

• promise 객체를 반환한다.
• iterable 안의 프로미스 중 가장 먼저 완료된 것의 결괏값으로 그대로 이행하거나 거부한다.

Async Await

• 비동기 코드를 동기 코드처럼 보이게 한다.
• promise에 then을 체인 형식으로 하는 것보다 가독성이 좋다.
• 내부 함수에서만 사용 가능하다.
• 동기식 코드에서의 try...catch 구문을 asynce/await 구조에서 사용할 수 있다.