[Javascript] 콜스택과 이벤트루프

 

 

 

1. 콜스택과 이벤트루프란?

Javascript가 어떻게 동작하는지 이해를 잘하면, 효율적이고 안정적인 코드를 작성할 수 있다. 

Javascript는 싱글 스레드 기반의 언어이기 때문에 한 번에 하나의 작업만 처리할 수 있다. 따라서 여러 개의 작업을 처리하려면 비동기적으로 처리해야 하는데 이 때 콜스택과 이벤트 루프를 이용하여 비동기 처리를 구현한다.

 

1) 콜스택

Javascript는 함수 호출 시 콜스택을 사용하여 함수의 실행 순서를 관리한다. 콜스택은 함수 호출을 기록하는 데이터 구조인데, 함수가 호출될 때마다 콜스택에 새로운 프레임(실행 컨텍스트 - 로컬변수, 매개변수 등)이 추가되고, 함수가 종료될 때마다 프레임이 제거된다. 이렇게 스택에 쌓인 함수들은 자료구조 스택 처럼 LIFO(Last In First Out) 구조로 실행된다. 만약 함수가 중첩되어 호출되면 스택에는 호출된 순서대로 쌓인다. 이러한 콜스택은 메모리 할당에 제한이 있기 때문에 너무 많은 재귀 호출이나 무한 루프 같은 상황에서는 스택 오버플로우가 발생할 수 있다.

위 이미지의 첫줄에 Maximum call stack size exceeded가 그 예이다.

 

2) 이벤트루프

 

이벤트 루프는 브라우저 내부의 콜스택, 콜백큐, Web APIs 등의 요소들을 계속 모니터링하면서 비동기적으로 실행되는 작업들을 관리하고, 이를 순서대로 처리하여 프로그램의 실행 흐름을 제어한다. 이름의 loop에서 알 수 있듯 반복적으로 모니터링하며 처리하는 것이다.

콜백 함수는 비동기적으로 실행되며, 실행이 완료되면 이벤트 큐에 해당 이벤트가 추가된다. 이벤트 루프는 콜스택이 비어있을 때, 이벤트 큐에서 이벤트를 꺼내와 콜스택에 넣어 실행한다. 이러한 과정을 반복하면서 비동기적으로 처리되는 작업들을 순서대로 실행한다.

이렇게 이벤트 루프는 비동기 작업을 처리하고, 콜스택이 비어있을 때 콜백 함수를 실행하여 이벤트를 처리하는 역할을 한다. 이벤트 루프는 두 가지 메인 컴포넌트로 구성되는데 각각 콜스택과 메시지 큐이다. 메시지 큐에는 콜백 함수나 이벤트 핸들러 등이 대기하고 있고, 이벤트 가 발생했을 때 해당 이벤트와 함께 연결된 콜백 함수가 메시지 큐에 추가된다. 이벤트 루프는 콜스택이 비어있을 때마다 메시지 큐에서 이벤트를 꺼내와 해당 이벤트에 대한 콜백 함수를 호출한다.

 

2. 이벤트루프가 동작하는 순서

• 코드가 실행되면, 초기에는 전역 실행 컨텍스트가 콜스택에 푸시된다.
• 함수가 호출되면 해당 함수의 실행 컨텍스트가 콜스택에 추가된다.
• 만약 함수가 비동기 작업을 수행하면, 해당 작업은 백그라운드에서 처리되고 작업이 완료되면 그에 대한 콜백 함수가 메시지 큐에 추가된다.
• 이벤트 루프는 콜스택이 비어있을 때마다 메시지 큐를 확인하고, 콜백 함수를 콜 스택에 푸시하여 실행.
• 이렇게 콜스택과 메시지 큐를 계속 모니터링하여 비동기 작업이 처리되고, 동시에 다른 작업들이 블로킹되지 않으면서 Javascript가 계속 실행될 수 있다.