[JavaScript] 동기와 비동기

본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다.

동기 처리 방식 & 비동기 처리 방식

• 동기 처리 방식 : Synchronous 코드가 작성된 순서대로 처리한다. 한 번에 하나의 요청을 처리하며, 다음 요청이 실행되지 않도록 막는 블로킹 방식이다. 문제점은 수행해야 하는 하나의 작업이 너무 오래 걸리면, 다음 작업이 시작되기 까지 오래걸리고, 또 그 작업이 끝날 때 까지 기다려야 하기 때문에 느리다.
• 비동기 처리 방식 : Asynchronous 하나의 요청이 끝날 때 까지 기다리는 것이 아니라, 끝나든 말든 그냥 다음 요청을 실행하는 것이다. 다음 요청이 실행되는 것을 막지 않는 논블로킹 방식. 

그러면, 비동기 처리 방식에서는 각 요청들이 끝난 것을 어떻게 확인할 수 있을까?

각 요청의 실행이 완료되길 기다렸다가 실행되는 콜백 함수를 전달한다.

// a, b와 cb 콜백함수를 인자 값으로 받는 taskA 함수
// 함수 내부의 setTimeout 함수가 3000ms (3초)의 지연 시간을 가진 뒤
// 연산 결과값과 함께 콜백함수를 실행한다. => cb(res)
function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

// res가 콜백함수로 전달된 값이므로
// taskA 함수 외부에서 접근할 수 있다. (콜백함수에서 사용)
function cb(res) {
  console.log(`taskA 결과값 ${res}`);
}

taskA(3, 4, cb);
console.log("코드 끝");

//taskA 가 먼저 호출되었음에도, setTimeout 함수의 지연 동작 때문에
//"코드 끝" 이 먼저 출력된 뒤 taskA의 결과값을 출력한다.

자바스크립트 엔진의 비동기 함수 실행 과정

출처 : https://medium.com/@Rahulx1/understanding-event-loop-call-stack-event-job-queue-in-javascript-63dcd2c71ecd

• 우선 자바스크립트 브라우저 런타임 환경 안에는 비동기를 처리할 수 있는 webAPIs 가 포함되어 있다.
  setTimeout 같은 지연 함수는 함수가 실행되면 콜 스택이 아닌 webAPIs 영역에서, 지연 시간에 도달할 때 까지 대기한다. 
• 시간에 도달하여 setTimeout이 실행되면, 이 setTimeout은 사라지고 그 콜백함수가 콜백 큐로 이동한다. 콜백 큐는 콜백함수가 실행되길 기다리는 대기열 같은 저장 공간이다. 
• 이 콜백 함수가 실행될 때는 이벤트 루프가 콜백 큐에서 콜 스택으로 콜백 함수를 이동시킨다. 콜백 큐에서 콜 스택으로 이동했다는 것은 콜백 함수가 실제로 실행 되는 과정으로 이해하면 되고, 이벤트 루프는 콜스택에 다른 실행 컨텍스트가 존재하는지 여부를 계속 주시하다가 때가 되면 이를 옮겨주는 역할을 한다.

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(3, 4, (res) => {
  console.log(`taskA 결과값 ${res}`);
});

taskB(7, (res) => {
  console.log(`taskB 결과값 ${res}`);
});

taskC(14, (res) => {
  console.log(`taskC 결과값 ${res}`);
});

console.log("코드 끝");

// 코드 끝 
// taskB 결과값 14 
// taskC 결과값 -14 
// taskA 결과값 7

• 이제 위 코드를 보면 최종적으로 출력되는 결과 값이 실제로 함수를 호출한 순서와는 상관이 없다는 것을 확인할 수 있다.

taskA(3, 4, (a_res) => {
  console.log(`taskA 결과값 ${a_res}`);
  taskB(a_res, (b_res) => {
    console.log(`taskB 결과값 ${b_res}`);
    taskC(b_res, (c_res) => {
      console.log(`taskC 결과값 ${c_res}`);
    });
  });
});

• 다른 예시로, 콜백 함수의 결과값으로 계속 콜백 함수를 실행 즉 비동기 처리의 결과를 또 다른 비동기 처리의 값으로 전달할 수 있는데 이런 로직이 계속 이어지면 이를 "콜백 지옥" 이라고 한다.
• 콜백 지옥을 탈출하기 위한 자바스크립트의 비동기 객체가 바로 Promise 이다.