[Javascript] callback의 bucket relay: 협업의 예술 🎨

📣 콜백의 버킷 릴레이에 대해 톺아보자 !

자바스크립트를 쓰다 보면 한 번쯤 들어봤을 단어, 바로 콜백(callback). 함수의 인수로 전달되어 나중에 호출되는 이 개념은 비동기 작업의 심장부에서 작동합니다. 그런데, 이런 콜백도 버킷 릴레이(bucket relay)처럼 끊임없이 다음 주자에게 작업을 넘길 수 있다는 사실, 알고 계셨나요?

 

오늘은 콜백과 버킷 릴레이의 개념, 이를 실제 코드에서 어떻게 구현하는지, 그리고 이 패턴에서 주의해야 할 점까지 차근차근 알아봅시당. 🚀

---

🌟 콜백(callback)이란?

콜백은 “나중에 불러줘”라는 의미를 가진 함수입니다. 즉, 함수의 인수로 전달되어 특정 조건이 충족되거나 작업이 완료된 후 실행되는 함수죠.

콜백 기본 예제

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

// greet에 콜백 함수 전달
greet("Alice", sayGoodbye);

// 출력:
// Hello, Alice!
// Goodbye!

 

비유로 이해하기: “버킷 릴레이”

버킷 릴레이는 물을 담은 버킷을 한 사람에서 다음 사람으로 전달하는 과정을 말합니다. 콜백 함수는 이와 비슷하게, 하나의 작업이 완료되면 다음 작업으로 결과를 넘겨주는 역할을 합니다.

---

🔄 콜백의 버킷 릴레이란?

콜백의 버킷 릴레이는 콜백 함수가 연속적으로 호출되어 작업이 이어지는 구조를 의미합니다. 비동기 작업이 연속적으로 이루어져야 하는 경우, 이런 패턴이 자주 등장하죠.

 

실제 예제: 콜백의 버킷 릴레이

function fetchData(userId, callback) {
  setTimeout(() => {
    console.log(`Fetched data for user ${userId}`);
    callback(userId);
  }, 1000);
}

function processData(userId, callback) {
  setTimeout(() => {
    console.log(`Processed data for user ${userId}`);
    callback(userId);
  }, 1000);
}

function saveData(userId, callback) {
  setTimeout(() => {
    console.log(`Saved data for user ${userId}`);
    callback();
  }, 1000);
}

// 콜백의 버킷 릴레이
fetchData(1, (userId) => {
  processData(userId, (userId) => {
    saveData(userId, () => {
      console.log("All tasks completed!");
    });
  });
});

// 출력:
// Fetched data for user 1
// Processed data for user 1
// Saved data for user 1
// All tasks completed!

---

⚠️ 콜백 헬(callback hell)의 문제

콜백의 버킷 릴레이는 강력한 도구지만, 콜백 헬(callback hell)이라는 함정에 빠질 수 있습니다. 콜백 함수가 중첩되면서 코드가 복잡해지고 읽기 어려워지는 문제가 생기죠.

콜백 헬 예제

doTask1((result1) => {
  doTask2(result1, (result2) => {
    doTask3(result2, (result3) => {
      doTask4(result3, (result4) => {
        console.log("All tasks completed!");
      });
    });
  });
});

 

👉 중첩 구조가 깊어지면 가독성과 디버깅이 매우 어려워집니다.

---

🌈 해결책: 콜백 헬을 피하는 방법

1. Promise 사용

Promise는 콜백을 대체하여 비동기 작업을 더 명확하게 표현할 수 있습니다.

fetchData(1)
  .then((userId) => processData(userId))
  .then((userId) => saveData(userId))
  .then(() => console.log("All tasks completed!"))
  .catch((error) => console.error(error));

 

2. async/await 사용

Promise와 함께 사용되는 async/await는 비동기 작업을 동기 코드처럼 읽기 쉽게 만듭니다.

async function performTasks() {
  const userId = await fetchData(1);
  await processData(userId);
  await saveData(userId);
  console.log("All tasks completed!");
}

performTasks();

---

📚 실무에서 콜백 릴레이가 쓰이는 사례

1. 데이터베이스 작업
   • 데이터를 가져온 뒤, 처리하고 저장하는 단계별 작업
2. 파일 업로드
   • 파일을 업로드한 뒤, 압축하고 저장소에 저장하는 작업
3. API 연쇄 호출
   • 사용자 정보를 가져오고, 해당 정보를 기반으로 다른 데이터를 요청.

실무 예제: 사용자 데이터 처리

function getUser(userId, callback) {
  setTimeout(() => {
    console.log(`User ${userId} fetched`);
    callback({ userId, name: "Alice" });
  }, 1000);
}

function getOrders(user, callback) {
  setTimeout(() => {
    console.log(`Orders for ${user.name} fetched`);
    callback(["Order1", "Order2"]);
  }, 1000);
}

function processOrders(orders, callback) {
  setTimeout(() => {
    console.log(`Orders processed: ${orders}`);
    callback();
  }, 1000);
}

getUser(1, (user) => {
  getOrders(user, (orders) => {
    processOrders(orders, () => {
      console.log("All tasks completed!");
    });
  });
});

---

🎯 요약

1. 콜백의 정의
   • 콜백은 함수의 인수로 전달되어 나중에 호출되는 함수입니다.
2. 버킷 릴레이
   • 콜백을 사용해 작업을 단계별로 연결하는 패턴입니다.
3. 콜백 헬 해결책
   • Promise와 async/await을 활용하세요.
4. 실무 활용
   • 데이터 처리, API 호출, 파일 작업 등 비동기 작업에서 유용하게 사용됩니다.

 

🌷 전설의 개발자가 되어봅시당! 🌷