[JS/Node] 비동기 - Callback

Asynchronous

이번 포스팅에서는 JavaScrit에서 Asynchronous 흐름을 구현하는 방법들에 대해 정리해 보겠다.

JavaScript의 비동기 흐름은 callback, promise, async/await 중 하나의 문법으로 구현이 가능하다.

• 비동기 함수 전달 패턴 1: callback 패턴
• 비동기 함수 전달 패턴 2 : 이벤트 등록 패턴

1. Callback pattern

callback 함수를 동기적으로 사용하는 경우와 비동기 적으로 사용하는 경우에 대해 비교해보자.

• 동기적으로 사용하는 경우 (이전에 예시로 사용했던 코드가 잘못되어 다시 수정했습니다ㅜ)
  아래의 코드를 실행하면 sleep함수는 3초 후에 cb함수를 실행한다. 그리고 나서야 222를 출력한다.
  즉, 222를 출력하는 코드는 3초간 blocking이 되었다.

// sleep 함수는 일정 시간이 경과한 후에 콜백 함수를 실행 한다.
function sleep(cb, delaytime) {
  const delay = Date.now() + delaytime;

  // 현제 시간이 delay보다 작으면 계속 반봅
  while (Date.now() < delay);

  cb(); // 시간이 지난 후 cb를 실행한다.
}

console.log("111");
sleep(() => console.log("delay됨"), 3000);
console.log("222");

/* 결과
111
delay됨
222
*/

 

• 비동기적으로 사용하는 경우
  sleep과 비슷한 기능을 하는 setTimeout을 사용하여 다시 작성해보자
  setTimeout함수의 경우 다음 Task를 blocking하지 않고 바로 실행한다. setTimeout을 통해 전달된 3초 후에 callback함수를 실행한다.  즉, 비동기적으로 callback을 사용하게 되면 비동기의 흐름을 제어할 수 있다.

// Asynchrnous callback

console.log("111");
setTimeout(() => console.log("delay됨"), 3000);
console.log("222");


/*
111
222
delay됨
*/

 

Callback error handlin Design
참고 문서

비동기 자바스크립 코드에서 콜백 함수를 사용할 때에는 callback 함수 첫 번째 인자 name을 error로 넣는다.

만약 어떠한 요인에 의해 비동기 함수에서 error가 발생했다면, 첫 번째 인자와 함께 callback이 실행되고 callback 함수 내의 error code가 실행된다. 만약 error 없이 진행된다면 인자 error에는 null이 할당된다.

이러한 pattern을 error-first callback이라고 하고 일반적으로 Node Js JavaScript에서 많이 사용한다고 한다.

// Callback error handling Design
const sthgonnaHappen=calback=>{
    ...
    if(isSomethingBad) callbac(something,null)
    if(isSomethingGood) callback(null,something)
}

// 참고문서의 예제 

function calculateSquare(number, callback) {
  setTimeout(() => {
    if (typeof number !== "number") {
      callback(new Error("Argument of type number is expected."));
      return;
  }
  const result = number * number;
  callback(null, result);
  }, 1000);
}
let callback = (error, result) => {
  if (error !== null) {
  console.log("Caught error: " + String(error));
  return;
  }
  console.log(result);
};

위의 예제와 같이 callback 함수를 사용할 때 error 처리에 유념하자.

callback은 최고지만,, 잘못하면 Callback HELL에 빠지게 된다...

callback을 너무 남발하면 가독성이 상당히 떨어지고 비지니스 로직을 한눈에 이해하는 것도 어렵다.

error가 발생하거나 디버깅을 할 때, 유지. 보수를 할 때에도 매우 어렵다.

• Advanced

브라우저의 비동기 함수 작동 원리 알기 —> 추가로 공부하여 블로깅을 하

• Event Loop MDN
• Phillip Roberts:Help, I'm stuck in an event-loop

callback 개념을 사용하여 비동기 제어를 연출할 수 있다. 하지만 콜백을 너무 사용하게 되면 위에서 봤듯이 Callback hell에 빠지게 된다. 이를 해결하기 위해 Promise라는 개념을 사용한다. 이는 다음 포스팅에서 추가로 알아보기로 하자.

참고 사이트

JavaScript for Beginners: Async

드림코딩 - 엘리쌤 강의참고