자바스크립트의 스레드와 동시성 처리를 위한 이벤트 루프(Event Loop)

개요

---

컴퓨터공학에서 스레드는 동시에 여러 작업이나 프로그램을 실행하는 것을 의미한다.

 

코드를 실행할 수 있는 각 단위를 스레드라고 한다.

 

스레드는 멀티 스레드와 싱글 스레드로 나뉘며, 멀티 스레드는 말 그대로 한번에 여러 작업을 처리할 수 있는 것을 의미하고 싱글 스레드는 한번에 하나의 작업만을 처리할 수 있다.

 

자바스크립트는 어떤 스레드를 가지며 어떻게 로직을 처리하는지 알아보자.

---

자바스크립트의 스레드

---

자바스크립트는 기본적으로 싱글 스레드 언어이다.

 

자바스크립트의 메인 스레드는 브라우저에서 사용자 이벤트를 처리하고, 디스플레이 렌더링 및 페인팅, 일반적인 웹이나 앱을 구성하는 대부분의 코드를 실행한다.

 

웹이나 앱을 렌더링하는 과정은 모두 하나의 스레드에서 일어나기 때문에 느린 웹 & 앱 스크립트는 전체 브라우저의 속도를 저하시킨다.

 

만약 웹이나 앱의 스크립트의 로직이 잘못되어 무한 루프에 빠지면 전체 브라우저가 중단된다.

 

이처럼 자바스크립트는 이벤트를 처리하는 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트를 싱글 스레드 언어라고 한다.

 

하지만 실제로 자바스크립트 런타임 환경에서는 이벤트 루프만 독립적으로 실행되지 않고 NodeJS같은 멀티 스레드 환경에서 실행된다.

---

자바스크립트의 멀티 스레드와 web workers

---

최신 자바스크립트는 추가 스레드를 생성하는 방법을 제공한다.

 

각 스레드는 서로 통신하면서 독립적으로 실행된다.

 

다른 스레드를 구현하기 위해 web workers와 같은 기술을 사용한다.

 

- web workers

• web workers는 Worker() 생성자로 생성한다.
• 워커는 자바스크립트 파일을 구동하는 객체로 window와는 다른 전역 맥락에서 동작하는 워커 스레드라는 곳에서 작동한다.
• 자바스크립트 코드 대부분은 워커에서 실행 가능하지만 DOM을 직접 조작할 수 없고, window의 일부 메소드나 속성은 사용할 수 없다는 제약이 존재한다.

https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API

Web Workers API - Web API | MDN

---

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

---

자바스크립트는 싱글 스레드 언어이지만 여러 요청을 한번에 처리할 수 있다.

 

이는 자바스크립트의 특징 중 하나인 이벤트 루프(Event Loop)와 관련이 있다.

 

기존 동기식 요청은 코드를 위에서부터 한줄씩 실행한다.

 

이 방식의 경우 앞에서 실행된 코드의 처리 시간이 오래 걸릴수록 시간 및 자원의 낭비가 심해진다.

 

때문에 자바스크립트는 처리가 오래 걸릴 것 같은 요청은 Web API라는 공간으로 이동시킨 후 나중에 처리한다.

이를 비동기 처리라고 한다.

---

자바스크립트 비동기 처리 과정

---

Call Stack

 

자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리한다.

 

Web API

 

웹 브라우저에서 제공하는 API로 AJAX나 Timeout 등의 비동기 작업을 수행한다. axios나 fetch의 경우에도 바로 실행되지 않고 Web API에 위임된다.

 

Task Queue

 

Callback Queue라고도 한다. Web API에서 넘겨받은 Callback 함수를 저장한다.

 

Event Loop

 

Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김.

 

Call Stack 같은 경우는 “가장 나중에 호출된 함수가 가장 먼저 종료(return)되어야 한다.”는 중첩 호출(nested call) 특성 때문에 스택 구조가 필수이다.

 

Task Queue는 먼저 들어온 Callback 함수를 먼저 수행해야 하는게 적합하므로 큐 구조이다.

console.log("start");

document.body.addEventListener("click", () => {

    console.log("callback start");

    setTimeout( ()=> { 
      console.log("1");
      setTimeout( ()=> {
        console.log("3");
      },10);
    },1);

    setTimeout( ()=> { 
      console.log("2");
    },1000);

    console.log("callback end");
});

console.log("end");

처음 실행 시 첫번째와 마지막 console.log("start"); console.log("end");가 수행된다. 그리고 사용자의 클릭 이벤트가 task queue에 들어간다.

클릭 이벤트의 console.log("callback start"); 가 수행된다. 그리고 첫번째 setTimeOut이 task queue에 들어간다.

 

그 후 두번째 setTimeout이 task queue에 들어가고 console.log("callback end");가 수행된다.

첫번째 setTimeout의 console.log("1");이 수행되고 첫번째 setTimeout의 하위 setTimeout 함수가 task queue에 들어간다.

 

그 후 첫번째 setTimeout의 하위 setTimeout이 아닌 두번째 setTimeout이 수행된다.

 

왜냐하면 task queue는 먼저 들어온 비동기 요청을 우선적으로 처리하기 때문이다. 

마지막으로 최하위 setTimeout이 수행되며 함수가 종료된다.

---

참고문헌

---

본 글은 다음 문헌들을 참고하여 작성되었습니다.

https://developer.mozilla.org/ko/docs/Glossary/Thread

스레드 (Thread) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

https://velog.io/@jaehyeon23/Javascript-%EC%99%80-%EC%8A%A4%EB%A0%88%EB%93%9CThread