1. 자바스크립트의 비동기 asynchronous
비동기 asynchronous 코드
동기 synchronous 코드와 달리, 코드가 순서대로 실행되지 않음
- 일반적으로 타임아웃, 네트워크 요청 등 시간이 걸리는 작업에 사용
- 당장 할 수 있는 것들을 먼저 다 하고, 시간이 걸리는 작업은 뒤로 넘기기
- 💡 만약 비동기 방식이 없다면 - 데이터를 받아오는 동안 화면이 어는 등 불편함
자바스크립트의 비동기의 동작원리
- 자바스크립트는 싱글 스레드로 비동기 작업은 처리할 수 없음
- 자바스크립트에서 비동기 처리를 할 수 있는 이유
이벤트 루프와 태스크큐
- 자바스크립트 엔진은 **콜 스택(Call Stack)**과 **메모리 힙(Memory Heap)**으로 구성
- 콜 스텍 : 함수 호출 및 실행 컨텍스트가 관리되는 메모리 영역으로 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 쌓히고 함수가 실행
- 메모리 힙 : 참조형 데이터가 저장되는 메모리 공간 입니다. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조하게 됩니다.
- 이벤트 루프 : 브라우저의 내장 기능 중 하나로 실행 할 함수를 관리하는 역할로 콜 스택과 큐(Queue)의 함수를 계속 확인하며, 콜 스택이 비어 있고 큐에 대기 중인 함수가 있다면, 순차적으로 큐에 대기중인 함수를 콜 스택으로 이동시킴
- 태스크 큐 : 태스크 큐는 비동기 작업의 완료된 결과나 처리할 콜백 함수들이 대기하는 공간으로 마이크로 태스크 큐(Micro Task Queue, 일반 태스크 큐와 동일) **매크로 태스크 큐(Macro Task Queue)**로 나뉨
- 큐는 먼저 들어간 데이터가 먼저 나오는 특징(FIFO, First In First Out)을 가짐
- 매크로 태스크 큐 (Macro Task Queue) : DOM 이벤트 콜백, 타이머(setTimeout, setInterval), 스크립트 로딩 등을 처리
- **마이크로 태스크 큐(Micro Task Queue)**는 프로미스 핸들러 awit, MutationObserver, process 등을 처리
- rAF 큐(Request Animation Frame Queue):
requestAnimationFrame() 처럼 애니메이션을 업데이트하는 콜백 함수가 대기하는 곳이다.
- 실행 우선 순위는 마이크로 태스크 큐 > rAF 큐 > 태스트 큐 순서
- 자바스크립트는 하나의 콜 스택을 사용하기 때문에 실행 컨텍스트가 종료되어 콜 스택에서 모두 제거 되기 전까지는 다른 태스크 실행시키지 않는다. 즉, 동기적 작업이 모두 끝날 때까지는 비동기 작업도 실행되지 않는다.