콜백 함수와 콜백 지옥: 더 이상 무섭지 않은 JavaScript 비밀 - 코드카인 티스토리

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

오늘은 JavaScript 콜백 함수와 초보 개발자라면 한 번쯤 겪어봤을 콜백 지옥에 대해 알아보려 해요. 📚 "콜백 함수가 뭐고, 콜백 지옥은 왜 무서운 건지" 쉽게 알려드릴게요.

---

🛠️ 콜백 함수란 무엇인가요?

콜백 함수(callback function)는 다른 함수의 인자로 전달되어 실행되는 함수를 의미해요.
쉽게 말해, "나중에 불러줘(call me back)"라는 개념으로, 특정 작업이 끝난 후 실행되도록 하는 함수입니다.

비유로 이해하기

콜백 함수는 마치 친구에게 "내가 숙제를 다 하면 전화해줘"라고 말하는 것과 비슷해요.

• 전화(콜백 함수)는 친구(다른 함수)가 해야 할 일이 끝난 후 실행되죠.

// 콜백 함수 예제
function doHomework(subject, callback) {
  console.log(`Doing homework for ${subject}...`);
  callback(); // 작업이 끝난 후 콜백 함수 호출
}

doHomework('Math', function () {
  console.log('Finished my homework!');
});

위 코드에서 callback이 콜백 함수로, 숙제를 끝내면 실행돼요.

---

😨 콜백 지옥이란 무엇인가요?

콜백 지옥(callback hell)은 중첩된 콜백 함수가 너무 많아져 코드가 복잡하고 읽기 어려워진 상태를 말해요.

비유로 이해하기

콜백 지옥은 마치 친구들 사이에서 전화를 차례로 전달하는 상황과 같아요.

• "A가 끝나면 B에게 전화하고, B가 끝나면 C에게 전화하고..."
  이 과정이 점점 복잡해지고 엉켜버리는 거죠. 😵

콜백 지옥의 모습

setTimeout(() => {
  console.log('1초 후 작업');
  setTimeout(() => {
    console.log('2초 후 작업');
    setTimeout(() => {
      console.log('3초 후 작업');
    }, 1000);
  }, 1000);
}, 1000);

코드가 들여쓰기로 인해 계단식으로 쌓이며 읽기 어려워지고, 유지보수도 힘들어집니다.

---

🏆 콜백 지옥 해결법: Promise와 Async/Await

1. Promise

Promise는 비동기 작업을 보다 깔끔하게 처리할 수 있도록 도와주는 객체입니다.
Promise는 세 가지 상태를 가집니다:

• Pending(대기): 작업이 진행 중
• Fulfilled(완료): 작업이 성공적으로 완료
• Rejected(실패): 작업이 실패

Promise로 콜백 지옥을 정리하면 이렇게 됩니다:

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

delay(1000)
  .then(() => {
    console.log('1초 후 작업');
    return delay(1000);
  })
  .then(() => {
    console.log('2초 후 작업');
    return delay(1000);
  })
  .then(() => {
    console.log('3초 후 작업');
  });

2. Async/Await

Async/Await은 Promise를 더 직관적이고 동기처럼 작성할 수 있게 해줘요.

async function runTasks() {
  await delay(1000);
  console.log('1초 후 작업');
  await delay(1000);
  console.log('2초 후 작업');
  await delay(1000);
  console.log('3초 후 작업');
}

runTasks();

이 방식은 코드가 훨씬 간결하고 읽기 쉬워, 콜백 지옥을 방지할 수 있어요.

---

😊 마무리하며..

콜백 함수는 JavaScript의 강력한 도구지만, 잘못 사용하면 콜백 지옥으로 이어질 수 있어요.
Promise와 Async/Await을 활용해 코드를 깔끔하고 가독성 좋게 작성해 보세요!

"천천히, 차근차근 배우는 게 가장 중요해요!"
어려운 순간이 와도 포기하지 말고, 계속 도전하세요. 여러분을 응원합니다! 🚀