Javascript 는 브라우저에서 어떻게 동작하는가?

들어가기 전

지금까지 자바스크립트를 이용하여 프론트 개발을 진행해오면서 많이 들어본 단어들이 있다. 콜스택, 스택 오버플로우, V8 등등.. 이 중 스택 오버플로우는 콜백 함수를 잘 못해서 실제 직면한 적도 있었다. 모르는 걸 알면서도 모른 척 넘어간 불편한 진실이었지만… 이제라도 늦게나마 브라우저 위에서 돌아가는 자바스크립트에 대해서 자세히 공부를 해보기로 했다. 일단 본격적으로 글을 보기 전에 아래의 동영상을 보는 것을 추천한다. 아래의 동영상은 4년 전인 2014 년 JSconf 에서 나왔던 내용으로 이제서야 공부하는 내 자신이 얼마나 늦게 알았는지를 깨닫게 하는 영상이기도 하다.

우리가 사용하는 자바스크립트 는 자바스크립트 엔진 위에서 동작한다. 물론 당연한 소리이다. 자바스크립트 엔진이란 결국 자바스크립트 코드를 실행시키는 프로그램이기 때문이다. 웹킷, V8 등등 많이 들어봤지만 이러한 것들이 자바스크립트 엔진 종류 중 하나이다. 웹킷 같은 경우는 사파리용으로 애플에서 개발하였고, V8 같은 경우는 구글에서 개발하여 크롬의 일부가 되었다.

이러한 엔진에는 Memory Heap 과 Call stack 으로 구성되어 있다. 여기에 대한 설명은 브라우저 콜스택 이라고 검색하면 다른 블로그들에서 많이 설명을 하고 있기 때문에 해당 포스팅에서는 설명을 하지 않는다. (혹은 원문을 보고 싶으신 분은 여기를 누르시면 됩니다.) 사실 필자가 궁금했던 것은 콜스택과 Web API 그리고 콜백큐 였다. 그래서 여기에서는 3가지에 대해서만 설명을 한다. 일단 구조는 다음과 같다.

각자의 역할은 다음과 같다.

• 콜스택(Call stack): 동기적으로 순차적으로 실행되는 이벤트
• 웹 API(Web API): 브라우저에서 제공하는 API
• 콜백큐(Call Queue): 비동기 이벤트 혹은 onclick 와 같은 DOM 이벤트

아래에서 자세히 살펴보도록 하겠다.

콜스택(Call stack) 이란?

MDN 에 따르면 콜 스택은 여러 함수들을 호출하는 스크립트에서 해당 위치를 추적하는 인터프린터를 위한 메커니즘 으로 정의하고 있다. 해당 위치를 추적한다는 말이 조금 어려울 수 있지만, 쉽게 설명해서 현재 실행되고 있는 함수와 그 다음에 실행될 함수들의 정보를 가지고 있다. 한 예로 아래의 코드를 보면 이해할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function visitor () {
  there();
  console.log('visitor');
}

function there () {
  hi();
  console.log('there');
}

function hi () {
  console.log('hi');
}

visitor();

위의 함수를 실행 시켜보면 순차적으로 ‘hi there visitor’ 이라는 문구가 노출된다. 위의 함수들에 대해서 콜스택으로 표현을 하면 아래와 같다.

먼저 vistor 이라는 함수가 실행이 되면서 해당 함수가 콜스택에 쌓인다.

그 위에 쌓인 것이 없기 때문에 visitor 함수를 실행시킨다. 함수를 실행시키다 보니 there 이라는 함수가 콜스택에 추가된다.

그 후 there 이라는 함수를 실행시키다 보니 이전과 마찬가지로 hi 라는 함수가 콜스택에 추가된다.

그 후 hi 라는 함수를 실행시키는 hi 안에 드디어 첫 단어인 ‘hi’ 를 출력한다.

실행되고나면 아래의 스택 순서(LIFO)에 맞게 하나씩 실행되며 우리가 원하는 문장을 출력한다.

출처

• Loupe
• MDN 호출 스택