자바스크립트에서 비동기 코드를 다루기 위해 callback 함수, Promise와 같은 패턴들이 사용되어 왔습니다. 그러나 ES8부터 도입된 async/await 구문을 사용하면 비동기 코드를 더욱 간결하게 작성할 수 있습니다. 이번 블로그 포스트에서는 async/await와 setTimeout 함수를 함께 사용하는 방법에 대해 알아보겠습니다.

setTimeout 함수란?

setTimeout 함수는 지정된 시간이 경과한 후에 콜백 함수를 실행시키는 함수입니다. 이 함수는 비동기적으로 작동하기 때문에 다른 코드가 실행되는 동안에도 시간이 경과되면 콜백 함수가 실행되게 됩니다. 일반적으로 setTimeout 함수는 콜백 함수를 인자로 받고, 실행될 시간(ms)을 인자로 받습니다.

setTimeout(() => {
  console.log('Hello, World!');
}, 1000); // 1초 뒤에 'Hello, World!' 출력

async/await 구문이란?

async/await 구문은 비동기 코드를 동기식으로 작성할 수 있게 해주는 자바스크립트의 문법적 기능입니다. async로 정의된 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다. await 키워드는 일반적으로 Promise를 반환하는 비동기 함수나 작업의 결과앞에 사용됩니다.

async function asyncFunction() {
  const result = await someAsyncTask();
  console.log(result);
}

async/await와 setTimeout 함께 사용하기

setTimeout 함수와 async/await를 함께 사용하려면 비동기 작업을 Promise로 감싸주어야 합니다. 다음 예제를 통해 설명해보겠습니다.

function delay(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

async function asyncTask() {
  console.log('Task started');
  await delay(2000); // 2초간 기다림
  console.log('Task completed');
}

asyncTask();

위 코드에서는 delay 함수를 정의하여 setTimeout 함수를 Promise로 감싸주었습니다. 이러면 delay 함수를 await로 호출하여 비동기 작업이 완료될 때까지 기다릴 수 있게 됩니다. asyncTask 함수가 호출되면 “Task started”가 출력되고, 2초 후에 “Task completed”가 출력됩니다.

마무리

이번 포스트에서는 자바스크립트의 async/await와 setTimeout 함수를 함께 사용하는 방법을 살펴보았습니다. async/await 구문을 사용하면 비동기 코드를 동기식으로 작성할 수 있다는 큰 장점을 가지고 있습니다. setTimeout 함수와 함께 사용하면 특정 시간이 경과된 후에 비동기 작업을 실행할 수 있게 됩니다. 이러한 패턴을 적절히 활용하여 자바스크립트에서 더욱 효율적이고 간결한 비동기 코드를 작성할 수 있습니다.