동기
- 직렬 방식으로 작업을 처리하는 것
- 하나의 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리할 수 있음
- 그동안 다른 모든 작업은 대기함
싱글 스레드 자바스크립트
- 자바스크립트는 싱글 스레드로 작동하기 때문에 기본적으로 한 번에 하나의 작업만 동기 방식으로 처리할 수 있음
- 자바스크립트는 초기에 HTML을 그리는데 보조하는 역할로 탄생했기 때문에 멀티 스레드 복잡한 내부 처리와 동시성 문제가 발생할 수 있는 멀티 스레드가 아닌 싱글 스레드로 설계됨
- 자바스크립트에서 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는 특징을 갖음 = "Run-to-completion"
비동기
- 동시에 일어나지 않는 것
- 병렬 방식으로 작업을 처리할 수 있음
- 동기식과 다르게 요청한 즉시 결과가 주어지지 않을 수 있고, 따라서 응답이 언제 올지도 알 수 없음
- 하지만 여러 작업을 동시에 수행할 수 있다는 장점이 있음
console.log(1);
setTimeout(() => {
console.log(2);
}, 0)
setTimeout(() => {
console.log(3);
}, 1000)
console.log(4);
// 실행 결과는 1 4 2 3
이벤트 루프란
- 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치
- 콜 스택이 비어 있는지 여부를 확인함
- 단순히 이벤트 루프만의 단일 스레드 내부에서 호출 스택에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있다면 자바스크립트 엔진을 이용해 실행함
- 비동기로 실행할 작업을 태스크 큐에 넣음
- 만약 호출 스택이 비어있다면 태스크 큐를 확인하고 작업이 있으면 해당 작업을 수행함
- 이벤트 루프는 태스크 큐를 한 개 이상 가지고 있음
- 비동기 함수의 콜백 함수나 이벤트 핸들러는 자바스크립트가 코드가 동기적으로 실행되는 메인 스레드가 아닌 태스크 큐가 할당되는 별도의 스레드에서 수행됨
- 별도의 스레드에서 태스크 큐에 작업을 할당해 처리하는 것은 브라우저나 Node.js의 역할
호출 스택(call stack) : 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택
태스크 큐
- 실행해야 할 태스크(비동기 함수의 콜백 함수나 이벤트 핸들러 등)의 집합
- 태스크 큐는 큐가 아닌 set 형태를 띠고 있음
- 그 이유는 선택된 큐 중에서 실행 가능한 가장 오래된 태스크를 가져와야 하기 때문
- 대표적인 작업 : setTimeout, setInterval, setImmediate
마이크로 태스크 큐
- 이벤트 루프는 하나의 마이크로 태스크 큐를 가짐
- 기존의 태스크 큐와는 다른 태스크를 처리
- 대표적인 작업 : process.nextTick, Promises, queueMicroTask, MutationObserver
- 기존 태스크 큐보다 우선권을 갖음
- 마이크로 태스크 큐가 빌 때까지 기존 태스크 큐의 실행은 뒤로 미뤄짐
렌더링은 마이크로 태스크 큐 작업이 끝날 때 실행되는 기회를 얻음
즉, 마이크로 태스크 큐와 태스크 큐 사이에 일어남
