JavaScript - 이벤트 루프

춤추는개발자·2023년 6월 4일
0
post-thumbnail

이벤트 루프를 알아보기 전에 동기 처리 방식과 비동기 처리 방식에 대해서 알아보도록 하겠습니다.

동기 처리 방식은 태스크를 순서대로 하나씩 처리 하는 방식 입니다.순서가 보장되는 장점을 가지고 있습니다. 하지만 현재 실행 중인 태스크가 종료되기 전까지는 다음 태스크는 대기 상태이기 때문에 블로킹이 발생하게 됩니다.

비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않았어도 다음 태스크를 바로 실행하는 방식 입니다. 블로킹이 발생하지 않는다는 장점이 있지만 순서가 보장되지 않는 단점을 가지고 있습니다.

자바스크립트는 하나의 싱글 스레드로 한번에 하나의 태스크만 처리합니다. 우리가 웹사이트를 사용하다 보면 프로그램이 동시에 하나의 일만 처리하는 것 같지는 않아 보입니다. 실제로 이벤트 루프가 자바스크립트의 동시성을 지원해줘 동시에 다양한 일들을 하게 됩니다.

이벤트 루프는 브라우저가 가지고 있는 하나의 기능 입니다.

브라우저 또는 node.js 에 의해서 비동기 처리가 어떻게 진행되는지 알아보기 위해서 자바스크립트 엔진의 콜스택, 힙 영역 그리고 브라우저 또는 node.js 의 이벤트 루프, 태스크 큐에 대해서 알아보도록 하겠습니다.

콜 스택

코드가 평가되면 실행 컨텍스트가 생성되어 실행 컨텍스트 스택에 푸시가 되고 코드가 실행 됩니다. 코드가 종료되면 실행 컨텍스트 스택에서 빠져나오게 됩니다. 이 실행 컨텍스트 스택이 콜 스택 입니다. 콜 스택에 쌓인 제일 위에 실행 컨텍스트 순서대로 실행 컨텍스트가 실행 됩니다.

객체가 저장되는 메모리 공간 입니다. 메모리에 저장하기 위해서는 저장할 크기를 결정해야 하는데 객체는 크기가 정해져 있지 않아 런타임 이후에 동적으로 결정해야 합니다. 실행 컨텍스트는 힙에 저장된 객체를 참조하게 됩니다.

태스크 큐

비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역 입니다.

이벤트루프

콜 스택에 현재 실행중인 실행 컨텍스트가 있는지와 태스크 큐에 대기중인 함수가 있는지 계속 확인하여 콜 스택이 비어 있고 태스크 큐에 대기중인 함수가 있다면 이벤트 루프가 대기중인 함수를 콜 스택으로 푸시 해 줍니다. 콜 스택으로 푸시 된 함수는 즉시 실행 됩니다.

만약 코드에 비동기 함수 setTimeout 이 있다면 브라우저는 타이머 설정을 하고 타이머가 만료되면 콜백 함수가 태스크 큐에 푸시 됩니다.
전역 코드와 명시적으로 호출한 함수가 모두 종료되면 콜 스택에 전역 실행 컨텍스트가 빠져나오게 됩니다. 그러면 콜 스택은 비어 있고 이벤트 루프는 태스크 큐에 대기중인 콜백 함수를 푸시하게 되어 콜백 함수가 실행 되는 것 입니다.

setTimeout 등 비동기 처리 코드의 코드 평가는 자바스크립트 엔진이 진행하고 타이머 설정과 콜백 함수 등록 등의 과정은 브라우저가 진행 합니다.
이렇게 자바스크립트 엔진과 브라우저가 협력하여 비동기 처리를 하게 됩니다.

위의 내용은 모던 자바스크립트 deep dive 책을 참고 하였습니다.

0개의 댓글