[JS] JavaScript Engine 이란

목표: JavaScript에 대해 알아보자.

요약

1. JavaScript Engine은 Heap과 Stack으로 구분된다.
2. JavaScript는 single threded programing lanuage 이다.
3. 비동기 방식 Event Loop로 JavaScript의 동시성을 지원한다.

 

1. JavaScript Engine 의 구조

JavaScript Engine 이라고 하면 Runtime Engine 을 말한다.

이 엔진은 크게 Heap 이라고 하는 메모리를 관리하는 영역과, 실행할 태스크를 관리하는 Stack 영역으로 구분된다.

 

Source: https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f

 

2. JavaScript는 single threaded programing lanuage 이다.

 

Stack은 요청이 들어올때마다 해당 요청을 순차적으로 호출 스택에 담아 처리한다.

JavaScript는 Stacke은 한 번에 하나의 태스크만 처리하고, 이를 single thread 기반의 Call Stack을 가진다고 말한다.

즉, 한 번에 하나의 태스크만 처리할 수 있다.

 

 

3. 비동기 방식 Event Loop로 JavaScript의 동시성을 지원한다.

JavaScript는 single thread 로 코드를 처리한다고 했다.

그러면 동시에 여러개의 태스크를 처리하기 위해서는 어떻게 해야할까?

 

Source: https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f

 

 

이벤트 루프(Event Loop)를 이용해서 callback queue(브라우저에서 발생한 이벤트) 를 call stack 에 보낸다.

이벤트 루프가 하는 일은 call stack을 지켜보고있다가

자리가 생기면 callback queue에서 callback function을 꺼내서 실행시켜주는 일만 한다.

계속 stack의 empty 여부만을 신경쓴다는 것이다.

 

만약에, 이벤트 루프가 이 반복적인 일을 일적 주기를 갖고 한다면?

call stack이 비어있지 않은데, callback queue에서 함수를 꺼내서 줘버리는 사고가 생긴다.

 

마치, 전자레인지에서 피자가 돌아가고 있는데 핫도그를 넣겠다고 전자레인지를 여는 것과 같다. 🍕🌭

 

그래서 이벤트 루프는 비동기 방식으로 실행중인 태스크가 call stack에 있는지, 없는지를 확인한다.

그래서 브라우저 입장에서는 single thread 로 처리중인 javascript가 마치 동시에 처리되고 있는 것 처럼 보인다.

 

---

 

 

Web APIs 는 뭔가요??

 

 

아래 그림이 가장 쉽게 이해할 수 있을 거다.

 

Source: https://medium.com/@theflyingmantis/javascript-single-threaded-non-blocking-asynchronous-concurrent-language-ffae97c57bef

 

 

웹 API(Web APIs)는 호출만 가능한 쓰레드를 말한다. (e.g. Node.js 의 경우 C++ API)

https://developer.mozilla.org/ko/docs/Web/API

Web API

그 API의 종류에는 AJAX, DOM, Timer 가 있다.

 

1) AJAX(Asynchronous Javascript And XML)

- AJAX는 비동기적으로 서버와 통신을 해서, JS 나 XML을 읽어들인다.

전체를 새로고침 하지 않아도 요청한 이벤트에 대한 것만 refresh 된다.

 

2) DOM(Document Object Model, 문서 객체 모델)

- DOM은 마크업 언어로 작성된 문서에 액세스하기 위한 표준적인 구조이다.

 

3) 스케쥴링을 위한 Timer

- 특히 setTimeout은 최소 delay시간을 준 후에 콜백 함수를 실행시킨다.

 

---

 

아주 개략적으로 JavaScript에 대해서 살펴보았다.

---