이벤트 루프(Event Loop)

이벤트 루프는 싱글 스레드인 JS 엔진에 동시성을 부여하기 위한 특성이다.

 

이벤트 루프에 대해서 좀 더 자세하게 정리해보자

먼저 첫 문장에서 나온 말에서 4가지 단어에 대해서 이해하면 좋을 것 같다.

1. JS 엔진
2. 싱글 스레드
3. 동시성
4. 이벤트 루프

JS 엔진

자바스크립트 엔진은 대표적으로 구글 크롬 브라우저의 V8 엔진이 있습니다.

JS 엔진의 내부에는 메모리 힙(Memory Heap), 콜 스택 (Call Stack)이라는 구성요소가 존재하고 하는 일은 다음과 같습니다.

Memory Heap: 메모리 할당이 발생

Call Stack: 실행 콘텍스트에 따라 호출 스택이 쌓이는 공간

 

싱글 스레드(Single Thread)

자바 스크립트는 싱글 쓰레드 언어이다.  싱글 스레드라는 것은 호출 스택이 하나라는 뜻이고 결국 싱글 스레드에서는 구조상 한 번에 하나의 처리만 가능하기 때문에 동기식 요청이 일반적이다. 동기식 요청을 사용하게 되면 하나의 작업 시간에 관계없이 이전 작업이 끝이 나야 다음 작업, 코드가 실행된다. 따라서 앞의 작업시간이 길어지면 대기시간이 자연스럽게 길어지고 자원의 낭비가 심해진다. 호출된 함수가 실행이 끝나지 않고 콘텍스트가 계속 쌓이다 보면 호출 스택의 허용치를 넘기게 되고 에러를 발생시키게 된다.

 

동시성

이렇게 동기적으로 처리되면 속도뿐만 아니라 많은 단점이 있기 때문에 자바스크립트는 비동기 콜백을 활용하여 여러 작업을 동시에 처리하는 것처럼 보이게 동시성을 부여하여 사용합니다.

 

이벤트 루프

위에서 정리한 단어를 바탕으로 JS 엔진의 비동기 과정을 정리해보고, 그 속에서 이벤트 루프의 역할도 정리해보겠습니다.

 

JS 엔진의 비동기 처리 과정

JS엔진이 비동기 처리를 할 때 4가지 요소들이 필요합니다.

- Call Stack: JS 엔진에서 실행 콘텍스트에 따라 함수가 쌓이는 공간

- Web API: 웹 브라우저에서 제공하는 AP로 비동기 작업을 실행해 주는 역할

- Task Queue: Callback Queue라고 하며, 비동기 작업에 따른 Callback을 저장하는 공간

- Event Loop: Task Queue에서 Call Tack 내 함수 유무를 판단하여 Tack Queue의 Callback 결과를 전달하는 역할

 

setTimeout과 같이 비동기 함수가 Call Stack에 들어오게 되면 JS엔진이 처리하지 않고 Web API가 처리하도록 전달합니다.

실행 컨텍스트가 Call Stack에 쌓인다.

WebPack에서는 setTimeout 함수를 처리하고 Task Queue로 callback을 전달합니다.

Call Stack에서 WEB API를 거쳐 Task Queue로 callback 전달

Task Queue에서 Call Stack으로 Callback을 넘겨주는 역할을 이벤트 루프가 담당하게 됩니다.

 이벤트 루프는 Call Stack이 비어있는지 확인하고 비어있으면 Callback을 넘겨받은 순서대로 Call Stack에서 처리할 수 있게 해 줍니다.

Call Stack이 비어있는지 확인

Callback을 넘겨준다.

넘겨받은 Callback을 처리하면서 Call Stack을 비운다.

 

지금까지 이벤트 루프의 역할을 JS 엔진의 동작과 함께 정리해보았습니다.

 

복잡한 개념이라 설명에서 많이 부족함이 있을 수 있습니다.

이상한 부분에 대해서 언제든 알려주세요!