JavaScript의 이벤트 루프

반응형

자바스크립트로 시작할 때, 이벤트 루프는 우리가 집중해야 할 주요 개념 중 하나이다.
자바스크립트는 단일 스레드 언어이기 때문에 이벤트 루프와 관련하여 다양한 혼동이 발생한다. 차근차근 다뤄보도록 하겠습니다.

자바스크립트는 단일 스레드 언어이다. 즉, 한 번에 하나의 작업만 실행할 수 있습니다. 즉, 자바스크립트 코드는 한 번에 한 줄씩 실행되는 방식으로 실행된다.

자, 상상해 봅시다: API에서 데이터를 가져오는 작업은 30초가 필요하므로 다른 작업이 발생하기 전에 30초를 기다리는 것은 이상적인 상황이 아닙니다. 그래서, 이벤트 루프의 개념이 여기 사진에 나타납니다.

그래서 우리는 작은 개념으로 시작해서 결국 이벤트 루프의 실제 정의로 넘어갈 것입니다.

1. 실행 스택/호 스택
   일반적인 말로 실행 스택은 LIFO 원리를 따르는 데이터 구조의 스택과 같습니다. 자바스크립트에서 실행 스택은 함수 호출을 추적하기 위해 사용된다. 함수가 작동되면 스택으로 밀어넣고 완료되면 툭 꺼집니다.

 

2. 웹 API
   웹 API는 브라우저가 제공하는 기능을 웹 앱에서 사용할 수 있게 해줍니다. setTimeout, fetch, HTTP 요청, localStorage, geolocation 등의 몇 가지 예가 있습니다.
3. 메시지 대기열/콜백 대기열/이벤트 대기열
   메시지 큐는 또한 FIFO 원칙이 따르는 데이터 구조의 큐와도 같습니다. 자바스크립트에서 비동기 작업이 완료되면 큐로 푸시되고 함수는 실행 스택에서 실행될 차례를 기다린다.

이제 위의 개념을 예제를 통해 이해하겠습니다.

Output of above example:
Hello, I am first
Welcome to event loop example
Byee // after 1 second

다이어그램으로 설명:

 

설명:

• 우선 실행 스택에서 13행의 hello() 함수를 밀어넣고, "Hello, I am first" 값을 console에 기록하면 실행이 완료되고 pop이 꺼진다.
• 자, 14번째 줄에서, 우리는 1000ms 또는 1초의 시간과 콜백 함수 bye()를 가진 setTimeout()를 가지고 있다. 이제 실행 스택에 푸시됩니다.
• 그러나 setTimeout()은 웹 API의 일부이기 때문에 1초의 타이머를 완료하기 위해 웹 API로 전달됩니다.
• 이제 15행에서 실행 스택에 welcome()가 푸시됩니다. 그리고 콘솔에 "이벤트 루프 예제에 오신 것을 환영합니다"를 기록한 후 실행이 완료되고 팝업됩니다.
• 이제 1초 타이머가 완료되었고, bye() 기능이 Web API에서 Message Queue로 이동한다고 가정해 보겠습니다.
• 이제 모든 동기 함수가 실행을 완료했기 때문에 실행 스택은 비어 있을 것입니다.
  그리고 bye() 함수는 메시지 큐에 있고, 이벤트 루프가 나옵니다.

이제 이벤트 루프는 실행 스택이 비어 있는지 확인하기 때문에 bye() 함수를 거기에 푸시하고 bye()가 실행을 완료하고 스스로 팝업된다.

위의 예에서 setTimeout의 도움으로 비동기 연산을 수행한 방법과 이벤트 루프가 이를 보다 단순하고 나은 방법으로 달성하는 데 도움이 된 방법입니다.

그 기사가 유용하셨기를 바랍니다.
도움이 된다면 좋아요와 댓글을 달아주세요.