JavaScript 런타임

병용·2023년 5월 24일
0

note

목록 보기
3/6
post-thumbnail

JavaScript 런타임이란?

웹브라우저와 Node.js와 같이 JavaScript가 구동되는 환경을 말한다.

V8엔진과 JavaScript

V8엔진?

V8엔진은 자바스크립트 엔진 중 하나로 크롬 웹브라우저와 Node.js에서 사용되고 있고 하나의 콜스택과 하나의 힙영역을 가진다. 아래에서 setTimeout,ajax 와 같은 비동기 메소드에 대해 이야기할건데, 사실 자바스크립에서 사용하는 비동기 메소드는 V8엔진에 있는게 아니고 웹브라우저가 가진 Web APIs이다. 자세한건 아래에서 다시 다뤄보겠다.

Heap? Stack?

힙과 콜스택은 V8엔진의 구성요소로 힙은 변수와 객체를 저장하는 메모리영역이고 콜스택은 함수를 읽고 실행시키는 영역이다. 함수를 실행시키면 콜스택 가장 위에 해당 함수가 들어가 실행되고 할 일을 마친 함수는 콜스택에서 사라진다.

JavaScript

자바스크립트는 싱글스레드 프로그래밍 언어로 하나의 프로그램에서 한번에 하나의 코드만 실행할 수 있고 다음 코드를 실행하기 위해선 이전 코드의 실행이 완료되어야 한다.

동기와 블로킹

동기와 비동기

동기

동기는 서버에서 요청을 보냈을 때, 응답이 돌아와야 다음 동작을 실행한다.
자바스크립트는 싱글스레드 언어로 동기적으로 작동한다고 할 수 있다.

비동기

비동기는 동기와 반대로 요청에 대한 응답과 관계없이 다음 동작을 실행한다.
앞선 요청에 대한 응답은 결과가 나오는대로 출력된다.

블로킹

하나의 콜스택을 가진 V8엔진에서 완료까지 시간이 걸리는 동작이 스택에 남아 다음 동작에 넘어가는데 시간이 걸리는 것을 블로킹이라고 한다. 블로킹 상태에서는 콜스택이 다른 동작을 못하고 사용자가 뭘 클릭하거나 해도 반응을 못한다. 이때 발생한 이벤트들이 뒤에서 얘기할 콜백큐에 쌓여있다가 블로킹 상태에서 벗어나면 그제야 반응하기도 한다.

자바스크립트 비동기와 논블로킹

웹브라우저가 가진 Web APIs에는 setTimeout,AJAX 등이 있고 이벤트루프와 콜백큐를 가지고 있다. 자바스크립트 자체는 비동기적으로 요청을 처리할 수 없지만 웹브라우저가 지원하는 API로 비동기 요청을 처리할 수 있게 해준다. 비동기 메소드를 사용해 해당 요청들을 API가 비동기적으로 처리하고 그 결과인 콜백들을 콜백큐라는 공간에 쌓아놨다가 콜스택에 자리가 나면 이벤트루프를 통해 쌓아놨던 콜백들을 콜스택에 올려 처리하는 방식이다. 이를 통해 블로킹현상을 해결할 수 있다.

REF

  • https://hanamon.kr/javascript-%eb%9f%b0%ed%83%80%ec%9e%84-%ec%9e%91%eb%8f%99-%eb%b0%a9%ec%8b%9d-%eb%b9%84%eb%8f%99%ea%b8%b0%ec%99%80-%ec%9d%b4%eb%b2%a4%ed%8a%b8-%eb%a3%a8%ed%94%84/
  • https://beomy.github.io/tech/javascript/javascript-runtime/
  • https://www.youtube.com/watch?v=8aGhZQkoFbQ
  • profile
    횡설수설 정리노트

    0개의 댓글