[자바스크립트] 이벤트 루프? setTimeout(콜백, 0)을 쓰라구요?

유튜브 보다가 우연히 이벤트 루프에 대한 발표영상을 보고

이벤트 루프가 뭔지 그리고 콜백함수가 왜 중요한지 간략하게 개념 한번 더 잡아보려한다.

 

 

먼저 자바스크립트의 싱글 스레드 메커니즘에 대한 GPT의 설명을 보자.

 

자바스크립트는 주로 싱글스레드(single-thread) 환경에서 동작하는 프로그래밍 언어입니다.

이는 자바스크립트가 한 번에 하나의 작업만 처리할 수 있다는 의미입니다.

이 동작 원리를 이해하려면 몇 가지 개념을 알아야 합니다.

1. 이벤트 루프(Event Loop): 자바스크립트 엔진은 이벤트 루프를 통해 비동기 작업을 관리합니다. 이벤트 루프는 콜 스택(Call Stack), 백그라운드(Background), 태스크 큐(Task Queue)로 구성됩니다.
2. 콜 스택(Call Stack): 실행 중인 함수의 호출 정보를 저장하는 스택입니다. 함수가 호출되면 해당 함수의 실행 컨텍스트가 스택에 푸시되고, 실행이 완료되면 해당 컨텍스트가 스택에서 팝됩니다.
3. 백그라운드(Background): 비동기 작업, 예를 들어 타이머나 네트워크 요청과 같은 작업은 백그라운드에서 처리됩니다. 이 작업들은 완료되면 콜백 함수가 생성되고 태스크 큐로 이동합니다. (WEB APIs)
4. 태스크 큐(Task Queue): 비동기 작업의 콜백 함수가 대기하는 큐입니다. 콜 스택이 비어있을 때만 태스크 큐의 작업이 콜 스택으로 이동하여 실행됩니다. ★

이런 방식으로 자바스크립트는 싱글스레드인데도 비동기 작업을 처리하며 동시에 여러 작업을 다룰 수 있습니다. 아래는 이 과정을 간단한 순서로 정리한 것입니다.

1. 코드 실행 시작하면서 전역 컨텍스트가 콜 스택에 푸시됩니다.
2. 함수 호출이 있으면 해당 함수의 실행 컨텍스트가 콜 스택에 푸시됩니다.
3. 비동기 작업이 발생하면 백그라운드에서 해당 작업을 처리하고 콜백 함수를 생성합니다.
4. 콜백 함수는 태스크 큐에 들어가 대기합니다.
5. 콜 스택이 비워지면 태스크 큐에서 대기하던 콜백 함수가 콜 스택으로 이동하여 실행됩니다.
6. 위 과정을 반복하면서 코드의 실행과 비동기 작업 처리가 이루어집니다.

이렇게 하나의 스레드로 여러 작업을 처리하는 방식은 간단하고 예측 가능한 코드 흐름을 유지할 수 있게 해주는 장점을 갖고 있습니다. 하지만 긴 실행 시간을 필요로 하는 작업이 있다면 이는 다른 작업들을 블로킹할 수 있어 주의가 필요합니다. 이런 상황에서 웹 워커(Web Workers)와 같은 기술을 사용하여 멀티스레드 환경을 구성할 수도 있습니다.

 

📌 싱글스레드 환경에선 블로킹과 스택 오버 플로우를 예방을 위해 스택 관리가 중요하다!

 

 

 

콜스택은 LIFO(Last in First out)로 동작한다.

코드 윗줄부터 읽으며 콜스택에 쌓고 실행문을 만나면 가장 나중에 쌓인 코드부터 실행

 

 

이벤트 루프는 테스크 큐와 스택 영역을 주시하고 있다가
스택이 비어있을 때 큐에 쌓인 콜백을 스택에 푸시

 

 

셋타임아웃(0)과 같이 콜백함수를 의도적으로 쓰는 이유는 스택이 비어있을 때 함수를 실행시키기 위함이군!

 

 

📌 자바스크립트의 이벤트 루프에 대해 발표하는 영상
*무려 8년전 영상인 것은 다 보고 난 이후에 알았다.
https://youtu.be/8aGhZQkoFbQ