(JS) 벨로퍼트의 모던 자바스크립트 : 비동기 처리 다루기

출저

작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있기 때문이다.
하지만 이를 비동기적으로 처리를 한다면 흐름이 멈추지 않기 때문에 동시에 여러 작업을 처리할 수 있다.

연산량이 많은 작업을 처리하는 함수 만들기

function work() {
  const start = Date.now();
  for (let i = 0; i < 1000000000; i++) {}
  const end = Date.now();
  console.log(end - start + 'ms');
}

work();
console.log('다음 작업');

지금은 work()함수가 노출되면, for문이 돌아갈 때는 다른 작업은 처리하지 않고 온전히 for 문만 실행하고 있다.

만약 이 작업이 진행되는 동안 다른 작업도 하고 싶다면 함수를 비동기 형태로 전환을 해줘야 하는데, 그렇게 하기 위해서는 setTimeOut이라는 함수를 사용해주어야 한다.

function work() {
  setTimeout(() => {
    const start = Date.now();
    for (let i = 0; i < 10000000; i++) {}
    const end = Date.now();
    console.log(end - start + 'ms');
  }, 0);
}

console.log('작업시작');
work();
console.log('다음 작업');

setTimeout함수는 첫번째 파라미터에 넣은 함수를 두번째 파라미터에 넣은 시간(ms 단위)이 흐른 후 호출해준다. (0ms 이후에 실행한다는 의미이지만, 실제로는 4ms 이후에 실행된다.)
이렇게 setTimeout을 사용하면 우리가 정한 작업이 백그라운드에서 수행되기 때문에 기존의 코드 흐름을 막지 않고 동시에 다른 작업들을 진행 할 수 있다.

만약에 work 함수가 끝난 다음에 어떤 작업을 처리하고 싶다면 어떻게 해야할까?

콜백함수를 파라미터로 전달하기

콜백함수란, 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출해주는 것을 의미한다.

function work(callback) {
  setTimeout(() => {
    const start = Date.now();
    for (let i = 0; i < 10000000; i++) {}
    const end = Date.now();
    console.log(end - start + 'ms');
    callback();
  }, 0);
}

console.log('작업 시작');
work(() => {
  console.log('작업이 끝났어요!')
});
console.log('다음 작업');

주로 비동기적으로 처리하는 작업

• Ajax Web API 요청 : 만약 서버쪽에서 데이터를 받아와야 할 때는, 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 하기 때문에 작업을 비동기적으로 처리한다.
• 파일 읽기 : 주로 서버 쪽에서 파일을 읽어야 하는 상황에서 비동기적으로 처리한다.
• 암호화 / 복호화 : 암호화 / 복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리한다.
• 작업 예약 : 단순히 어떤 작업을 몇초 후에 스케쥴링 해야 하는 상황에는, setTimeout을 사용해 비동기적으로 처리한다.