[JavaScript] 비동기

자바스크립트 엔진

• 자바스크립트 엔진은 하나의 메인 스레드로 구성
• 메인 스레드는 코드를 읽어 한 줄씩 실행
• 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그림

동기적 제어 흐름

• 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것
• 분기문, 반복문,함수 호출 등이 동기적으로 실행
• 코드의 흐름과 실제 제어 흐름이 동일
• 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 함

비동기적 제어 흐름

• 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행
• 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행
• 코드 흐름과 실제 제어 흐름이 다름
• 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업 처리

자바스크립트 비동기

자바스크립트 엔진은 비동기 처리를 제공하지 않지만 비동기 코드는 정해진 함수를 제공하여 활용할 수 있음
그 함수를 API라고 함
예) setTimeout, XMLHttpRequest, fetch

비동기 처리 모델

비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있다
evnet loop, task queue(Macrotask Queue), job queue 등으로 구성
API 모듈은 비동기 요청을 처리 후 태스크 큐에 콜백 함수를 넣음
자바스크립트 엔진은 콜 스택이 비워지면 , 태스크 큐의 콜백 함수를 실행한다

• Task Queue(Macrotask Queue)
  비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로 이벤트 루프(Event Loop)에 의해 특정 시점(Call Stack이 비어졌을 때)에 순차적으로 Call Stack으로 이동되어 실행된다

• Job Queue(Microtask Queue)
  Microtask Queue는 Promise나 async/await, process.nextTick, Object.observe, MutationObserver과 같은 비동기 호출을 넘겨받는다
  그리고 Microtask의 우선순위는 일반 task(또는 macrotask)보다 더 높다

• Event Loop(이벤트 루프)
  Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행된다

비동기 처리 모델 애니메이션으로 보기