자바스크립트 비동기 처리 개념 정리(setTimeout, Promise, async/await)

자바스크립트는 기본적으로 싱글 스레드 언어입니다. 하지만 실제 웹 애플리케이션에서는 서버에서 데이터를 불러오거나, 타이머 등을 통해 비동기 작업을 자주 처리하게 됩니다. 이 글에서는 자바스크립트 비동기 처리의 기본 개념부터 대표적인 사용 방식인 setTimeout, Promise, async/await까지 단계별로 정리합니다.

---

✨ 비동기 처리란?

• 코드가 순차적으로 실행되지 않고, 결과가 나중에 도착하는 작업을 처리하는 방식입니다.
• 대표적인 예: API 호출, 파일 읽기, 타이머, 이벤트 리스너

---

⏳ setTimeout: 가장 기본적인 비동기 처리

console.log("1초 후 실행 시작");
setTimeout(() => {
  console.log("1초 후 실행됨");
}, 1000);
console.log("즉시 실행 완료");

• setTimeout은 특정 시간 후 함수를 실행합니다.
• 메인 코드 실행이 멈추지 않고 다음 줄로 넘어갑니다.

---

🔁 콜백 지옥의 시작

setTimeout(() => {
  console.log("1단계 완료");
  setTimeout(() => {
    console.log("2단계 완료");
    setTimeout(() => {
      console.log("3단계 완료");
    }, 1000);
  }, 1000);
}, 1000);

• 이런 중첩된 콜백 구조는 **콜백 지옥(callback hell)**이라고 부릅니다.
• 가독성이 나쁘고 유지보수가 어렵습니다.

---

🔗 Promise: 비동기 처리의 새로운 방식

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

delay(1000)
  .then(() => {
    console.log("1초 대기 완료");
    return delay(1000);
  })
  .then(() => {
    console.log("2초 대기 완료");
  });

• Promise는 비동기 작업의 성공(resolve) 또는 **실패(reject)**를 표현합니다.
• then() 체인을 통해 순차적인 처리가 가능합니다.

---

⚡ async/await: 가장 직관적인 비동기 처리

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

async function process() {
  console.log("대기 시작");
  await delay(1000);
  console.log("1초 후");
  await delay(1000);
  console.log("2초 후");
}

process();

• async 함수 안에서 await 키워드를 사용하면 비동기 처리를 동기식처럼 작성할 수 있습니다.
• 가독성이 높고, 오류 처리를 try...catch로 쉽게 할 수 있습니다.

---

✅ 비교 요약

방식	주요 특징	단점
setTimeout	기본적인 비동기 호출	중첩이 많아지면 복잡해짐
Promise	then()으로 체인 연결 가능	중첩 구조가 여전히 존재 가능
async/await	동기처럼 작성할 수 있어 가독성 우수	async 함수 안에서만 사용 가능

---

✨ 결론

자바스크립트의 비동기 처리는 필수적인 개념입니다. 단순한 딜레이부터 복잡한 API 요청까지 setTimeout, Promise, async/await는 각각의 쓰임새가 있습니다. 현대적인 코드에서는 async/await을 기본값처럼 사용하고, Promise는 구조적으로 복잡한 경우에 보완용으로 활용하는 것이 좋습니다.