자바스크립트 엔진
자바스크립트의 엔진은 싱글 스레드(Single thread)로 하나의 stack만 가질 수 있으며, 하나의 작업만 가능합니다.
그런데 어떻게 자바스크립트는 여러 가지 일이 동시에 실행되는 것처럼 만드는 걸까요?
이러한 문제는 비동기 콜백을 사용함으로써 해결됩니다. 비동기 요청은 자바스크립트 엔진을 구동하는 환경인 브라우저나 Node.js에서 처리됩니다. 브라우저나 Node.js는 비동기 처리를 위해 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)를 이용합니다.
비동기 처리를 위한 이벤트 루프(Event Loop), 태스크 큐(Task Queue)
자바스크립트 엔진은 콜 스택(Call Stack)과 메모리 힙(Memory Heap)으로 구성됩니다.
콜 스텍 : 함수 호출 및 실행 컨텍스트가 관리되는 메모리 영역으로 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 쌓히고 함수가 실행됩니다. 자바스크립트는 하나의 콜 스택을 사용하기 때문에 실행 컨텍스트가 종료되어 콜 스택에서 모두 제거 되기 전까지는 다른 태스트는 실행시키지 않습니다. 동기적 작업이 모두 끝날 때까지는 비동기 작업도 실행되지 않습니다.
메모리 힙 : 참조형 데이터가 저장되는 메모리 공간 입니다. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조하게 됩니다.
이벤트 루프 : 태스크 큐 중에서 가장 오래된 태스크를 하나씩 가져옵니다.
태스크 큐 : 태스크 큐는 비동기 작업의 완료된 결과나 처리할 콜백 함수들이 대기하는 공간입니다.
태스크 큐는 마이크로 태스크 큐(Micro Task Queue, 일반 태스크 큐와 동일) 매크로 태스크 큐(Macro Task Queue)로 나뉩니다.
마이크로 태스크 큐(Micro Task Queue)는 매크로 태스크 큐(Macro Task Queue) 보다 실행 우선 순위가 높습니다.
매크로 태스크 큐 (Macro Task Queue)는 DOM 이벤트 콜백, 타이머(setTimeout, setInterval), 스크립트 로딩 등을 처리하며, 마이크로 태스크 큐(Micro Task Queue)는 프로미스 핸들러 awit, MutationObserver, process 등을 처리합니다.
정리
자바스크립트 엔진은 싱글 스레드로 하나의 작업만 처리할 수 있습니다. 그럼에도 불구하고 비동기 작업을 통해 여러 작업을 동시에 처리하는 것과 유사한 효과를 얻을 수 있습니다.
비동기 요청은 브라우저나 Node.js와 같은 환경에서 처리됩니다. 이를 위해 이벤트 루프와 태스크 큐가 사용됩니다. 이벤트 루프는 콜 스택이 비어있을 때 태스크 큐의 작업을 실행시키며, 태스크 큐는 비동기 작업의 결과나 콜백 함수들이 대기하는 공간입니다.
비동기 처리를 통해 자바스크립트는 싱글 스레드의 제약을 극복하고 여러 작업을 효율적으로 처리할 수 있습니다.
