자바스크립트의 내부 동작(Call stack)

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다.

 

자바스크립트의 내부 동작을 정확히 이해하는 것은 중요하기 때문에 정리해 보겠습니다.

 

런타임 환경(Runtime Environment)

자바스크립트의 런타임 환경은 다음 그림과 같이, 네 가지로 구성되어 있습니다.

1. 자바스크립트 엔진(힙과 호출 스택)

2. 웹 API

3. 콜백 대기열

4. 이벤트 루프

 

자바스크립트 엔진은 웹 브라우저에 존재하기 때문에 특정 소프트웨어를 설치할 필요가 없습니다. 브라우저 별로 다른 엔진을 사용하며, 시장에서 가장 점유율이 높은 Chrome의 경우 자바스크립트 엔진으로 V8 JS 엔진을 사용합니다. 자바스크립트 엔진의 목적은 개발자가 작성한 소스 코드를 컴퓨터가 특정 작업을 수행할 수 있는 기계어 코드로 변환하는 것이며 두 가지 구성요소로 되어 있습니다.

• Heap: 변수나 함수 등의 정보를 저장하는 곳입니다.
• Call Stack: 실행 중인 코드를 트래킹하는 공간입니다.

JS 엔진이 함수에 들어가면 스택으로 PUSH 되고, 함수가 값을 반환하거나 Web API로 전송되면 스택에서 POP 됩니다. 

그런데 자바스크립트는 단일스레드(single-threaded) 프로그래밍 언어(즉 콜스택이 하나)이므로, 여러가지 문제점이 있습니다. 예를 들어 수행 시간이 오래 걸리는 함수가 있을 때 브라우저는 이 함수를 실행하는 동안 아무 일도 할 수 없게 되는 경우 등이 있습니다. 물론 UI를 렌더링도 할 수 없고 결국 좋은 UX를 제공할 수 없습니다.

이를 해결하기 위해서는 비동기 콜백을 사용하는 것입니다. 즉, 코드를 일부만 실행하고 나중에 실행될 콜백을 제공합니다. 나중에 실행되기 때문에 바로 call stack에 PUSH되는 것이 아니라 따로 관리가 되는데 이는 Web API 다음으로 알아보겠습니다.

 

Web API

Web API는 자바스크립트 엔진의 일부는 아니지만 브라우저에서 제공하는 런타임 환경의 일부입니다(DOM, AJAX(XMLHttpRequest), setTimeout 등).

• DOM API: 가장 일반적으로 사용되는 웹 API 중 하나입니다. 이 API를 통해 HTML이나 CSS를 조작할 수 있습니다. 자바스크립트는 이를 통해 웹 페이지를 동적으로 만들 수 있습니다.
• Fetch API: 네트워크에서 리소스를 가져오기 위한 인터페이스를 제공합니다.

이벤트 리스너, 타이밍 함수, AJAX 요청과 같은 기능은 모두 작업이 트리거 될 때까지 웹 API 컨테이너에 있습니다. 요청이 데이터 수신을 마치고 타이머가 설정된 시간에 도달하거나 클릭이 발생하면 콜백 함수가 콜백 데이터로 전송됩니다.

 

콜백 큐(Callback Queue)

콜백 큐는 Web API에서 보낸 콜백함수를 추가된 순서대로 저장합니다(예를 들어 setTimeout일 경우 호출 후 지정한 시간이 끝나면 Web API가 콜백을 테스크 큐에 밀어넣습니다). Queue이기 때문에 선입선출로 실행됩니다. 호출 스택이 비워질 때까지 콜백 함수는 큐 안에 있으며 이벤트 루프에 의해 스택으로 이동됩니다.

 

이벤트 루프(Event Loop)

이벤트 루프의 역할은 호출 스택 및 콜백 대기열의 상태를 지속적으로 모니터링 하는 것입니다. 콜 스택이 비어 있으면 큐의 맨 앞에 있는 콜백 함수를 스택으로 이동하여 실행을 예약합니다. 즉, 자바스크립트 엔진과 그 실행 환경을 상호 연동시켜주는 것이 이벤트 루프의 역할입니다.

 

 

참고 및 출처

medium.com/@gemma.stiles/understanding-the-javascript-runtime-environment-4dd8f52f6fca