동기처리와 비동기 처리
자바스크립트 엔진은 한 번에 하나의 작업을 실행할 수 있는 싱글 스레드 방식으로 동작합니다. 현재 실행중인 작업이 종료될때까지 그 다음에 작업들은 대기처리가 되는 방식인데요. 이를 동기 처리라고 합니다.
반면에 비동기 처리방식이란, 현재 작업이 완료될 때까지 기다리지 않고, 다음 작업을 실행할 수 있도록 하는 프로그래밍 방식을 말합니다.
비동기 처리가 되는 함수들은 대표적으로 타이머 함수가 있습니다.
setTimeout, setInterval, Http 요청, 이벤트 핸들러 등이 비동기 처리 방식입니다.
그런데 자바스크립트는 분명히 싱글 스레드 방식으로 동작한다고 했는데, 막상 브라우저에서는 동시에 작업이 되는것이 분명히 많습니다. 이렇게 비동기 처리 방식이 될 수 있는 원리는 무엇일까요??
그 이유는 바로 브라우저에서 제공하는 WEBAPI와 콜스택 및 태스크 큐 그리고 이벤트 루프 로 설명할 수 있습니다.
WEB API 는 타이머 설정과 콜백 함수의 등록을 담당합니다.
태스크 큐는 비동기 함수의 콜백 함수 또는 이벤트 핸들러들이 일시적으로 보관되는 영역입니다.
Promise의 후속처리 메서드인 then은 마이크로테스크 큐로 갑니다.
마이크로테스크 큐는 우선순위가 태스크 큐보다 높습니다.
이벤트 루프는 자바스크립트 엔진의 구성요소중 하나인 콜스택에 현재 실행중인 컨택스트가 있는지 확인하는 동시에, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인을 합니다. 콜스택이 비어있고 태스크큐에 남아있는 함수가 있다면 콜스택으로 이동 시킵니다[FIFO]. 이때 콜스택으로 이동한 함수는 비로소 실행이 됩니다.
전체적인 흐름을 단계별로 설명해볼까요??
setTimeout(지연시간 1초)을 호출하면 다음과 같은 과정이 발생합니다
1. 콜스택에 setTimeout 함수가 들어와 실행됩니다.
- setTimeout은 브라우저의 WEB API에 콜백함수와 함께 타이머 설정(1초)을 요청합니다.
- 콜스택에서 setTimeout 함수가 제거됩니다.
- WEB API는 타이머를 관리하고, 설정된 지연 시간(1초)이 지난 후 해당 콜백 함수를 태스크 큐에 등록합니다.
2. 이벤트 루프는 콜스택이 비어 있는지 확인합니다. 콜스택이 비어 있으면 태스크 큐의 콜백 함수를 콜스택으로 이동시켜 실행합니다.
3. 이벤트 루프는 태스크 큐의 작업을 실행하기 전에 마이크로태스크 큐(예: Promise.then)의 작업을 먼저 실행합니다.
// 콜백함수는 태스크큐로 이동한다.
setTimeout( () => console.log(1),0);
// 프로미스의 후속처리메서드는 마이크로태스큐로 이동한다.
Promise.resolve()
.then(() => console.log(2))
.then(() => console.log(3));
/* 출력 결과 : 2 => 3 => 1*/
요약
동기 처리 : 현재 실행중인 작업이 종료될때까지 그 다음에 작업들은 대기처리가 되는 방식
비동기 처리 : 현재 작업이 완료될 때까지 기다리지 않고, 다음 작업을 실행할 수 있도록 하는 프로그래밍 방식
비동거 처리 절차에서 WEB API란? : 비동기 함수의 타이머 설정 및 콜백 함수 등록을 담당
콜스택 : JavaScript 엔진이 실행할 함수와 명령을 관리하는 방식의 데이터 구조
태스크 큐 : 비동기 함수의 콜백 함수 또는 이벤트 핸들러들이 일시적으로 보관되는 영역
마이크로 태스크 큐 : 비동기 작업 중 Promise의 .then 같은 고우선순위 작업의 콜백 함수들이 일시적으로 보관되는 영역.
이벤트 루프 : 콜스택(Call Stack)과 큐(Queue)를 관리하여 작업을 순서대로 실행하도록 돕는 매커니즘.
