JavaScript 및 TypeScript에서 비동기 작업을 다룰 때 setTimeout 함수와 async/await 구문을 함께 사용하는 경우가 있습니다. 이러한 조합은 프로그램이나 웹 애플리케이션에서 비동기적으로 실행되는 작업을 조절하고 관리하는 데 도움이 됩니다.

이번 블로그에서는 async/await와 setTimeout 함수의 조합에 대해 설명하고, 간단한 예제를 통해 이들을 어떻게 함께 사용할 수 있는지 살펴보겠습니다.

목차

• async/await와 setTimeout의 개요
• async/await와 setTimeout의 예제 코드
• 결론

개요

async/await는 비동기 작업을 보다 간결하고 명확하게 다룰 수 있도록 도와주는 JavaScript 및 TypeScript의 특징입니다. 비동기 함수 내에서 await 키워드를 사용하면 해당 함수가 완료될 때까지 기다린 다음 다음 작업을 수행할 수 있습니다.

한편, setTimeout 함수는 주어진 시간만큼의 지연 후에 특정 작업을 수행하기 위해 사용됩니다. 이 함수는 비동기적으로 동작하며, 콜백 함수를 실행시키기 위해 자주 사용됩니다.

이 두 가지를 함께 사용하면 async/await를 통해 비동기적인 작업을 조절하면서, setTimeout을 이용해 특정 시간 이후에 작업을 수행할 수 있게 됩니다.

예제 코드

아래는 TypeScript에서 async/await와 setTimeout 함수를 함께 사용한 간단한 예제입니다.

async function delayLog(message: string, delay: number) {
  await new Promise(resolve => setTimeout(resolve, delay));
  console.log(message);
}

async function main() {
  console.log('Start');
  await delayLog('Delayed message', 2000);
  console.log('End');
}

main();

위 예제에서 delayLog 함수는 주어진 지연 시간 후에 메시지를 출력하는 비동기 함수입니다. main 함수에서 delayLog 함수를 await 키워드를 통해 호출하고 있습니다. 이를 실행하면 Start가 출력된 후 2초 후에 Delayed message와 End가 순서대로 출력될 것입니다.

결론

async/await와 setTimeout 함수는 JavaScript 및 TypeScript에서 비동기 작업을 다룰 때 유용하게 활용될 수 있습니다. 이 두 가지를 효과적으로 조합하여 프로그램의 비동기적인 동작을 요구 사항에 맞게 제어할 수 있습니다.