자바스크립트의 비동기처리

싱글스레드 위에서 효율적으로 동작하기 위해 자바스크립트는 비동기처리를 한다.

만약 api요청과 사용자의 이벤트 발생이 동시에 일어날 경우 어떻게 될지 궁금해졌다.

api요청 2개(마이크로태스크큐), 사용자가 클릭이벤트(메시지큐)를 3번 일으킨다면 어떻게 될까?

이 궁금증을 해결하기 위해 조사해보았다.

실행순서로는

1. 현재 실행중인 스크립트나 매크로 태스크(메시지큐)가 완료.

2. 이벤트 루프는 마이크로태스크큐를 확인하여 그 안의 모든 작업들을 처리함. 마이크로태스크 큐 2개의 작업을 순서대로 처리함.

3. 마이크로태스크큐의 작업이 모두 끝나면 이벤트 루프는 메시지 큐로 넘어가 첫번째 매크로태스크를 콜스택으로 이동시키고 실행함.

4. 이벤트 루프는 다시 마이크로태스크 큐를 확인함. 만약 새로운 마이크로태스크큐가 추가되었다면 이 작업들을 모두 처리하고 매크로태스크를 콜스택으로 이동시키고 실행함(이 행동을 반복).

자바스크립트는 싱글스레드 환경에서 비동기처리를 콜스택, 이벤트 루프, 메시지 큐를 통해 관리한다.

콜스택
- 자바스크립트의 함수 호출이 저장되는 곳. 함수가 호출되면 콜스택에 쌓이게 되고 실행이 완료되면 콜스택에서 제거됨.
이벤트 루프
- 콜 스택이 비어있을 때 메시지 큐에서 대기하고 있는 메시지(함수호출)를 콜 스택으로 전송하는 역할을 함. 이를 통해 비동기 처리의 콜백 함수들이 적절한 순서로 실행할 수 있게 도와줌.

메시지 큐

비동기 처리로 인해 발생하는 콜백 함수들이 실행될 준비가 되면 대기하는 곳. 이벤트가 발생하면 관련 콜백 함수가 메시지 큐에 추가됨. 이벤트 루프는 콜 스택이 비어있을 때 메시지 큐에 있는 메시지를 콜 스택으로 옮김.
- First In First Out 구조. 먼저 들어온 메시지가 먼저 처리되며, 작업이 발생한 순서대로 처리됨.
- 비동기 작업의 결과 저장(타이머 setTimeout, setInterval), 네트워크 요청의 콜백, DOM이벤트 리스너와 같은 비동기 작업의 결과 혹은 호출이 메시지 큐에 저장됨).

마이크로태스크 큐 vs 메시지큐(태스크 큐, 매크로태스크 큐)

비동기 작업들을 관리하는 두 종류의 대기열
자바스크립트의 이벤트 루프와 함께 작동하여 비동기 콜백 함수들을 적절한 순서와 시기에 실행시키는 역할을 함. 마이크로 태스크 큐와 메시지 큐의 주요 차이점은 그들이 다루는 작업의 종류와 실행 시점에 있음.

	마이크로태스크큐	메시지큐
작업종류	프로미스의 콜백(then, catch, finally), mutationObserver의 콜백 등	setTimeout, setInterval, 이벤트 핸들러(클릭, 키보드 이벤트)와 같은 비동기 작업이 메시지 큐에 포함됨.
실행시점	현재 실행중인 스크립트나 메시지큐의 작업이 완료된 직후 다음 메시지큐가 처리되기 전에 마이크로태스크 큐의 모든 작업이 실행됨. 마이크로태스크 큐가 비어있을 때까지 마이크로태스크가 연속해서 실행됨을 의미함.	이벤트 루프가 메시지 큐를 확인하여 콜 스택이 비어있을 때 큐의 첫번째 작업을 콜스택으로 이동시키고 실행함. 한 작업이 처리되면 이벤트 루프는 다시 큐를 확인하여 다음 작업을 처리함.

마이크로태스크는 메시지 큐에 있는 매크로 태스크보다 우선 처리됨. 현재 실행중인 매크로태스크나 스크립트가 종료되고 나면 이벤트 루프는 메시지큐의 다음작업을 처리하기 전에 마이크로태스크큐의 모든 작업을 처리함.
마이크로태스크 큐의 작업들은 연속해서 실행되며 이벤트 루프는 마이크로태스크큐가 완전히 비워질때까지 다른 매크로태스크의 처리를 지연시킴. 반면, 메시지 큐의 작업은 콜스택이 비어있을 때 하나씩 순차적으로 처리됨.
마이크로태스크는 매우 빠르게 처리되며 때로는 연속적인 비동기작업들이 너무 빨리 처리되어 브라우저가 다른 작업(UI업데이트)을 수행할 시간을 갖지 못하는 상황이 발생할 수도 있음