Javascript는 어떻게 비동기 처리가 가능한 것인가

자바스크립트 엔진 자체는 싱글 스레드 기반으로 동작하여 한번에 하나의 작업만 처리할 수 있는 콜 스택 을 갖는다. 하지만 자바스크립트가 실행되는 환경(웹 브라우저나 Node.js)은 자바스크립트 엔진 외에도 비동기 작업을 처리하는 별도의 API(Web API 또는 C++API)와 여러개의 큐(Queue), 그리고 이들을 조율하는 **이벤트 루프(Event Loop)**를 제공한다. 이 구조 덕분에 싱글 스레드 입에도 불구하고 논블로킹(none-blocking) 방식으로 비동기 처리가 가능하다

참고: Javascript에서의 비동기 함수

이벤트 루프#

자바스크립트의 비동기 프로그래밍 모델의 핵심 메커니즘

eventloop

• 콜 스택(Call Stack): 현재 실행중인 함수의 실행 컨텍스트를 저장하는 LIFO 구조의 스택이다. 동기적인 코드 실행을 담당한다.

• Web API/Node.js API: setTimeout,setInterval,DOM 이벤트 리스터, fetch(네트워크 요청), 파일 I/O등 비동기 작업을 처리하는 환경 제공 기능이다. 이 작업들은 자바스크립트 엔진의 메인 스레드 밖에서 수행된다.

• 태스크 큐(Task Queue/Macrotask Queue): Web API등에서 완료된 비동기 작업의 콜백 함수들이 대기하는 FIFO구조의 큐이다. setTimeout,setInterval콜백, I/O 완료 콜백, UI렌더링 작업 등이 여기에 해당한다.

• 마이크로태스크 큐(Microtask Queue): 태스크 큐와 유사하지만, 더 높은 우선순위를 가진다. Promise콜백 함수(Callback Function)이란 무엇인가의 .then(),.catch(),.finally()콜백, queueMicrotask(),MutationObserver콜백 등이 여기에 해당한다.

• 이벤트 루프(Event Loop): 콜 스택과 큐들을 지속적으로 감시하는 프로세스

  1. 콜 스택 확인: 콜 스택이 비어있는지 확인한다.
  2. 마이크로태스크 큐 처리: 콜 스택이 비어 있다면, 마이크로태스크 큐에 있는 모든 콜백 함수를 순서대로 꺼내어 콜스택에 넣고 실핸한다. 마이크로태스크 실행 중 새로운 마이크로태스크가 추가되면 이 역시 현재 루프 주기 내에서 모두 처리된다.
  3. 매크로태스크 큐 처리:마이크로태스크 큐가 비워니 후 (그리고 필요한 UI 렌더링 등이 수행된 후), 매크로태스크 큐에서 하나의 콜백 함수를 꺼내어 콜 스택에 넣고 실핸한다.
  4. 위 과정을 계속 반복한다.