[Javascript] 비동기 처리를 위한 콜백

자바스크립트의 동기와 비동기 👈

---

콜백 함수 | Callback

다른 함수의 인자로 전달되는 함수

function main(callback) {
  callback();
}

main(function () {})
main(() => {})

콜백 함수 자체는 비동기와 관련된 내용이 아니지만 비동기 처리를 위해 콜백 함수가 유용하게 사용된다.

---

비동기 콜백

비동기 프로그래밍은 먼저 시작한 작업이 끝날때 까지 기다리지 않고 바로 다음 작업으로 넘어가는 방식입니다.

하지만 이러한 방식은 어떤 작업이 정확하게 언제 종료되는지 확인하기가 힘들기 때문에
코드가 동기적으로 동작한다는 보장을 받을 수 없어 코드의 실행 순서가 엉키게 됩니다.

때문에 서버의 데이터 요청과 같은 비동기 작업이 완료되고 난 뒤 받아온 데이터를 처리하도록
후처리 작업이 필요하며, 이때 콜백 함수를 사용할 수 있습니다.

이러한 콜백 함수를 비동기 콜백이라 부른다.

function getData(callback) {
  let data;
  
  setTimeout(() => {
    console.log("서버 데이터 받아오는 중...");
    data = "serverData";
    callback(data);
  }, 1000);
}

getData((data) => {
  console.log(`${data}를 활용한 후처리 작업`);
});

위 코드와 같이 서버의 데이터를 받아오느 getData 함수에 인자로 콜백 함수를 넣어주면

1. 서버 데이터 받아오는 중...
2. serverData를 활용한 후처리 작업

비동기적인 서버의 데이터를 받아온 후에 해당 데이터를 활용한 후처리 과정을 해줄 수 있고 이러한 과정의 실행 순서 또한 보장 받을 수 있습니다.

---

문제점

위 코드에서 getData의 콜백 함수는 서버의 데이터를 받아와 후처리 과정을 하는걸 확인할 수 있는데 이는 서버의 데이터를 받아오는 과정이 꼭 필요하다는 의미로
즉, 앞의 과정이 끝난 뒤 진행되야 한다는 의존성이 있다는 뜻입니다.

콜백 함수를 사용해서 비동기 로직의 후처리 과정을 수행할 수 있게 되었고 실행 순서 또한 보장 받을 수 있게 되었지만

만약 의존성을 띄는 과정이 여러번 반복된다면

function getData(callback) {
  let data;
  setTimeout(() => {
    console.log("서버 데이터 받아오는 중...");
    data = "serverData";
    callback(data);
  }, 1000);
}

function someTask1(callback) {
  setTimeout(() => {
    callback();
  }, 1000);
}

function someTask2(callback) {
  setTimeout(() => {
    callback();
  }, 1000);
}

getData((data) => {
  console.log(`${data}를 활용한 후처리 작업`);
  someTask1(() => {
    console.log("후처리가 끝난 뒤 작업");
    someTask2(() => {
      console.log("마무리 작업");
    });
  });
});

1. 서버 데이터 받아오는 중...
2. serverData를 활용한 후처리 작업
3. 후처리가 끝난 뒤 작업
4. 마무리 작업

위와 같이 의존성을 띄는 콜백 함수들이 늘어나게 됩니다.

간단한 로직이나 한두개의 콜백은 괜찮다고 생각할 수 있지만 이러한 의존성을 띄는 콜백 함수들이 백개 혹은 천개라고 가정한다면 콜백 지옥이라고 불리게 되는 유지보수와 가독성에 매우 좋지 않은 코드를 구현하게 됩니다.

---

물론 이러한 문제점을 해결하기 위해 자바스크립트는 몇가지 해결법을 제시했습니다.

다음은 콜백 지옥을 해결하기 위한 방법 중 하나인 Promise에 대한 내용에 대해서 작성하겠습니다.