[자바스크립트 14일 완전정복] 8일차 - 비동기 처리 (Async & Await, Promise)

 

 

자바스크립트는 싱글 스레드(Single Thread) 기반 언어라서 한 번에 하나의 작업만 실행할 수 있어요. 하지만, 비동기 처리(Asynchronous Processing) 개념을 활용하면 시간이 오래 걸리는 작업(예: API 요청, 파일 읽기 등)을 중단하지 않고 효율적으로 실행할 수 있습니다.
오늘은 비동기 처리의 핵심 개념인 동기 vs 비동기, setTimeout과 setInterval, Promise, 그리고 async/await를 배워보겠습니다.

 

---

 

1. 동기(Synchronous) vs. 비동기(Asynchronous) 개념

1.1 동기 처리란?

동기(Synchronous) 방식은 코드가 순차적으로 실행되는 방식이에요.

console.log("작업 1 시작");
console.log("작업 2 실행");
console.log("작업 3 완료");

출력 결과:

작업 1 시작
작업 2 실행
작업 3 완료

✔ 순차적으로 실행되므로 코드 흐름이 직관적

하지만, 동기 방식에서는 시간이 오래 걸리는 작업이 있을 경우 전체 프로그램이 멈추는 문제가 발생할 수 있어요.

 

1.2 비동기 처리란?

비동기(Asynchronous) 방식은 어떤 작업이 끝날 때까지 기다리지 않고, 다음 코드를 먼저 실행합니다.

console.log("작업 1 시작");

setTimeout(() => {
  console.log("작업 2 실행 (3초 후)");
}, 3000);

console.log("작업 3 완료");

출력 결과:

작업 1 시작
작업 3 완료
작업 2 실행 (3초 후)

✔ setTimeout()이 실행된 후, 3초를 기다리지 않고 다음 코드(작업 3 완료)가 먼저 실행됨

 

---

 

2. setTimeout()과 setInterval() 이해

2.1 setTimeout() - 일정 시간 후 코드 실행

console.log("시작");

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);

console.log("끝");

✔ setTimeout()은 특정 시간이 지난 후 한 번만 실행됨

 

2.2 setInterval() - 일정 시간마다 반복 실행

setInterval(() => {
  console.log("2초마다 실행");
}, 2000);

✔ setInterval()은 특정 시간 간격마다 반복 실행됨
✔ clearInterval()을 사용하면 반복 중단 가능

let count = 0;
let interval = setInterval(() => {
  count++;
  console.log(`반복 실행: ${count}`);
  if (count === 5) {
    clearInterval(interval);
    console.log("반복 종료");
  }
}, 1000);

 

 

 

---

 

3. Promise 기초 및 활용

3.1 Promise란?

Promise는 비동기 작업을 더 체계적으로 관리하기 위한 객체예요.

• pending (대기): 비동기 작업이 진행 중
• fulfilled (성공): 작업 완료
• rejected (실패): 작업 실패

 

3.2 Promise 기본 구조

let myPromise = new Promise((resolve, reject) => {
  let success = true;
  
  setTimeout(() => {
    if (success) {
      resolve("작업 성공!");
    } else {
      reject("작업 실패!");
    }
  }, 2000);
});

myPromise
  .then(result => console.log(result)) // 성공 시 실행
  .catch(error => console.log(error)); // 실패 시 실행

출력 결과 (2초 후):

작업 성공!

✔ resolve()를 호출하면 .then()이 실행되고, reject()를 호출하면 .catch()가 실행됨

 

3.3 Promise 체이닝 (Chaining)

비동기 작업을 순차적으로 실행할 때 콜백 지옥(Callback Hell)을 방지하기 위해 Promise 체이닝을 사용합니다.

function step1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("1단계 완료");
      resolve("step1 결과");
    }, 1000);
  });
}

function step2(prevResult) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("2단계 완료", prevResult);
      resolve("step2 결과");
    }, 1000);
  });
}

function step3(prevResult) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("3단계 완료", prevResult);
    }, 1000);
  });
}

step1()
  .then(result => step2(result))
  .then(result => step3(result))
  .catch(error => console.log(error));

✔ Promise를 활용하면 비동기 작업을 순차적으로 실행하면서도 코드 가독성을 높일 수 있음

 

---

 

4. async와 await의 사용법

4.1 async/await란?

async/await은 Promise를 더 간단하고 직관적으로 사용할 수 있도록 도와주는 문법입니다.
✔ await을 사용하면 Promise의 결과를 기다렸다가 다음 코드 실행
✔ async 함수 내부에서만 await 사용 가능

 

4.2 async/await 기본 사용법

async function fetchData() {
  let result = await new Promise(resolve => {
    setTimeout(() => resolve("데이터 로딩 완료!"), 2000);
  });

  console.log(result);
}

fetchData();

출력 결과 (2초 후):

데이터 로딩 완료!

✔ await이 실행될 때까지 다음 코드가 실행되지 않음

 

4.3 async/await와 try...catch 활용

async function fetchData() {
  try {
    let result = await new Promise((resolve, reject) => {
      let success = true;
      setTimeout(() => {
        if (success) resolve("데이터 불러오기 성공!");
        else reject("데이터 불러오기 실패!");
      }, 2000);
    });

    console.log(result);
  } catch (error) {
    console.log("오류 발생:", error);
  }
}

fetchData();

✔ try...catch를 사용하면 에러 발생 시 예외 처리 가능

 

---

 

 

오늘은 자바스크립트의 비동기 처리 방식을 배웠어요.
✅ setTimeout(), setInterval()을 사용하면 특정 시간 후 또는 일정 간격마다 코드 실행 가능
✅ Promise를 사용하면 비동기 작업을 더 체계적으로 관리 가능
✅ async/await을 사용하면 가독성 높은 비동기 코드 작성 가능
✅ try...catch를 활용하면 에러 발생 시 예외 처리 가능

다음 강좌에서는 DOM 조작과 이벤트 핸들링에 대해 학습해보겠습니다! 🚀