TIL - 자바스크립트의 이벤트 루프 이해

이벤트 루프 정의

---

이벤트 루프는 자바스크립트가 단일 스레드에서 실행되는 환경에서 비동기 작업을 효율적으로 처리하는 방법입니다.

 

 

이벤트 루프의 필요성

---

자바스크립트의 작동 방식과 블로킹 문제가 발생할 수 있습니다. 

자바스크립트는 단일 스레드로 작동하므로 한 번에 하나의 작업만 처리가 가능합니다. 그러나 브라우저는 멀티 스레드 환경에서 실행됩니다. 이로 인해 JavaScript에서 긴 작업이 실행되면 다음 작업이 차단되는 블로킹이 발생할 수 있습니다.

 

// 블로킹 함수로 인한 UI 차단을 보여주는 예시

// 블로킹 함수 정의
function blockingFunction() {
    console.log("블로킹 함수 시작");
    // 아주 오랜 시간 동안 실행되는 반복문 (가정)
    for (let i = 0; i < 1000000000; i++) {
        // 아무런 작업도 수행하지 않고 반복문을 실행하여 브라우저를 차단함
    }
    console.log("블로킹 함수 종료");
}

// 블로킹 함수 호출
console.log("블로킹 함수 호출");
blockingFunction(); // UI를 차단하는 블로킹 함수 호출
// 블로킹 함수가 실행되면서 UI가 차단되고, 이후의 코드는 실행되지 않음

// 오랜 시간 후 메인 코드 블록 계속 실행
console.log("메인 코드 블록 계속 실행");

 

 

위 코드는 블로킹 함수를 호출하여 UI가 차단되는 상황을 보여줍니다. 블로킹 함수가 실행되는 동안에는 다른 작업이 중단되어 사용자가 더 이상 웹 페이지와 상호 작용할 수 없게 됩니다. 이것이 JavaScript의 단일 스레드 모델에서 발생하는 블로킹 문제입니다.

 

이벤트 루프는 콜 스택을 모니터링하여 비동기 작업이 완료될 때까지 대기하고, 완료되면 해당 작업을 처리하는 역할을 해서 위 블로킹 문제를 해결할 수 있습니다.

 

// 블로킹 함수 정의
function blockingFunction() {
    console.log("블로킹 함수 시작");
    // 아주 오랜 시간 동안 실행되는 반복문 (가정)
    for (let i = 0; i < 1000000000; i++) {
        // 아무런 작업도 수행하지 않고 반복문을 실행하여 브라우저를 차단함
    }
    console.log("블로킹 함수 종료");
}

// 블로킹 함수 호출
console.log("블로킹 함수 호출");
setTimeout(() => {
    blockingFunction(); //비동기 함수로 호출
}, 0); 
// 블로킹 함수가 비동기 처리 되면서 UI가 차단되지 않고, 이후의 코드는 실행

// 메인 코드 블록 계속 실행
console.log("메인 코드 블록 계속 실행");

 

 

결론

---

이벤트 루프를 통해 JavaScript는 비동기 작업을 효율적으로 관리할 수 있습니다. 이는 콜백 함수를 사용하여 작업이 완료될 때까지 대기하지 않고 다음 작업을 진행함으로써 가능합니다. 이를 통해 브라우저가 사용자의 입력에 신속하게 응답하고 UI가 블로킹되지 않고 업데이트될 수 있습니다.

 

 

 

출처: https://www.devh.kr/posts/2021-11-24-JavaScript-Visualized-Event-Loop

 

 

 

참고 강의

---

https://youtu.be/8aGhZQkoFbQ?si=4ZbPIPzVO6G2I5b7