이벤트 루프 (Event Loop)에 대해 설명해보세요.
1. 한마디 정리
이벤트 루프는 자바스크립트 엔진이 비동기 처리를 하기 위해 사용하는 메커니즘으로
1) 콜 스택과 태스크 큐를 관리하고,
2) 콜 스택이 비어있을 때, 태스크 큐에서 콜백 함수를 꺼내와 콜 스택에 쌓아 실행하고,
3) 콜백 함수를 비동기 처리하는데 사용합니다.
2. [상세내용] 역할
아래의 역할을 통해 이벤트루프는 자바스크립트에서 비동기 처리를 가능하게 하며, 콜백 함수를 사용하여 비동기 처리가 완료된 후 실행할 함수를 미리 등록할 수 있습니다. 이를 통해 자바스크립트에서 비동기 처리를 보다 간편하게 처리할 수 있습니다.
1) 콜 스택과 태스크 큐를 관리합니다.
- 콜 스택 : 현재 실행 중인 코드의 실행 컨텍스트를 저장하는 스택
- 태스크 큐 : 비동기 처리가 완료된 콜백 함수들을 저장하는 큐
2) 콜 스택이 비어있을 때, 태스크 큐에서 콜백 함수를 꺼내와 콜 스택에 쌓아 실행합니다.
콜 스택에 실행할 함수가 없어질 때마다
이벤트루프는 태스크 큐에서 콜백 함수를 꺼내와 콜 스택에 쌓아 실행
3) 콜백 함수를 비동기 처리하는데 사용됩니다.
- 비동기 함수가 실행될 때, 해당 함수의 콜백 함수를 태스크 큐에 등록합니다.
- 이벤트루프는 태스크 큐에 등록된 콜백 함수를 꺼내와 실행합니다.
3. 꼬리질문
1) 자바스크립트에서 이벤트루프가 필요한 이유는?
자바스크립트는 싱글 스레드(Single-threaded) 언어입니다.
즉, 코드를 한 번에 하나씩 처리합니다.
- 이는 코드의 실행 순서가 보장되는 장점을 가지고 있지만,
- 코드의 실행이 끝날 때까지 다른 작업을 처리할 수 없다는 단점도 가지고 있습니다.
=> 이 때문에 자바스크립트에서는 비동기 처리를 위해 이벤트 루프(Event Loop)를 제공합니다.
2) 비동기 처리란?
자바스크립트는 동기적 vs 비동기적
- 동기적 처리 => 한번에 한줄 순서대로 처리
- 비동기적 처리 => setTimeout, 이벤트리스너, ajax 함수를 쓰면
3) 콜 스택이란?
현재 실행 중인 코드의 실행 컨텍스트를 저장하는 스택
4) 태스크 큐란?
비동기 처리가 완료된 콜백 함수들을 저장하는 큐