JavaScript 실행 환경이 하나의 스레드에서, 차례를 기다리는 처리를 하나씩 꺼내 실행하는 구조. 클릭이나 타이머, 통신 완료 등으로 발생한 처리는 태스크로서 대기열에 늘어서고, 지금의 코드가 끝나면 이벤트 루프가 다음 태스크를 꺼낸다. Promise의 처리(마이크로태스크)는 태스크 하나가 끝날 때마다 다음 태스크보다 먼저 모두 실행된다. 하나의 처리가 오래 계속되면 다른 이벤트 처리나 화면 그리기가 멈춘다.
일본어 명칭: イベントループ
이벤트 루프(Event Loop)은(는) 웹 기술 기초 등 1개 분야의 연습 문제 1개에 나와요.
분야: 웹 기술 기초
예를 들어 console.log('A') 다음에 setTimeout으로 B의 표시를, Promise의 then으로 C의 표시를 예약하고, 마지막으로 console.log('D')를 실행하면 표시는 A, D, C, B 순서가 됩니다. 동기적인 코드가 먼저 모두 실행되고, 그 후에 마이크로태스크인 C가, 마지막으로 태스크인 B가 실행됩니다. setTimeout에 0 ms를 지정해도 바로 실행되지는 않습니다.
브라우저의 메인 스레드는 JavaScript 실행과 클릭 등의 이벤트 처리, 화면 그리기를 담당하고 있습니다. 몇 초 걸리는 계산을 한 번에 실행하면 그동안 이벤트 루프가 다음 태스크를 꺼낼 수 없으므로, 버튼이 반응하지 않고 화면도 갱신되지 않습니다. 무거운 계산은 Web Worker로 다른 스레드에 옮기거나, 작게 나누어 조금씩 실행합니다.
통신이나 파일 읽기·쓰기에서는 완료를 기다리는 동안 스레드를 멈추지 않고, 끝났을 때 호출할 처리(콜백이나 Promise)를 등록해 둡니다. 완료되면 그 처리가 태스크로서 대기열에 들어가고, 이벤트 루프가 차례로 실행합니다. Node.js 같은 서버 쪽 실행 환경도 같은 사고방식으로, JavaScript를 하나의 스레드에서 실행하면서 많은 연결을 다룹니다.
아니요. 지정한 시간이 지난 후에 태스크로서 대기열에 들어가고, 지금 실행 중인 코드와 그때까지 쌓인 마이크로태스크가 끝난 후에 실행됩니다. 0 ms는 '가능한 한 빨리, 다만 지금의 처리 다음에'라는 의미가 됩니다.
페이지의 JavaScript 자체는 하나의 메인 스레드에서 동작하지만, Web Worker를 사용하면 다른 스레드에서 스크립트를 병렬로 실행할 수 있습니다. Worker는 DOM에 직접 접근할 수 없으므로, 메인 스레드와 메시지를 주고받아 결과를 전달합니다.
setTimeout에 0 ms를 지정해도 그 처리는 태스크로서 대기열에 들어가고, 이벤트 루프가 마이크로태스크를 다 처리한 후에 꺼내므로 B가 마지막이 됩니다.
위의 JavaScript를 브라우저에서 실행했을 때 콘솔에 표시되는 문자의 순서로 올바른 것은?동일 출처 정책(Same-origin Policy) 리버스 프록시(Reverse Proxy) 서버 사이드 렌더링(SSR) 웹소켓(WebSocket) 쿠키(Cookie) CORS(교차 출처 리소스 공유) DOM(문서 객체 모델) HTTP 메서드(HTTP Method) HTTP 상태 코드(HTTP Status Code) HTTP(하이퍼텍스트 전송 프로토콜)