Js - 자바스크립트 동작 원리(런타임 환경)

1. 자바스크립트 엔진(Js Engine)
2. Browser Web APIs
3. Callback Queue
4. Event Loop

 

그동안 자바스크립트가 어떻게 동작하는지 정확히 이해하지 못하고 프레임워크를 쓰기에 급급했던것 같아 자바스크립트 동작 원리에대해 공부한 후 정리를 하려고 한다.

 

자바스크립트는  위의 이미지와 같은 구조를 가지고있다. 자바스크립트의 런타임 환경은 Js엔진(Memory Heap , Call Stak), Web APIs, Callback Queue, Event Loop 등으로 이루어져 있으며, 각각 맡은 역할이 다르다. 자바스크립트를 처음 접하는 사람들은 멀티 스레드 언어로 종종 오해하는 경우가 있다. Web ApIs, Callback Queue, Event Loop를 활용하여 비동기 처리를 할 수 있기 때문이다. 하지만 자바스크립트는 Call Stack하나로 동작하는 싱글스레드 언어이다.

 

1. 자바스크립트 엔진(Js Engine)

자바스크립트 엔진은 Javascript 코드를 이해하고 실행을 도와준다. 대표적으로 Chrome과 Node.js 에서 사용하는 V8엔진이 있으며, 각 브라우저 별로 여러가지의 엔진들이 존재한다.

 

자바스크립트 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있다.

 

 

Memory Heap

Memory Heap은 참조 타입(object, array, function 등등) 데이터가 저장되는 공간이다.

 

Call Stack

Call Stack은 원시 타입(number, string, null, undefind 등등) 데이터와 실행컨텍스트를 저장하는 공간이며, LIFO(last-in, first-out) 구조를 가지고 있다. Call Stack에 마지막에 들어온 실행컨텍스트부터 실행을 한다는 것이다. 만약 비동기처리를 하는 컨텍스트가 들어온다면 Web APIs에 전달한다. 참고로 자바스크립트는 Call Stack이 한개 이므로 자바스크립트는 싱글스레드 언어이다. 

 

2. Browser Web APIs

Web APIs는 http 요청(ajax, axios, fetch), setTimeout(), 이벤트 핸들러 등록과 같이 웹 브라우저에서 제공하는 기능들을 말한다. 비동기 작업을 수행하기 위해 브라우저에서 지원하는 공간이다. Call Stack에서 비동기 처리를 하는 컨텍스트를 받아오며, 작업 완료시 Callback Queue에게 콜백함수를 전달한다. Web APIs 덕분에 자바스크립트가 멀티스레드 언어처럼 보이는 것이다.

 

3. Callback Queue

Callback Queue는 Web APIs에서 완료된 결과를 반환하는 콜백함수를 전달받으며 대기하는 공간이다. FIFO(first-in, first-out) 구조를 가지고 있다. Call Stack이 비어있으면 즉, 동기 작업을하는 컨텍스트가 끝나면 Event Loop에 의해 Call Stack으로 들어가서 컨택스트(콜백 함수)를 실행한다.

 

4. Event Loop

Event Loop는 Call Stack에 현재 실행 중인 컨텍스트가 있는지, 그리고 Callback Queue에 대기중인 함수가 있는지 반복적으로 확인한다. 그리고 Call Stack이 비어있고 Callback Queue에 대기중인 함수가 있을때 Callback Queue에 있는 콜백 함수를 순차적으로 Call Stack으로 옮겨주는 작업을 한다.

 

마치며

지금까지 자바스크립트로 작업을하며 기능을 구현하는데 급급했었다. 비동기 처리는 어떻게 하는지등 말이다. 생각해보니 나는 자바스크립트를 사용하는 개발자인데 자바스크립트 런타임을 모르고 작업을 해왔다니.... 지금이라도 동작 원리에 대해 알아야겠다는 생각이들어 공부를하며 글을 정리해 보았다.

 

 

참고

---

https://blog.toycrane.xyz/%EC%A7%84%EC%A7%9C-%EC%89%BD%EA%B2%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-c7fbdc44cc97

진짜! 쉽게 알아보는 자바스크립트 동작 원리

 

https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

자바스크립트의 동작원리: 엔진, 런타임, 호출 스택

https://it-eldorado.tistory.com/86

[JavaScript] 비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)