[240429 TIL] 이벤트 루프, 태스크 큐

오늘은 자바스크립트의 비동기와 관련된 이벤트 루프와 태스크 큐에 대해 공부했습니다.

자바스크립트는 싱글스레드 언어인 것으로 알고 있는데, 태스크 큐는 또 다른 스레드를 쓴다고 합니다.
그렇다면 사실 멀티스레드인 걸까요? 그리고 태스크 큐는 비동기 함수나 콜백을 실행할 때만 사용되는 것인가요?

자바스크립트의 싱글 스레드 동작

자바스크립트 엔진은 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 태스크만 실행할 수 있습니다. 하지만 자바스크립트 환경(주로 브라우저나 Node.js)은 싱글 스레드인 자바스크립트 엔진 외에도 여러 개의 백그라운드 스레드를 사용하여 비동기 작업을 처리할 수 있게 해줍니다.

이벤트 루프와 태스크 큐

이벤트 루프는 자바스크립트가 멀티 스레드 같이 동작할 수 있게 하는 메커니즘입니다. 이벤트 루프의 주된 역할은 실행할 코드가 없을 때 태스크 큐(또는 여러 큐)를 감시하고, 실행 대기 중인 태스크가 있다면 순차적으로 실행시키는 것입니다.

태스크 큐는 비동기 작업의 콜백 함수들이 대기하는 곳입니다. 이 큐는 자바스크립트 엔진 외부에 존재하며, 이벤트 루프에 의해 관리됩니다. 비동기 작업이 완료되면 해당 작업의 콜백 함수가 태스크 큐로 이동하고, 이벤트 루프는 콜 스택이 비어 있을 때 태스크 큐에서 콜백 함수를 가져와 실행합니다.

멀티 스레드와 비동기 처리

자바스크립트 자체는 싱글 스레드로 동작하지만, 브라우저나 Node.js 같은 환경은 멀티 스레드를 사용하여 비동기 작업을 처리합니다. 예를 들어, HTTP 요청, 타이머 등은 브라우저 또는 Node.js의 백그라운드 스레드에서 처리되고, 처리가 완료되면 결과를 다루는 콜백 함수가 태스크 큐로 이동합니다.

태스크 큐의 활용

태스크 큐는 비동기 함수(예: setTimeout, setInterval, 비동기 HTTP 요청 등)의 콜백뿐만 아니라, 프로미스의 결괏값을 처리하는 콜백(then, catch, finally)을 포함하여 다양한 이벤트의 핸들러 등이 사용됩니다.

이렇게 복잡한 구조 덕분에 자바스크립트는 단일 스레드임에도 불구하고, 비동기적으로 여러 작업을 효과적으로 관리하고 실행할 수 있습니다. 이벤트 루프와 태스크 큐는 자바스크립트가 동기적 코드와 비동기적 코드를 유연하게 다룰 수 있게 해주는 핵심 구성 요소입니다.

 

 

그렇다면 fetch 등을 실행할 때 이러한 비동기 동작은 태스크 큐에서 대기하다가 메인 콜 스택에서 처리되는 것이고,
이것은 브라우저 환경 덕분에 가능한 걸까요??

 

 

1. 비동기 함수 실행: fetch 함수를 호출하면, 자바스크립트는 해당 요청을 브라우저의 네트워크 스택에 위임합니다. 이 때 fetch 함수는 프로미스를 반환하고, 이 프로미스는 처음에는 "대기(pending)" 상태입니다.
2. 백그라운드 처리: 요청은 브라우저의 백그라운드 스레드에서 처리되며, 자바스크립트 엔진은 다른 코드를 계속 실행할 수 있습니다. 이는 fetch가 비동기로 실행되기 때문에, 요청이 처리되는 동안에도 UI가 멈추지 않고 다른 작업을 계속할 수 있음을 의미합니다.
3. 태스크 큐에 추가: 요청이 완료되면, 응답을 다루는 콜백 함수(예를 들어, then에서 지정한 함수)가 태스크 큐에 추가됩니다. 이 콜백 함수는 프로미스가 "완료(resolved)" 상태가 되었을 때 실행됩니다.
4. 이벤트 루프 감시: 이벤트 루프는 콜 스택이 비어 있는지 주기적으로 확인합니다. 콜 스택이 비어 있고 실행할 준비가 된 콜백 함수가 태스크 큐에 있다면, 이벤트 루프는 그 콜백 함수를 콜 스택으로 이동시켜 실행합니다.
5. 콜백 실행: 태스크 큐에서 콜 스택으로 옮겨진 콜백 함수가 실행되면, 이 때 비로소 프로미스의 결과에 접근할 수 있으며, 이를 기반으로 UI 업데이트, 데이터 처리 등의 추가 작업을 수행할 수 있습니다.

이 과정을 통해 JavaScript는 싱글 스레드로 동작하면서도 비동기적인 작업을 효과적으로 처리할 수 있습니다. 콜백 함수와 프로미스, 그리고 async/await 구문 등을 사용하여 비동기 코드를 보다 쉽고 직관적으로 작성할 수 있습니다. 이 모든 것이 브라우저 환경이 제공하는 멀티 스레딩 및 이벤트 기반 아키텍처 덕분에 가능합니다.