[Angular/JS] async 함수에서 setTimeout은 기다려줄까? (Promise 없이)

자바스크립트 및 Angular 개발 시 자주 헷갈리는 비동기 처리에 대해 알아보겠습니다.

 

특히 async 함수 내에서 setTimeout을 사용할 때, 별도의 Promise 선언 없이도 함수가 기다려주는지 궁금해하시는 분들이 많습니다.

1. 결론: 기다려주지 않습니다!

async와 await는 Promise를 기반으로 작동합니다. 하지만 setTimeout은 자바스크립트의 초기 설계 단계에서 만들어진 함수로, Promise를 반환하지 않고 콜백 함수를 인자로 받습니다.

따라서 await setTimeout(...)과 같이 코드를 작성하더라도, setTimeout이 Promise를 반환하지 않기 때문에 엔진은 이를 기다려야 할 대상으로 인식하지 않고 다음 코드를 즉시 실행합니다.

---

2. 코드 예시로 비교하기

❌ 잘못된 사용 (기다리지 않음)

async myProcess() {
  console.log("시작");
  
  // await를 붙여도 setTimeout은 Promise를 반환하지 않으므로 무시됨
  await setTimeout(() => {
    console.log("3초 뒤 실행?");
  }, 3000);

  console.log("끝"); 
}

// 출력 결과:
// 시작
// 끝
// (3초 후) 3초 뒤 실행?

위 코드에서 "끝"이 "3초 뒤" 보다 먼저 출력됩니다. await가 제 역할을 하지 못한 것이죠.

---

3. 해결 방법: Promise로 감싸기 (Wrapping)

setTimeout을 await가 인식할 수 있게 만들려면, 직접 Promise 객체로 감싸주어야 합니다.

✅ 올바른 사용 (기다림)

async myProcess() {
  console.log("시작");

  // Promise를 생성하여 resolve가 호출될 때까지 기다리게 함
  await new Promise(resolve => setTimeout(resolve, 3000));

  console.log("3초 뒤 끝");
}

// 출력 결과:
// 시작
// (3초 대기)
// 3초 뒤 끝

---

4. Angular에서의 팁: RxJS delay 활용

Angular 프로젝트라면 setTimeout 대신 RxJS의 delay나 timer를 lastValueFrom과 함께 사용하여 더 세련되게 처리할 수도 있습니다.

import { lastValueFrom, timer } from 'rxjs';

async myProcess() {
  console.log("시작");
  
  // RxJS의 timer를 Promise로 변환하여 사용
  await lastValueFrom(timer(3000));
  
  console.log("3초 뒤 끝");
}

---

💡 요약

• async/await는 Promise를 기다리는 도구다.
• setTimeout은 Promise를 반환하지 않으므로 그냥 쓰면 기다려주지 않는다.
• 해결하려면 new Promise로 감싸거나, RxJS의 도구를 활용해야 한다.