동기와 비동기

동기(synchronous)

JavaScript의 동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것’을 의미합니다. 주문 즉시 붕어빵을 만들어 주는 노점상이 있다고 생각해 봅시다. 동기적으로 운영되는 노점상의 경우 붕어빵을 주문받은 후 주문받은 붕어빵이 다 만들어지고 난 후에야 다음 손님의 주문을 받고 붕어빵을 제작하게 됩니다. 이 경우 여러 손님의 주문을 소화하기에는 무리가 있습니다.

비동기(asynchronous)

JavaScript의 비동기 처리는 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것’을 의미합니다. 앞선 예시로 든 노점상이 비동기적으로 운영되는 경우 여러 손님의 주문을 받으면서 붕어빵을 제작하게 되고 완성되는 대로 손님에게 붕어빵을 제공하게 됩니다. 동기적으로 운영하는 경우보다 훨씬 효율적입니다.

Promise, Async/Await

비동기로 작동하는 코드를 제어할 수 있는 다른 방법은 Promise를 활용하는 방법입니다. 또한 Callback Hell을 방지하는 역할도 수행합니다.

• JS는 기본적으로 비동기. 비동기를 동기로 바꾸는 코드

// 터미널에 `node index.js`입력하여 비동기 코드가 작동하는 순서를 확인해보세요.
const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
      console.log(string);
    }, Math.floor(Math.random() * 100) + 1);
  });
};

const printAll = async () => {
  await printString('A');
  await printString('B');
  await printString('C');
};

printAll();

console.log(
  `Async/Await을 통해 Promise를 간결한 코드로 작성할 수 있게 되었습니다.`
);