Promise란?(feat. async-await, Promise.all())

Promise란?

• 비동기 연산의 상태를 나타내는 객체이다.
• 비동기 처리가 진행 중이면 pending, 성공하면 fulfilled → then() 블록 실행, 실패하면 rejected → catch() 블록 실행 상태를 가진다.
• Promise는 비동기 프로그래밍을 then과 catch의 체이닝을 통해 보다 간결하게 표현할 수 있도록 ES6에서 도입되었다.

✅ Promise 기본 사용법

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) resolve("데이터 로딩 완료!");
      else reject("데이터 로딩 실패!");
    }, 1000);
  });
};

fetchData()
  .then((result) => {
    console.log(result); // "데이터 로딩 완료!"
  })
  .catch((error) => {
    console.error(error); // "데이터 로딩 실패!"
  });

---

Promise 등장 이전에는 어떤 방식으로 비동기 처리를 했는가?

• 과거에는 비동기 처리를 할 때 콜백 함수 (callback function) 를 사용했다.
• 성공 콜백과 실패 콜백을 각각 넘겨서 처리하는 방식이 일반적이었다.
• 하지만, 이런 방식에서 두 개 이상의 비동기 작업이 순서를 갖고 실행되어야 할 때, 콜백 함수 안에 또 다른 콜백이 중첩되는 callback hell 현상이 발생했다.

❌ 콜백 헬 예시

function fetchUser(callback) {
  setTimeout(() => {
    console.log("유저 정보 가져오기");
    callback();
  }, 1000);
}

function fetchPosts(callback) {
  setTimeout(() => {
    console.log("유저의 게시글 가져오기");
    callback();
  }, 1000);
}

function fetchComments(callback) {
  setTimeout(() => {
    console.log("게시글의 댓글 가져오기");
    callback();
  }, 1000);
}

// 콜백 헬 발생
fetchUser(() => {
  fetchPosts(() => {
    fetchComments(() => {
      console.log("모든 데이터 가져오기 완료!");
    });
  });
});

• 콜백 함수가 중첩될수록 코드가 깊어지며 가독성이 떨어진다.
• 유지보수성이 낮아지고, 디버깅이 어려워진다.

✅ Promise를 사용하면 가독성이 개선된다.

function fetchUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("유저 정보 가져오기");
      resolve();
    }, 1000);
  });
}

function fetchPosts() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("유저의 게시글 가져오기");
      resolve();
    }, 1000);
  });
}

function fetchComments() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("게시글의 댓글 가져오기");
      resolve();
    }, 1000);
  });
}

fetchUser()
  .then(fetchPosts)
  .then(fetchComments)
  .then(() => console.log("모든 데이터 가져오기 완료!"));

---

async-await은 무엇인가?

• Promise의 완료를 기다리기 위한 더 직관적인 문법이다.
• async 키워드로 정의한 함수 내에서 호출되는 Promise 앞에 await 키워드를 사용하면, 해당 Promise가 완료될 때까지 실행이 일시 중단된다.
• 이를 통해 비동기 코드를 마치 동기 코드처럼 쉽게 작성할 수 있다.

✅ async-await 사용 예시

async function fetchData() {
  try {
    console.log("유저 정보 가져오는 중...");
    await fetchUser();

    console.log("유저 게시글 가져오는 중...");
    await fetchPosts();

    console.log("게시글 댓글 가져오는 중...");
    await fetchComments();

    console.log("모든 데이터 가져오기 완료!");
  } catch (error) {
    console.error(error);
  }
}

fetchData();

• await을 사용하면 then() 체이닝 없이 동기적인 코드처럼 보이도록 작성할 수 있다.

---

async-await 사용 시 주의할 점

❗ 에러 핸들링

• try-catch 블록을 사용해 에러를 반드시 처리해야 한다.
• await이 있는 부분에서 에러가 발생하면, 다음 코드 실행이 중단되므로 에러를 잡아주지 않으면 예기치 않은 동작이 발생할 수 있다.

✅ 에러 핸들링 예제

async function fetchData() {
  try {
    const result = await fetchDataFromAPI(); // 실패할 가능성이 있음
    console.log(result);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

---

✅ Promise.all()

• Promise.all()은 여러 개의 Promise를 동시에 실행할 때 사용된다.
• 모든 Promise가 fulfilled 상태가 되어야 결과를 반환한다.
• 하나라도 rejected 상태가 되면 전체가 실패한다.

✅ Promise.all() 사용 예시

function fetchUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("유저 정보"), 1000);
  });
}

function fetchPosts() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("게시글 데이터"), 2000);
  });
}

function fetchComments() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("댓글 데이터"), 1500);
  });
}

async function fetchAllData() {
  try {
    const [user, posts, comments] = await Promise.all([
      fetchUser(),
      fetchPosts(),
      fetchComments(),
    ]);

    console.log(user); // "유저 정보"
    console.log(posts); // "게시글 데이터"
    console.log(comments); // "댓글 데이터"
  } catch (error) {
    console.error("데이터 로딩 중 에러 발생:", error);
  }
}

fetchAllData();

✅ Promise.all() vs await 비교

방식 실행 방식 예제

Promise.all()	병렬 실행 (동시에 시작)	await Promise.all([fetchUser(), fetchPosts()])
await 개별 실행	순차 실행 (하나씩 완료 후 다음 실행)	await fetchUser(); await fetchPosts();

🔹 언제 Promise.all()을 사용해야 하나?

• 여러 개의 비동기 작업이 서로 의존하지 않고 동시에 실행될 수 있을 때.
• 네트워크 요청을 최적화하고 싶을 때.

---

📌 정리

• Promise는 비동기 처리를 위한 객체이며, then()과 catch() 체이닝을 활용한다.
• async-await을 사용하면 비동기 코드를 동기 코드처럼 쉽게 작성할 수 있다.
• try-catch를 활용하여 에러를 안전하게 처리해야 한다.
• Promise.all()을 사용하면 여러 개의 Promise를 병렬로 실행할 수 있어 성능 최적화가 가능하다.

---

다음 글은 동기, 비동기에 대해 다뤄보자.