• 자바스크립트 엔진은 두 가지로 이루어져 있다.
  • Memory Heap
    • 객체, 구조화되지 않은 메모리가 할당되는 영역(변수, 객체)
  • Call stack
    • 코드가 실행될 때 호출 스택이 쌓인다.
• 브라우저는 단순히 엔진 하나만으로 구성되어 있지 않다.
  • DOM, AJAX, setTimeout 등은 브라우저에서 제공하는 Web API에 해당한다.
  • 이러한 Web API를 통제하기 위해 Event Queue와 Event Loop가 존재한다.

호출 스택

• 자바스크립트는 단일 스레드 프로그래밍 언어라서 단일 호출 스택이 있다
  • 한 번에 하나의 일(Task)만 처리할 수 있다.
  • 함수를 중첩해서 부르면 가장 나중에 불린 함수가 먼저 실행된다(스택)
• 단일 호출 스택의 문제점
  • 호출 스택이 하나만 있기 때문에 하나의 함수 처리가 느려서 다른 함수의 실행에 지장을 줄 수 있다.
  • 이 문제점을 해결책 중 하나는 비동기 콜백이다.

이벤트 큐와 비동기 콜백 처리 과정

• 자바스크립트 실행환경(Runtime)은 이벤트 큐를 가지고 있다.
• 비동기가 처리되는 과정

1. 이벤트 발생(DOM 이벤트, http 요청, setTimeout ...)

2. 비동기 함수는 C++로 구현된 web API 호출

3. web API는 콜백 함수를 이벤트 큐(콜백 큐)에 추가

4. 이벤트 큐는 대기하다가 스택이 텅 비는 시점에
   이벤트 루프를 돌려 스택에 넣는다 

• 이벤트 루프의 기본 역할은 큐와 스택, 두 부분을 지켜보다가 스택이 비는 시점에 콜백을 실행시켜 주는 것

일반적인 호출 스택 / 이벤트 루프

• 예시 https://new93helloworld.tistory.com/361

Microtask Queue > MacroTask

• 마이크로태스크 큐
  • Promise, async/await, process.nextTic, Object.observe, MutationObserver 같은 비동기 호출을 넘겨받는다