목차
자바스크립트 엔진은 실제로 Call stack을 하나만 가지고 있는 싱글 스레드 언어이며 한 번에 하나의 태스크만 처리할 수 있다.
즉, 자바스크립트 엔진만으로는 여러 개의 태스크를 동시에 처리할 수 없다.
그림 1. 자바스크립트 엔진
그렇다면 자바스크립트 엔진은 어떻게 네트워크 처리 + 렌더링, 애니메이션 효과 + 클릭 이벤트 처리를 동시에 할 수 있을까?
브라우저 환경에 자바스크립트 엔진과 함께 내장된 브라우저가 자체적으로 관리하는 이벤트 루프 시스템이 있기 때문에 가능하다.
결론적으로 자바 스크립트가 싱글 스레드 언어일 뿐, 브라우저는 멀티 스레드 환경이기 때문에 비동기 처리와 동시성을 지원할 수 있다.
그림 2. 이벤트 루프와 브라우저 환경
이러한 과정들은 멀티 스레드로 동작한다. 브라우저가 멀티 스레드로 동작하기에 이런 동작들이 가능하다.
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
setTimeout(function () {
bar();
}, 100);
foo();
setTimeout(function () {
console.log('baz');
}, 100);
setTimeout
이 실행되면 자바스크립트 엔진의 콜스택에 setTimeout
실행 컨텍스트가 쌓인다. 브라우저의 내부적으로 Web API의 타이머 함수를 실행시킨다.setTimeout
함수가 자바스크립트 엔진의 Call Stack에서 팝된다.foo
가 호출되어 Call Stack에 foo
의 실행 컨텍스트가 쌓인다. foo
안에서 console.log
가 호출 되어 Call Stack에 console.log
의 실행 컨텍스트가 쌓인다. console.log
가 종료되어 Call Stack에서 pop되고, foo
도 종료되어 Call Stack에서 pop된다.setTimeout
이 호출되면 1-3의 과정이 반복된다. 이 때, 3과 4의 과정은 병행 처리 될 수 있다.
3은 브라우저가 수행하고, 4는 자바스크립트 엔진이 수행하기 때문에 가능하다.
풍문으로 들어 왔던 싱글 스레드, 비동기 처리에 관련된 내용을 정리해보았다.
강의에서 그림이 나오면 듣고 끄덕끄덕하고 기록을 안하는 바람에 다 까먹는 것 같다. 그래서 TIL이 오래 걸리는 것 같다고 생각했다. 그림 절대 기록해...🔥
사실 1주차 강의가 그동안 궁금하거나 많이 들어왔던 지식을 포괄적이게 설명하고 있고, 웹 개발자로서 나아가기 위해서 필수적으로 쌓아야 하는 지식들이라고 생각한다. 그래서 1주차 강의는 조금 시간을 들여서라도 장기 프로젝트로라도 각 파트별로 꾸준히 정리해보려고 한다. 자료구조부터는 조금 라이트한 TIL을 쓸 수 있을것 같다!
프로그래머스 프론트엔드 데브코스 Day1 [강의] 이벤트 루프
모던 자바스크립트 딥 다이브 42.2 이벤트 루프