Promise와 async/await – 비동기 처리 쉽게 이해하기

 

 

안녕하세요 😊
웹 개발에서 자주 만나는 개념이 바로 **비동기 처리(Asynchronous)**입니다.
API 요청, 파일 읽기, setTimeout 같은 작업은 즉시 끝나지 않기 때문에 비동기 방식으로 처리됩니다.

자바스크립트는 이런 작업을 다루기 위해 콜백(callback) → Promise → async/await 순으로 발전해 왔습니다.
오늘은 그 중에서도 Promise와 async/await을 쉽게 설명해드리겠습니다.

---

📍 1. Promise란?

Promise는 “결과를 약속한다”는 의미 그대로, 비동기 작업의 성공/실패 결과를 표현하는 객체입니다.

 

const fetchData = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve("데이터 불러오기 성공!");
  } else {
    reject("에러 발생!");
  }
});

fetchData
  .then(result => console.log(result))  // 성공 시 실행
  .catch(error => console.error(error)) // 실패 시 실행
  .finally(() => console.log("완료!"));

• resolve → 성공 시 실행
• reject → 실패 시 실행
• then → 성공 결과 처리
• catch → 에러 처리
• finally → 무조건 실행

👉 콜백 지옥(callback hell)을 해결하기 위해 등장한 문법입니다.

---

📍 2. async/await란?

Promise를 더 직관적으로 쓰기 위한 문법입니다.
async 함수 안에서 await 키워드를 사용해 비동기 작업이 끝날 때까지 기다릴 수 있습니다.

 

async function getUser() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const data = await response.json();
    console.log("유저 데이터:", data);
  } catch (error) {
    console.error("에러 발생:", error);
  } finally {
    console.log("작업 완료");
  }
}

getUser();

• await은 Promise가 끝날 때까지 기다린 뒤 결과를 반환합니다.
• try~catch를 통해 에러를 더 깔끔하게 처리할 수 있습니다.

👉 덕분에 동기 코드처럼 읽히기 때문에 훨씬 가독성이 좋아집니다.

---

📍 3. Promise vs async/await 비교

구분	Promise	async/await
문법	then, catch 체인	try~catch 블록
가독성	체인 길어질수록 복잡	동기 코드처럼 읽힘
사용 예시	간단한 비동기 처리	복잡한 API 호출, 순차 실행

---

📍 4. 실무 활용 패턴

1. Promise.all – 여러 비동기 동시 실행

 

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

 

👉 두 개 이상의 API를 동시에 불러올 때 유용합니다.

1. 순차 실행

 

async function processSteps() {
  await step1();
  await step2();
  await step3();
  console.log("모든 단계 완료!");
}

 

👉 순서가 중요한 작업에서 깔끔하게 사용할 수 있습니다.

---

📍 5. 자주 하는 실수

• await는 반드시 async 함수 안에서만 사용 가능
• 에러 처리를 빼먹으면 디버깅이 어려움 → 항상 try~catch 사용 권장
• 병렬 작업이 필요한데 순차 실행으로 잘못 구현해 성능 저하 발생 → Promise.all 고려

---

✅ 마무리

• Promise: 비동기 작업을 다루는 객체 (then, catch)
• async/await: Promise를 더 쉽게 쓰는 문법 (동기처럼 읽힘)

실무에서는 두 가지를 혼합해서 사용합니다.
간단한 경우엔 Promise, 복잡한 로직에는 async/await이 더 적합합니다.