[Javascript]자바스크립트 Callback Hell 탈출하기: Promise로 코드 정리하기!

자바스크립트에서 비동기 프로그래밍을 다루다 보면 Callback Hell이라는 문제를 만나게 됩니다. 이는 콜백 함수를 여러 번 중첩해서 사용하는 경우 발생하는 문제로, 코드가 깊어지고 가독성이 떨어지며 유지보수가 어려워지는 상황을 말합니다. 특히, 이전 포스팅에서 다룬 async 프로그래밍과 밀접하게 관련이 있습니다.

≣ 목차

• Callback Hell의 예시📉
• Promise의 등장✨
• Promise 사용법 기초🛠️
• Callback Hell을 Promise로 바꾸기🔄
• Promise Chaining🌟
• Promise.all과 Promise.race💫
• 에러 핸들링💥
  

자바스크립트 async 프로그래밍에 관한 내용은 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 Async 완벽 가이드: 비동기 프로그래밍의 모든 것

---

01. Callback Hell의 예시📉

Callback Hell을 이해하기 위해 간단한 예시를 살펴보겠습니다. 다음은 콜백 함수를 중첩하여 데이터를 처리하는 예제입니다.

getData(function(result1) {
  processData(result1, function(result2) {
    saveData(result2, function(result3) {
      console.log('All done!');
    });
  });
});

위와 같은 코드는 읽기 어렵고, 에러 처리가 복잡해질 수 있습니다. 이를 Callback Hell이라고 부릅니다.

---

02. Promise의 등장✨

Promise는 이러한 문제를 해결하기 위해 자바스크립트에 도입된 기능입니다. Promise는 비동기 작업을 더 쉽게 관리하고, 가독성을 높여줍니다. 간단히 말해, Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다.

---

03. Promise 사용법 기초 🛠️

Promise는 new Promise 생성자를 통해 생성됩니다. 생성자는 두 개의 콜백 함수를 인수로 받습니다. resolve와 reject 비동기 작업이 성공하면 resolve를 호출하고, 실패하면 reject를 호출합니다.

new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve(result); // 성공 시 호출
  } else {
    reject(error); // 실패 시 호출
  }
});

Promise는 .then(), .catch(), .finally() 메서드를 사용하여 비동기 작업의 결과를 처리합니다.

---

04. Callback Hell을 Promise로 바꾸기🔄

앞서 본 Callback Hell 예제를 Promise로 변환해 보겠습니다.

getData()
  .then(result1 => processData(result1))
  .then(result2 => saveData(result2))
  .then(result3 => console.log('All done!'))
  .catch(error => console.error(error));

이렇게 하면 코드가 훨씬 깔끔해지고, 각 단계에서의 에러 처리가 용이해집니다.

---

05. Promise Chaining🌟

Promise Chaining은 여러 비동기 작업을 순차적으로 처리할 때 유용합니다. 하나의 then이 반환하는 값은 다음 then으로 전달됩니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    return processData(data);
  })
  .then(processedData => saveData(processedData))
  .catch(error => console.error('Error:', error));

이처럼 Promise Chaining을 통해 비동기 작업을 순차적으로 처리하고, 가독성을 유지할 수 있습니다.

---

06. Promise.all과 Promise.race💫

• Promise.all: 여러 개의 Promise를 병렬로 처리하고, 모든 Promise가 해결되었을 때 하나의 Promise를 반환합니다. 하나라도 실패하면, 실패한 Promise를 반환합니다.
• Promise.race: 여러 개의 Promise 중 가장 먼저 해결되거나 거부된 Promise를 반환합니다.

let promise1 = new Promise((resolve) => setTimeout(resolve, 100, "첫 번째"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 200, "두 번째"));
let promise3 = new Promise((resolve, reject) => setTimeout(reject, 150, "세 번째 실패"));

Promise.all([promise1, promise2])
    .then((results) => {
        console.log(results); // ["첫 번째", "두 번째"]
    })
    .catch((error) => {
        console.error(error);
    });

Promise.race([promise1, promise2, promise3])
    .then((result) => {
        console.log(result); // "첫 번째"
    })
    .catch((error) => {
        console.error(error); // "세 번째 실패"
    });

---

07. 에러 핸들링💥

Promise에서 에러를 처리하는 방법은 간단합니다. .catch() 메서드를 사용하여 에러를 잡아내고 처리할 수 있습니다.

doSomething()
  .then(result => doSomethingElse(result))
  .catch(error => console.error('Something went wrong:', error));

Callback Hell은 자바스크립트 비동기 프로그래밍에서 흔히 발생하는 문제입니다. 이를 해결하기 위해 Promise를 사용하면 코드의 가독성과 유지보수성이 크게 향상됩니다. Promise를 사용하여 비동기 작업을 관리하고, chaining과 에러 핸들링을 통해 더 안전한 코드를 작성할 수 있습니다.