📚 콜백 지옥, 프로미스, 그리고 async/await까지

자바스크립트에서 비동기 프로그래밍은 사용자 경험을 향상시키는 중요한 개념이에요. 특히, 비동기 작업을 처리하는 방식이 발전하면서 더 나은 코드 작성이 가능해졌죠. 이번 포스팅에서는 콜백 지옥에서 시작해 프로미스, 그리고 async/await까지의 변화를 자세히 살펴보겠습니다!👍

🎯 1. 콜백 지옥 (Callback Hell)

콜백 지옥은 비동기 함수가 계속 중첩되면서 코드의 가독성이 떨어지고, 유지 보수가 어려워지는 문제를 말하는데요. 여러 단계의 비동기 작업이 서로 의존하게 되면 다음처럼 중첩된 콜백 함수로 이어지게 됩니다.

function fetchData(callback) {
  setTimeout(() => {
    const data = "데이터";
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
  fetchData((data2) => {
    console.log(data2);
    fetchData((data3) => {
      console.log(data3);
    });
  });
});

➡️위의 코드를 보면, 콜백이 계속해서 중첩되어 콜백 지옥이 발생하는 것을 볼 수 있습니다. 비동기 작업을 관리하는 데 매우 불편하고, 코드를 이해하기도 엄청 어렵죠🤣

🎯 2. 프로미스 (Promises)

프로미스(Promise)는 이러한 콜백 지옥 문제를 해결하기 위해 등장한 비동기 처리 방법입니다. 비동기 작업의 성공 또는 실패를 나타내며, 완료 시에는 .then()이나 실패 시에는 .catch()로 후속 작업을 처리할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "데이터";
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
    return fetchData();
  })
  .then((data2) => {
    console.log(data2);
    return fetchData();
  })
  .then((data3) => {
    console.log(data3);
  })
  .catch((error) => {
    console.error("오류 발생:", error);
  });

프로미스를 사용하면, 콜백 함수의 중첩 없이 연속적인 비동기 작업을 처리할 수 있습니다. .then() 체인 덕분에 비동기 작업을 순차적으로 처리하며, 오류가 발생하면 .catch()에서 잡을 수 있습니다. 콜백지옥보다 훨씬 가독성도 좋아보이죠? ㅎㅎ

🎯 3. async/await

async/await는 프로미스를 더욱 간결하게 사용할 수 있는 구문입니다. async로 비동기 함수를 정의하고, await로 프로미스의 완료를 기다립니다. 이를 통해 비동기 코드를 마치 동기적인 코드처럼 작성할 수 있어요.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = "데이터";
      resolve(data);
    }, 1000);
  });
}

async function run() {
  try {
    const data = await fetchData();
    console.log(data);

    const data2 = await fetchData();
    console.log(data2);

    const data3 = await fetchData();
    console.log(data3);
  } catch (error) {
    console.error("오류 발생:", error);
  }
}

run();

위의 예제처럼 async/await를 사용하면, 비동기 코드가 마치 동기 코드처럼 자연스럽게 작성됩니다. 특히 비동기 작업이 많을 때 가독성이 훨씬 좋아집니다.

📌 결론

• 콜백 지옥은 비동기 처리의 초기 단계에서 발생한 문제로, 프로미스와 async/await의 등장으로 점차 해결되었습니다.
• 프로미스는 콜백 함수의 중첩 문제를 해결하며, 비동기 작업을 체인 형식으로 처리할 수 있게 해줍니다.
• async/await는 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성과 유지보수성을 크게 향상시킵니다.

비동기 작업을 다룰 때는 프로미스와 async/await를 적극 활용하세요. 특히 async/await는 코드 작성이 더 깔끔하고, 오류 처리가 쉬워집니다! 😊