이벤트 루프

Minhyuk Song·2024년 3월 19일
0

Javascript

목록 보기
1/5
post-thumbnail

이벤트 루프에 대해 설명해주세요.

이벤트 루프의 필요성

단일 스레드 방식인 자바스크립트는 단일 호출 스택이기 때문에, 비동기 코드를 싱글 스레드에서 동작하기 위해서 자바스크립트 엔진에서 이벤트 루프가 필요합니다.

다시 말해, 단일 스레드 방식인 자바스크립트에서 비동기 코드를 동작하기 위해 (= for 동시성) 이벤트 루프가 필요합니다.

이벤트 루프의 동작

이벤트 루프의 동작 원리로는 코드가 실행하면 코드가 콜 스택에 쌓입니다.
이때 비동기 코드가 콜 스택에 들어오면 Web APIs가 호출되어 비동기 코드의 콜백 함수를 태스크 큐에 넣습니다.
그리고 이벤트 루프가 콜 스택에서 현재 실행하고 있는 태스크가 있는지 없는지 계속 확인하고, 태스크가 없다면 이벤트 루프가 태스크 큐에 있는 콜백 함수를 콜 스택에 이동시켜줍니다.

더 나아가기

자바스크립트 엔진에 대해서 설명해주세요.

Web APIs에는 어떤 게 있나요?

자바스크립트 엔진

자바스크립트 엔진의 주요 두 구성요소는 메모리 힙과 콜스택입니다.
메모리 힙은 메모리 할당이 일어나는 곳이며, 콜 스택은 코드 실행에 따라 함수가 스택에 쌓이는 곳입니다.

DOM, Ajax, setTimeout과 같이 브라우저에서 제공하는 API 들을 Web API라고 합니다.

이벤트 루프콜백 큐 (태스크 큐)를 자바스크립트 엔진과 연동시키며 동시성을 위해 관리한다고 보면 이해하기 편할 것 같습니다.

참고로 태스크 큐에서는 매크로 태스크마이크로 태스크가 있습니다.
자바스크립트 엔진은 매크로 태스크 하나를 처리할 때마다 또 다른 매크로 태스크나 렌더링 작업을 하기 전에 마이크로태스크 큐에 쌓인 마이크로 태스크 전부를 처리합니다. 더 나아가, 마이크로 태스크는 Promise가 해당됩니다.

참고 링크

캡틴 판교 - 자바스크립트의 동작원리

profile
스크린을 넘어 유쾌한 경험을 드리는 프론트엔드 개발자가 되도록 노력하고 있습니다.

0개의 댓글