D - Day 97 (자바스크립트 Callback Function)

자바스크립트의 비동기 처리에 대해서 공부를 했습니다.

비동기 처리를 구현하기 위해서는 콜백 함수, Promise, async - await 문법을 사용하면 됩니다.

오늘은 콜백함수에 대해서만 설명하겠습니다.

먼저 필요한 준비물은 적당한 두뇌와 인터넷 그리고 손만 있으면 됩니다.

 

콜백함수는 함수를 바로 실행시키는 것이 아니라 어떠한 함수 내부에서 원하는 시점에 실행을 시킬 수 있는 함수라고 생각하시면 됩니다.

그리고 함수의 호출방식을 구분하기 위해서 콜백함수라고 구분짓는 것이지, 콜백 함수라는 것이 특별한 기능을 가지고 있지는 않습니다.

다음 예를 보면 바로 이해가 될 것입니다.

 

<Javascript>

setTimeout(function () {
  console.log("working");
}, 1000);

위의 예제는 자바스크립트의 비동기 처리를 예를 들 때 대표적으로 많이 사용되는 예제인 것 같습니다.

setTimeout함수는 각각 함수와 ms기준으로 숫자를 입력받습니다. 이 결과는 어떻게 될까요?

setTimeout함수가 실행이 되고 약 1초 뒤에 "working"이라는 문자열이 개발자 도구에 뜨게 될 것입니다.

 

하지만 위에서 말했듯이 원하는 시점에 실행시킨다는 말이 와닿지가 않습니다.

그 이유는 인자로 넘겨주는 함수가 언제 실행되는지도 모르고 또 직접 만들어보지 않았기 때문입니다.

 

그럼 이제 setTimeout을 예로 들었으니 똑같이 동작하는 함수를 만들어 보면서 이해를 해보죠.

<Javascript>

// 첫 번째 인자로 함수, 두 번째 인자로 시간
const my_setTimeout = (callback, time) => {
  // 처음 호출 시 시작한 시간을 저장
  let start = new Date().getTime();
  // 시간을 재는 함수 정의
  const fn = () => {
    // 각 함수의 시작 시간을 저장, 즉 함수가 호출 될 때 한 번씩 사용되는 값
    // 이라고 생각하면 됩니다.
    let ts = new Date().getTime();
    // 함수가 호출된 시점의 시간에서 인자로 넘어온 시간값을 뺀 값과
    // 처음에 함수가 호출됐을 때의 시간을 비교합니다.
    if (ts - time > start) {
      // 시간이 다 됐으니 우리가 원하는 시점에 콜백 함수 실행
      callback();
    } else {
      // 아니라면 계속 내부 함수 실행
      requestAnimationFrame(fn);
    }
  };
  // 최초로 내부 함수 호출
  requestAnimationFrame(fn);
};

// 커스텀 setTimeout함수 호출
my_setTimeout(function () {
  console.log("working");
}, 2000);

 

실제로 실행을 해보면 결과가 이전 예제와 동일하게 출력되는 것을 알 수 있습니다. 이렇게 해서 콜백함수는 어떠한 함수 내부에서 단순히 원하는 시점에 호출되는 함수라고 생각할 수 있습니다.

 

콜백함수를 사용하는 이유는 1) 네트워크 관련 작업을 하거나 2) 파일 시스템 작업 3) 브라우저에서 사용자 이벤트 등 많습니다. 만약 자바스크립트에서 비동기 처리를 지원하지 않는다면 우리가 사용하는 웹 사이트는 로딩을 하는데 5분 이상이 걸리거나 클릭을 수행하는데 2분이 걸리는 등 정말 많은 문제가 생길 수 있습니다. 한국인들이 만약 그런 사이트를 이용한다면 페이지가 로딩이 되기 전에 나갈 것 같네요.

 

어쨌든 오늘은 자바스크립트의 비동기 처리에 대해서 공부한 내용을 정리해봤습니다.

 

내일은 주말이니까 자바스크립트의 Promise, async - await, EventLoop | React의 Context에 대해서 공부한 내용을 정리해서 올리겠습니다.