JavaScript async/await와 Promise – 깔끔하고 안전하게 쓰는 실전 패턴

 

 

안녕하세요 😊
비동기 처리(Asynchronous)는 현대 JavaScript 개발에서 빼놓을 수 없는 핵심 개념입니다.
특히 API 요청, 파일 읽기, 타이머 등 시간이 걸리는 작업을 효율적으로 다루기 위해
Promise와 async/await는 필수 문법입니다.

이번 글에서는 초보자도 쉽게 이해할 수 있도록
Promise → async/await 변환과 실무에서 깔끔하게 쓰는 패턴을 정리해보겠습니다.

---

📍 1. Promise 기본 구조

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("데이터 로드 완료"), 1000);
  });
}

getData()
  .then((res) => console.log(res))
  .catch((err) => console.error(err));

• .then() : 성공 시 실행
• .catch() : 실패 시 실행
• .finally() : 성공/실패 상관없이 실행

---

📍 2. async/await로 변환

async function fetchData() {
  try {
    const res = await getData();
    console.log(res);
  } catch (err) {
    console.error(err);
  }
}

fetchData();

• async : 함수가 Promise를 반환하도록 함
• await : Promise가 처리될 때까지 기다림
• 동기 코드처럼 읽히는 가독성 장점

---

📍 3. 실무 패턴 – 에러 핸들링 함수화

async function tryCatch(promise) {
  try {
    const data = await promise;
    return [data, null];
  } catch (error) {
    return [null, error];
  }
}

// 사용
const [data, err] = await tryCatch(getData());
if (err) return console.error(err);
console.log(data);

• 반복되는 try/catch 제거
• 튜플 형태로 결과/에러를 한 번에 처리

---

📍 4. Promise.all로 병렬 처리

async function loadAll() {
  const [user, posts] = await Promise.all([
    fetch("/api/user").then((r) => r.json()),
    fetch("/api/posts").then((r) => r.json())
  ]);
  console.log(user, posts);
}

• 여러 비동기 작업을 동시에 실행
• 전체 작업이 끝날 때까지 기다린 후 결과 반환

---

📍 5. Promise.race로 가장 빠른 결과 받기

async function loadAll() {
  const [user, posts] = await Promise.all([
    fetch("/api/user").then((r) => r.json()),
    fetch("/api/posts").then((r) => r.json())
  ]);
  console.log(user, posts);
}

• 여러 요청 중 가장 빠른 응답만 사용

---

📍 6. 실무 주의사항

• await는 forEach 대신 for...of
  (forEach는 await를 기다리지 않음)

for (const item of items) {
  await process(item);
}

• API 요청이 순차 실행인지 병렬 실행인지 구분해서 최적화
• 무한 대기 방지: Promise.race + 타임아웃 조합

---

✅ 마무리

Promise와 async/await는
비동기 로직을 깔끔하게 관리할 수 있는 강력한 도구입니다.
여기에 Promise.all, Promise.race, 에러 핸들링 패턴까지 익히면
실무에서 복잡한 비동기 작업도 훨씬 안전하고 효율적으로 다룰 수 있습니다. 😊