비동기 동작 방식
자바스크립트는 단일 스레드 기반의 언어이다. 즉, 한번에 한 작업만 처리가 가능하다.
자바스크립트는 실제로 서버로도 많이 사용되는데, 서버에서는 비동기적인 상황이 필수적으로 요구된다.
이렇게 동작을 해 줄 수 있도록 Node.js에서 환경을 제공한다.
브라우저 환경을 그림으로 나타내면 위와 같다.
기본적인 흐름은 엔진의 call stack에 쌓여 순서대로 동작하게 된다.
비동기 호출을 위해 사용하는 setTimeout이나 XMLHttpRequest 등은 Web API 영역에 정의되어 있는데, 비동기가 호출되면 API에서 동작을 하게 되는 것이다.
Web API에서는 주어진 일을 한 후 콜백함수를 넘겨주는데, 이런 콜백함수들은 Task Queue에 쌓이게 된다.
Event Loop가 주기적으로 call stack을 확인하며 call stack이 비어있다면 Task Queue에서 콜백함수를 가져와 call stack에 집어 넣고, 그 콜백함수를 실행시키게 되는 것이다.
비동기의 동작 흐름은 위의 그림으로 이해가 가능하다.
참고 : https://meetup.toast.com/posts/89
promise vs Web Api
앞선 설명에서 비동기 프로그래밍을 할 경우 Web Api를 호출하여 콜백함수를 Task Queue에 쌓아서 활용한다고 하였다.
promise 역시 자바스크립트에서 제공하는 비동기를 위한 Api 이다. 하지만 promise의 경우 콜백함수를 Micro Task Queue에 삽입한다.
Micro Task Queue의 역할은 Task Queue와 같다. 이벤트루프가 똑같이 큐를 확인하여 call stack에 저장을 하기 때문이다.
하지만 Micro Task Queue가 기존의 Task Queue보다 우선순위가 높아서 이벤트루프는 Micro Task Queue를 먼저 확인하게 된다.
즉, promise와 setTimeout을 사용하게 된다면 promise의 콜백함수가 먼저 실행이 된다.
더 알아보기
- 자바스크립트 디버깅
- 비동기 방식 디버깅
- 스레드 풀
- 스레드 생성 vs 비동기
