자바스크립트는 싱글 스레드 언어인데 어떻게 동시에 여러 작업들을 수행하는가?
2025-04-15 TIL-자바스크립트는 싱글 스레드 언어인데 어떻게 동시에 여러 작업들을 수행하는가?
자바스크립트는 싱글 스레드 언어인데 어떻게 동시에 여러 작업들을 수행하는가?
자바스크립트는 싱글 스레드 언어이다. 즉, 한 번에 하나의 작업만을 처리할 수 있는 단일 콜 스택을 가진다.
하지만 브라우저나 Node.js 환경이 제공하는 비동기 처리 메커니즘 덕분에 여러 작업을 동시에 수행할 수 있다.
자바스크립트의 비동기 처리 구조
비동기 작업(예를 들어, setTimeout 이나 fetch와 같은 작업)이 발생하면, 자바스크립트 엔진은 해당 작업을 직접 실행하지 않고 Web API(브라우저) 또는 libuv (Node.js)에 위임한다.
작업이 완료되면 콜백 함수는 태스크 큐(Task Queue)에 등록되고, 이벤트 루프(Event Loop)는 콜 스택이 비었는지 확인한 뒤 큐에서 콜백을 꺼내 다시 콜 스택으로 올려 실행한다.
이러한 구조 덕분에 자바스크립트는 단일 스레드로도 UI를 멈추지 않고 여러 작업을 동시에 처리하는 것처럼 동작할 수 있다.
태스크 큐의 종류
자바스크립트의 태스크 큐는 크게 매크로태스크 큐와 마이크로태스크 큐로 나뉜다.
매크로 태스크 큐
: 일반적인 비동기 작업의 콜백이 저장되는 큐
setTimeout,setInterval- 브라우저 이벤트 핸들러
- Node.js의
setImmediate, I/O 작업 등
이벤트 루프는 매크로태스크 큐에서 한 번에 하나씩 작업을 꺼내 콜 스택으로 실행한다.
마이크로태스크 큐
: 더 높은 우선순위가 필요한 비동기 작업들이 대기하는 큐
Promise.then(),catch(),finally()queueMicrotask()MutationObserver
이벤트 루프는 각 매크로태스크 실행 직전마다 마이크로태스크 큐의 모든 작업을 우선 처리한다.
이벤트 루프의 실행 순서 요약
- 콜 스택이 비어 있는지 확인
- 마이크로태스크 큐의 모든 작업 처리
- 매크로태스크 큐에서 다음 태스크 하나 꺼내 실행
- 위 과정 반복