자바스크립트 동작원리

 

동작원리를 알아보기 전, 동작에 필요한 엔진을 살펴보자.

 

여러가지 자바스크립트 엔진 중에서 가장 많이 사용하는 V8엔진에 대해 알아보자.

구글의 V8엔진은 다음과 같이 구성되어있습니다.

 

메모리 힙(Momory Heap) 과 콜 스택(Call Stack) 두 가지로 구성되어있습니다.

메모리힙에서는 메모리 할당이 발생하고, 콜스택은 코드가 실행될 때마다 스택이 하나씩 쌓이는 곳입니다.

 

이 V8엔진이라는 것은 결국 자바스크립트를 바이트코드로 컴파일하고 실행하는 방식입니다.

 

그리고 대부분이 사용하는 크롬웹브라우저는 V8엔진이 탑제된 자바스크립트 런타임입니다.

여기서 런타임이란, 프로그래밍 언어가 구동되는 환경을 말합니다.

 

 

추가적으로, V8엔진은 자바스크립트 엔진임과 동시에 웹 어셈블리 엔진이기도 합니다.

 

웹 어셈블리란?

어느 브라우저에서나 빠르게 실행되는 형식으로 바꿔주는 기술을 뜻한다.

 

 

 

 

 

---

 

 

 

 

• 이제 이렇게 준비되어있는 자바스크립트 엔진을 통하여, 가상머신이 이해할 수 있는 바이트코드로 변환됩니다.
• 가상머신은 바이트코드를 CPU가 이해할 수 있는 기계어로 변환합니다.
• 컴퓨터의 CPU가 이 기계어를 수행한다.

 

 

 

 

 

 

 

---

 

자바스크립트는 싱글스레드인데, 어떻게 비동기 콜백이 작동할 수 있을까?

 

 

 

 

 

 

 

위 그림을 이해하면, 비동기코드들이 어떠한 방식으로 동작하는 지 알 수 있다.

결국 위에서 설명한 바와 같이, 자바스크립트는 싱글스레드 언어이기 때문에 하나의 코드가 긑나야만 다음 코드를 실행시킬 수 있다. 그렇기 때문에, 하나의 작업이 끝날때까지 브라우저는 동작하지 않아 굉장히 비효율적이다.

그렇기 때문에, 우리는 비동기 함수를 사용한다.

 

이 비동기 함수는 자바스크립트에서 제공하는 것이 아니다. 자바스크립트는 앞서 말했듯이, 싱글스레드이기 때문에 블로킹을 만든다. 하나의 응답이 끝나야만, 다음 작업을 실행할 수 있다.

 

 

 

그렇다면 어떻게 비동기 콜백을 실행시키는 것일까?

웹브라우저에서 Web API를 제공한다. 즉, 웹브라우저에서 스레드를 지원한다.

 

V8엔진이 아닌, 웹브라우저에서 별도로 API를 제공한다. 때문에 자바스크립트가 싱글스레드임에도 불구하고, 비동기콜백을 통하여, 한 번에 여러 작업을 수행할 수 있는 것이다.

 

 

하여튼, 이렇게 Web API를 통해 완료된 비동기 콜백은 콜백 큐를 거쳐 콜스택에 들어가게 된다. 

 

여기서 콜백 큐는 콜스택이 비워져있을 때만 콜 스택에 들어갈 수 있다. 이렇게 비어있는 지 아닌 지 계속해서 주시하는 역할은 위 그림에서 이벤트루프가 맡는다.

 

여기까지가 자바스크립트 코드들이 실행되는 원리이다. 비동기와 동기로 나뉘어 따로 실행이 되며, 엔진이 어떻게 구성되어있는 지 를 알 수 있었다.

 

 

 

 

 

 

 

 

 

---

다음에는 비동기를 처리하는 방법에 대해서 알아보아야한다. 지금까지의 내용으로는 비동기 함수가 실행이 되기 위해서는 무조건적으로 콜스택이 비워져있어야만 콜백 큐에서 넘어가므로, 작업의 순서를 제어할 수 없다. 이를 제어하기 위해서 promise와 콜백함수들의 방법이 존재한다. 다음에는 이것들에 대하여 알아보자.