[Eric's JS] 이벤트 루프(Event Loop) 란? 🔄 JavaScript, 브라우저

안녕하세요! Eric입니다

웹 브라우저의 핵심 기능 중 하나인 이벤트 루프(Event Loop)에 대해 알아보도록 하겠습니다.

이벤트 루프는 웹 브라우저에서 동시성을 유지하고, 다양한 비동기 작업을 처리하는 역할을 담당합니다.

그러면 웹 브라우저의 이벤트 루프가 어떻게 작동하는지 알아보시죠!

 

✅ 이벤트 루프(Event Loop)란?

이벤트 루프는 웹 브라우저에서 발생하는 비동기 이벤트를 처리하기 위해 사용되는 역할을 하는 무한 루프이다.

JavaScript는 싱글 스레드 언어이므로, 이벤트 루프를 사용하여 동시성을 유지하며, 다양한 작업을 동시에 처리할 수 있다.

---

🔄  이벤트 루프의 작동 원리

예시)

하단처럼 JavaScript 코드가 작성되어있으면, 어떠한 순서대로 결과가 나올까?

console.log(1+1);
setTimeout(function() { console.log(2+3) }, 1000);
console.log(7+3);


// 결과는
2
10
5
//로 나올것이다.

이벤트 루프는 다음과 같은 순서로 작동한다.

 

1. 호출 스택(Callback Stack)을 확인

2. 호출 스택이 비어 있으면, 큐(Queue)에서 가장 오래된 이벤트(또는 태스크)를 꺼낸다.

3. 꺼낸 이벤트를 호출 스택에 추가하고 실행.

4. 이벤트 실행이 완료되면 호출 스택에서 제거.

5. 위 과정을 무한 반복합니다.

 

이벤트 루프는 호출 스택이 비어 있을 때만 큐에서 이벤트를 꺼내와 실행하므로,

동기 작업이 진행되는 동안 비동기 작업은 대기하게 된다.

---

🔄  비동기 작업 이란?

웹 브라우저에서 다음과 같은 비동기 작업들이 이벤트 루프와 함께 작동한다.

 

- 이벤트 리스너(Event Listeners): 사용자 입력, 네트워크 요청 등 다양한 이벤트에 반응하는 함수

- 타이머(Timers): setTimeout 및 setInterval과 같은 타이머 함수를 사용하여 지정된 시간 후에 함수를 실행

- AJAX 요청: 비동기 방식으로 서버와 데이터를 주고받을 수 있는 기술

---

✅ 결론

 

이벤트 루프는 웹 브라우저에서 동시성을 유지하고, 다양한 비동기 작업을 처리하는 핵심 메커니즘 시스템이다.

JavaScript는 싱글 스레드 언어이지만, 이벤트 루프를 통해 마치 여러 작업이 동시에 실행되는 것처럼 보이게 할 수 있다.

 

이벤트 루프를 이해하고 활용하면 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있다.

 

예를들어서, Stack에서 for문을 100000번 돌려서 5초의 delay 가 생긴다고 생각해보자.

이때, 만약 User가 for문이 도는 5초의 시간동안 버튼을 여러번 클릭(Event Listener)한다면,

브라우져는 Stack에 쌓여있는 for문을 다 도는동안 클릭이벤트를 처리 할 수 없으므로,

반응을 할 수 가 없다. 왜냐하면, 비동기작업(이 예시에서는 버튼을 클릭하는 Event Listener)은 대기실에서 대기하다가,

Queue에서 대기하다가 Stack이 비어있을때만 Stack 으로 올라가서 반응을한다.

하지만, 이 경우에 for문을 돌고 있으므로, 버튼 누른것에 반응을 하지 않을것이다. (왜냐하면 아직 Queue 에서 대기중이니까)

 

-> 이를통해서 Stack과 Queue를 바쁘게하면 안되겠구나 라고 생각을...!

 

이벤트 루프의 작동 원리를 통해 웹 브라우저에서 발생하는 동기 및 비동기 작업을 관리하는 방법을 이해할 수 있다.

이러한 지식을 활용하여 효율적인 웹 애플리케이션을 개발할 수 있으며, 성능 및 사용자 경험을 최적화하는 데 도움이 된다.

이벤트 루프는 웹 개발자가 되기 위한 중요한 개념 중 하나이므로, 꼭 숙지하고 활용할 수 있도록 노력하도록 하자.