🌈 Intro
동기와 비동기를 공부하다, 자바스크립트는 싱글 스레드인데 어떻게 특정 작업을 다른 스레드로 보내고 다음 작업을 바로 수행하는 비동기 처리가 가능한지 의문이 생겼다. 찾아보니 자바스크립트를 실행하는 브라우저가 또 다른 스레드의 역할을 해준다는 것을 알게 되었다. 그래서 자바스크립트 엔진과 브라우저 환경이 어떻게 상호작용하며 동작하는지 정리해 보았다.
📍 자바스크립트와 동시 처리
자바스크립트는 싱글 스레드 언어이다. 즉, 자바스크립트 엔진은 싱글 스레드 방식으로 동작한다. 그러므로 그 자체로는 여러 개의 스레드를 스위칭하며 작업을 처리하는 동시 처리는 불가능하다. 하지만 브라우저 내장 기능인 이벤트 루프를 통해 동시 처리되는 것처럼 작동될 수 있다.
📍 이벤트 루프와 브라우저 환경
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
setTimeout(foo, 0);
bar();아래는 위의 코드의 처리 과정을 그림으로 표현한 것이다. setTimeout은 비동기 함수이므로 Web API로 넘겨지고 Call Stack에서는 바로 다음 작업인 bar를 실행한다. 이후 Call Stack이 비워지면 그제서야 setTimeout의 콜백 함수인 foo가 실행된다.
위의 코드를 JS Engine에서만 처리한다면 setTimeout -> foo -> bar 순으로 처리되었을 것이다. 하지만 이벤트 루프를 통해 setTimeout -> bar -> foo 순으로 처리 순서가 변경되었다. 이러한 방식으로 JS Engine은 싱글 스레드이지만 여러 스레드를 번갈아 처리하는 것처럼 느껴지게 함므로써 동시성을 가질 수 있다.
📍 Deep
- JS는 이벤트 루프를 통해 동시성을 제공받는가?
Yes. 비동기 처리된 작업이 Task Queue에서 대기하고, Call Stack이 비워졌을 때 삽입되어 작업의 순서가 변경된다. 따라서 JS Engine이 동시 처리하는 것처럼 작동한다. - JS는 이벤트 루프를 통해 동시 처리되는가?
No. 이벤트 루프를 통한 작업 순서 변경으로 동시 처리되는 것처럼 보일 뿐, JS Engine은 여전히 하나의 스레드에서 직렬 처리를 하고 있다. - 무엇이 비동기 처리 방식으로 동작하는가?
타이머 함수(setTimeout, setInterval), HTTP 요청, 이벤트 핸들러
References
🔗 모던 자바스크립트 Deep Dive - 이웅모
🔗 https://coding-lks.tistory.com/174
🔗 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕 - 인파
