자바스크립트의 이벤트 루프

자바스크립트에서 비동기 작업을 가능하게 하는 이벤트 루프에 대해 알아봅니다.

자바스크립트의 이벤트 루프

 

자바스크립트의 이벤트 루프

 

1. 이벤트 루프는 왜 필요한가?

2. 이벤트 루프는 어떻게 작동할까?

3. 예시 코드로 살펴보기

 

1. 이벤트 루프는 왜 필요한가?

 자바스크립트는 싱글스레드 언어이다. 따라서 한번에 하나의 작업만 수행한다. 하지만 이 때의 문제는 만약 시간이 오래 걸리는 작업이 있을 시, 전체 서비스가 멈출 수 있다는 것이다. 예를 들어 서버에서 데이터를 모두 받아올 때까지 서비스의 작동이 멈춘다면 어떻게 될까?
 이러한 상황을 해결하기 위한 것이 이벤트 루프다.

2. 이벤트 루프는 어떻게 작동할까?

 알아야 할 주요 개념은 콜스택, 태스크 큐 2가지다. 콜 스택은 함수가 실행될 때, 콜스택에 추가된다. 콜스택에 담긴 작업은 순차적으로 실행된다.
 만약 당장 실행을 끝마치지 않아도 되는 작업 (비동기 작업)일 시 백그라운드로 옮겨 작업을 진행한다. 비동기 작업이 끝난 후 발생한 작업 (콜백 함수, 데이터 전처리 작업 등이 해당)은 태스크 큐에 추가된다.
 이후 콜스택이 비었을 때 테스크 큐에 있는 작업을 콜스택으로 옮겨 진행한다.

3. 예시 코드로 살펴보기

function fetchData() {
  console.log("fetchData 함수 시작");

  fetch("https://example.com").then((response) => {
    console.log("받아온 데이터를 json으로 변환");
    return response.json();
  });

  console.log("fetchData 함수 끝");
}

 상단의 코드가 실행되는 과정은 다음과 같다.

 1. fetchData 함수가 콜스택에 추가된다.
 2. 'fetchData 함수 시작' 문자열이 출력된다.
 3. 서버에서 데이터를 불러오는 작업을 백그라운드로 옮겨 진행한다.
 3 - 1. 데이터를 모두 불러왔으면, '받아온 데이터를 json으로 변환' 문자열을 출력하는 작업을 태스크 큐에 추가한다.
 4. 'fetchData 함수 끝' 문자열을 출력하고, 콜스택에 fetchData 함수를 제거한다.
 5. 콜스택에 비었으므로, 태스크 큐에서 담긴 '받아온 데이터를 json으로 변환' 작업을 옮겨와 실행한다.