[Javascript] 비동기 처리(1)

자바스크립트에서 비동기 처리를 할 땐 콜백 함수와 비동기 처리 함수를 이용한다.

자바스크립트 엔진 특성상 멀티 스레드는 불가하다고 하는데 이는 좀 더 연구해 봐야 될 것 같다.
일단 자바스크립트의 엔진 구조를 간단하게 알아보자.

 크게 두 가지로 나뉘는데 하나는 데이터가 저장되는 메모리 힙이며 다른 하나는 코드의 호출 순서를 저장하는 콜 스택이 있다. 
 메모리 힙은 비동기 처리에서 크게 중요한 개념이 아니므로 따로 알아보도록 하고 콜 스택에 대해 얘기해 보자.

 콜 스택이란 현재 실행되어야 하는 서브루틴에 대한 정보를 담고 있는 스택 구조를 말하는데, 쉽게 말해 실행 순서를 저장하는 공간 정도라 볼 수 있다.
 이 공간에 배치되는 첫 번째 정보는 프로그램의 시작을 알리는 메인 컨텍스트이며, 이 메인 컨텍스트가 콜 스택에서 빠져나가게 되면 프로그램이 종료되었다는 뜻이다.

 C로 비유하자면 메인 함수(엔트리 포인트) 정도로 볼 수 있는데 이 정보 뒤에 실질적인 동작을 하는 함수들이 배치된다. 더 이상 실행할 수 있는 코드가 없을 때 메인 컨텍스트가 콜 스택에서 제거되고 프로그램이 종료된다.

 일반적인 동기 함수들의 경우 위에서 말한대로 콜 스택에 저장되며 실행 후 제거되는데, 앞서 얘기한 비동기 처리 함수(setTimeout)는 조금 다르게 동작한다.

비동기 처리 함수는 콜 스택이 아닌 Web API 서비스의 도움을 받아 독립적으로 실행되며 지정한 시간이 경과하면 콜백 큐와 이벤트 루프를 통해 콜백함수를 스택에 다시 배치한다.

 여기서 말하는 콜백 큐는 비동기적으로 실행된 콜백 함수를 저장하는 공간이며, 이벤트 루프는 처리할 작업이 남아있는지 확인하는 자바스크립트만의 스케쥴러 정도로 보면 된다.

가장 중요한 역할을 하는 이벤트 루프는 콜 스택에 현재 실행되고 있는 동기 함수가 없을 때 콜백 큐에 남아있는 콜백 함수를 옮겨오는데 콜백 함수가 콜 스택에 들어오고 난 후에야 비로소 함수가 실행된다.

 

예시

function A(a,b, callback){
  setTimeout(()=>{const res = a+b; callback(res);}, 7000);
}

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

function C(a, callback){
  setTimeout(()=>{const res = a/2; callback(res);},3000);
}

A(5,4,(resultA)=>{
    console.log("A result = ", resultA);
    B(resultA, (resultB)=>{
      console.log("B result = ", resultB);
      C(resultB, (resultC)=>{
        console.log("C result = ", resultC);
    });
  });
});

 

 가장 먼저 메인 컨텍스트가 콜 스택에 배치되고 A의 실행 구문이 있으므로 A 역시 콜 스택에 배치된다.
A 함수가 실행되면서 즉시 setTimeout 함수를 호출하는데 약 7초 후 A  호출 구문으로 전달된 콜백함수((result)=>{}) 즉, console.log()이후의 구문이 비로소 실행될 것이다.

자바스크립트에선 이런 콜백 함수가 자주 사용된다고 하는데 이를 보완할 수 있는 방법도 여럿 있다고 한다.

특별히 분석해 볼 만한 코드는 아니므로 내부적으로 이벤트 루프와 콜백 큐가 어떻게 동작할지 정도만 생각해 보고 넘어가면 좋을 것 같다.