[Node] 비동기 함수의 동작 방식

최근에 내가 하고 있는 부스트캠프 챌린지에서 비동기 관련 미션이 나와 푸는데 애를 먹었던 적이 있었다.

예전부터 비동기에 대한 개념이 너무 부족한걸 알았지만 끝끝내 미뤘는데 이번 기회에 정리를 해야겠다고 생각했다.

예시를 보면서 확인하겠습니다.

코드 상으로는 다음과 같습니다.

console.log('Hi');

setTimeout(function cb(){
    console.log('there');
});

console.log('JSConfEU');

메서드들은 호출 스택에 쌓일 것이기 때문에 일반적으로 console.log('Hi')가 동작되고 setTimeout()이 동작하고 마지막으로 console.log('JSConfEU')가 동작할 것이라고 예상합니다.

그러나 setTimeout()은 비동기 메서드이기 때문에 호출 스택에 쌓이자마자 pop이 됩니다. 이후 안에 있던 콜백 함수가 Web API 영역에 들어가게 되고 setTimeout()에서 걸어준 5초 동안 기다리게 됩니다.

이후 그 다음 메서드인 console.log('JSConfEU')가 호출 스택에 쌓이고 출력하게 됩니다.

5초가 지나면 Web API에서 콜백 함수를 태스크 큐에 넣게 됩니다.

이제 이벤트 루프가 작동할 차례인데 이벤트 루프는 호출 스택과 태스크 큐를 주시하는 역할을 합니다.

만약에 호출스택에 아무것도 없다면 이벤트 루프가 태스크 큐에 있는 첫번째 콜백 함수를 할당하여 효과적으로 동작할 수 있도록 해줍니다.

이후 콜백 함수에서 console.log('there') 메서드가 실행되고 리턴하게 됩니다.

더 이상 동작할 명령이 없는 콜백 함수 역시 리턴하게 되고 프로그램은 종료가 됩니다.

이제 해당 개념들을 정리하면 다음과 같습니다.

넴네