JavaScript 런타임

 

📌 런타임이란?

• 런타임이란 프로그래밍 언어가 구동되는 환경을 말한다.
• 자바스크립트 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)프로그램과 Node.js 라는 프로그램이 있다.

 

 

 

📌 JavaScript - 싱글 스레드, 논-블로킹 언어

 

싱글 스레드
싱글 스레드는 하나의 힙 영역과 하나의 콜 스택을 가진다. 하나의 콜 스택을 가진다는 의미는 한 번에 한 가지 일 밖에 하지 못한다는 의미이다. 예를 들어 네트워크 요청을 한다면, 응답이 올 때까지 다른 일은 하지 못하고 마냥 기다릴 수밖에 없다.

 

 

콜 스택

함수가 실행되는 순서를 기억하고 있다. 함수를 실행하려면 스택의 가장 위에 해당 함수를 넣게 되고, 함수에서 리턴이 일어나면 스택의 가장 위쪽에서 함수를 꺼낸다.

 

 

콜 스택 예제

 

  

 콜 스택 에러 메시지

어떤 함수에서 에러가 발생했는지 로그를 보여준다. 에러 로그에 출력되는 것들이 콜 스택의 값들이다.

 

 

스택 오버 플로우

콜 스택이 가득 차러 발생하는 에러이다.

 

 

 

 

 

📌 블로킹

 

콜 스택이 멈춘 상태를 블로킹 상태라고 한다.

웹 브라우저에서 코드가 실행되는데, 코드가 종료될 때까지 유저가 클릭을 해도 어떠한 반응을 하지 않는 상태가 된다. 사용자에게 원활한 제공을 위해 콜 스택이 멈추게 해서는 안된다. 블로킹 상태를 해결하는 방법은 논-블로킹, 비동기 콜백을 사용하는 것이다.

 

 

 

 

📌 논-블로킹

 

싱글 스레드는 스택이 하나밖에 없기 때문에, 한 번에 한 가지 일을 한다. 네트워크 요청을 한다면 응답이 올 때까지 다른 일은 하지 못하고 기다려야 한다.

 

 

 

 

📌 자바스크립트 런타임

• 싱글 스레드인 자바스크립트가 매번 5초가 지났는지 체크하지 않고, 5초 후에 콜백을 호출할 수 있는 이유는 브라우저가 자바스크립트를 실행하는 것 이상의 의미를 가지기 때문이다.
• 자바스크립트 런타임은 자바스크립트 엔진, Web API, 콜백 큐, 이벤트 루프, 렌더 큐로 구성된다.

 

 

📌 자바스크립트 엔진 - V8

• 크롬은 자바스크립트 엔진으로 V8을 사용하고 있다.
• C++로 만들어져 있으며, Node.js, 크롬 브라우저 등에서 사용된다.
• V8은 싱글 스레드를 제공한다. 싱글 스레드는 하나의 콜 스택(Call Stack)과 하나의 힙(Heap)을 제공한다. 콜 스택은 위에서 이야기했듯이 함수의 호출 순서를 저장한다. 힙은 할당된 메모리들이 저장되는 영역이다.
• 하나의 콜 스택을 가지고 있다는 말은 한 번에 하나의 동작만 할 수 있다는 의미이다. 하지만 버젓이 setTimeout이나 ajax(HTTP 요청), DOM 이벤트 등 콜백으로 비동기 동작을 하도록 코딩하고 있다. 심지어 V8 소스에는 이러한 메서드들이 정의되어 있지도 않다.
• setTimeout(..., 5000)가 호출되었을 때, 누가 5초를 카운트하고 5초 후에 콜백 함수를 실행시키는 걸까?
  • 이 역할을 하는 친구가 바로 Web API이다.

 

 

📌  Web API

 

Web API는 자바스크립트 엔진에서 정의되지 않았던 setTimeout이나 HTTP 요청 메서드, DOM 이벤트 등의 메서드를 지원한다.

 

 

📌 콜백 큐

 

콜백 큐는 Web API 결괏값을 쌓아 두는 큐이다. 예를 들어 자바스크립트에서 setTimeout(cb, 5000)를 호출하게 되면, Web API는 타이머를 동작시켜 5초 후에 콜백 큐에, cb을 쌓는다.

 

 

📌 이벤트 큐

 

이벤트 루프는 콜 스택과 콜백 큐를 관찰하는 역할을 한다. 콜 스택이 비어 있으면 콜백 큐의 첫 번째 콜백을 스택에 쌓는다.

 

 

---

 

📌 자바스크립트 런타임 동작 예제

 

setTimeout

 

---

 

 

setTimeout(...,0)

0초 후 실행. 즉시 실행될 것 같지만 실제로는 아니다. 왜냐? 콜 스택이 비어있지 않기 때문이다.

이벤트 루프는 콜 스택이 비어있을 때까지 기다리다가 콜 스택이 비게 되면 콜백 큐의 첫 번째 콜백을 스택에 쌓는다.

 

 

---

 

 

ajax(setTimeout과 동일하게 동작)

 

 

 

 

 

참고

https://beomy.github.io/tech/javascript/javascript-runtime/