동기인가 비동기인가?

ℹ️ 동기식 처리는 요청에 대한 응답을 기다린 후, 응답이 오면 다음 요청을 하는 방식

ℹ️ 비동식 처리는 요청에 대한 응답을 기다리지 않고, 다음 동작을 실행하는 방식

---

비동기처리는 왜 할까?

동시에 여러 일을 수해알 수 있지만, 일정 시간당 요청량이 많이질 경우, 부하가 발생할 수 있으며, 이를 위한 추가적인 처리가 필요할 수 있음

비동기 함수를 동기 함수로 만드는 방법은?

• callback함수
• promise객체
• async/await

---

callback함수
자바스크립트에서 콜백 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미

callback함수 문제점
전통적인 콜백 패턴은 일명 '콜백 지옥'로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는데 한계를 느꼈다.

---

promise객체
프로미스는 ES6에서 도입된, 콜백 함수의 문제점인 비동기 처리를 해결하기 위한 또 하나의 패턴이다.

Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다.

const promise = new Promise((resolve, reject) => {
  if (/* 비동기 처리 성공 */) {
    resolve('result');
  } else { /* 비동기 처리 실패 */
    reject('failure reason');
  }
});

Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다. 이때 비동기 처리가 성공하면 resolve를, 실패하면 reject를 호출한다.

---

async/await
async/await는 프로미스를 기반으로 동작하기 때문에 프로미스의 then/catch/finally 등의 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이
마치 동기 처리처럼 프로미스를 사용할 수 있다.

async는 function 앞에 위치합니다.

📍 async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다.

await는 async 함수 안에서만 동작합니다.

📍 자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다립니다. 결과는 그 이후 반환됩니다.

async function foo() {
  const a = await new Promise((resolve) => setTimeout(() => resolve(1), 3000));
  const b = await new Promise((resolve) => setTimeout(() => resolve(2), 2000));
  const c = await new Promise((resolve) => setTimeout(() => resolve(3), 1000));

  console.log([a, b, c]); // [1, 2, 3]
}

foo(); // 약 6초 소요된다.

---

Promise와 async/await의 차이점

1. 에러 핸들링
   Promise는 .catch() 문을 통해 에러 핸들링을 해야 하지만,
   async/await은 try / catch를 통해 에러를 처리할 수 있다.

2. 코드 가독성
   Promise의 후속 처리 메서드인 .then()의 hell의 가능성
   async/await은 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있기 때문에 코드 흐름을 이해 하기 쉽다.