Promise의 모든 것: 비동기 처리를 쉽게 하는 마법 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 자바스크립트에서 비동기 처리를 위해 사용되는 강력한 도구, Promise의 구조와 개념을 살펴볼 거예요! 😄 이 글을 읽고 나면 비동기 코드를 훨씬 깔끔하고 직관적으로 작성할 수 있게 될 거예요. 약속해요! 💪

---

🌟 Promise란 무엇인가요?

Promise를 간단히 설명하자면, "나중에 결과를 줄게!"라는 약속을 표현하는 객체입니다. 우리가 음식을 배달 주문할 때를 떠올려 보세요. 😊

1. 음식을 주문하면 바로 먹을 수 없죠? (비동기 작업 시작)
2. 시간이 지나면 음식이 도착하거나, 배달이 취소될 수도 있어요. (성공 또는 실패)
3. 약속된 결과에 따라 행동을 합니다. (결과 처리)

이 과정이 자바스크립트의 Promise와 아주 비슷합니다!

---

🧩 Promise의 기본 구조

Promise의 구조는 다음과 같습니다:

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve(결과); // 작업 성공 시 호출
  } else {
    reject(에러); // 작업 실패 시 호출
  }
});

💡 중요한 키워드

• resolve: 약속을 지킨다! 즉, 작업이 성공했을 때 호출되는 함수입니다.
• reject: 약속을 못 지켰다! 즉, 작업이 실패했을 때 호출되는 함수입니다.

---

🔍 실전 예제: 간단한 Promise 만들기

배달 예제를 코드로 표현해 볼게요!

const orderFood = (isAvailable) => {
  return new Promise((resolve, reject) => {
    console.log("🍔 음식 주문 중...");
    setTimeout(() => {
      if (isAvailable) {
        resolve("🍕 음식이 도착했습니다!");
      } else {
        reject("🚫 음식 배달이 취소되었습니다.");
      }
    }, 2000);
  });
};

// Promise 사용하기
orderFood(true)
  .then((message) => {
    console.log(message); // 성공: 음식 도착
  })
  .catch((error) => {
    console.error(error); // 실패: 배달 취소
  });

---

🛠️ Promise 메서드 살펴보기

1. then()

resolve로 넘어온 값을 처리합니다. 성공적인 결과를 받을 때 사용됩니다.

2. catch()

reject로 넘어온 에러를 처리합니다. 약속이 깨졌을 때 실행됩니다.

3. finally()

성공 여부와 상관없이 항상 실행되는 코드입니다. 리소스 정리 등에 유용하게 쓰입니다.

orderFood(false)
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error(error);
  })
  .finally(() => {
    console.log("🍽️ 배달 프로세스가 끝났습니다!");
  });

---

💬 일상 속 비유: Promise.all과 Promise.race

1. Promise.all
   마치 여러 음식을 동시에 주문하고 모든 음식이 도착할 때 식사를 시작하는 것과 같아요.

Promise.all([orderFood(true), orderFood(true)])
  .then((results) => {
    console.log("모든 음식이 도착했습니다:", results);
  })
  .catch((error) => {
    console.error("문제가 발생했습니다:", error);
  });

1. Promise.race
   여러 배달 중 가장 먼저 도착한 음식을 바로 받는 상황과 비슷해요.

Promise.race([orderFood(true), orderFood(false)])
  .then((result) => {
    console.log("가장 먼저 도착한 음식:", result);
  })
  .catch((error) => {
    console.error("문제가 발생했습니다:", error);
  });

---

😊 마무리하며..

Promise는 비동기 작업을 깔끔하게 관리하고, 직관적인 코드를 작성할 수 있도록 도와주는 훌륭한 도구입니다. 특히 async/await와 함께 사용하면 더더욱 강력해지죠! 😊

"코드는 단순하고 읽기 쉬워야 한다."는 철학으로, 오늘 배운 Promise를 활용해 프로젝트를 더 깔끔하게 만들어 보세요! 화이팅! 💪