[JavaScript] 자바스크립트 런타임과 비동기 지원 방법

ssoonn 2024. 12. 10. 13:53

js 런타임 환경(JRE) = js 엔진(JVM) + API

웹브라우저는 js 엔진이 있다. → js 엔진 기반으로 web api 제공

웹 서버도 js 엔진이 있다. → js 엔진 기반 node api(서버 자원 활용) 제공 + LIBUV

js 엔진은 싱글스레드이므로, 멀티스레드는 api에서 제공한다. (=비동기처리)
- 즉, 웹브라우저에서는 web api가 비동기 처리 / 서버는 LIBUV에서 비동기 처리

1. 싱글스레드: 모든 js 코드 실행은 단 하나의 스레드가 실행한다.

2. 스택 + 힙

js 엔진 그 자체는 js 문법만 사용 가능하다. → 웹 서버/브라우저 기능을 사용하기 위해서는 이들이 제공하는 api를 사용해야 함.

ex. web api: Canvas API, Cookie API, File System API, Keyboard API …

다양한 웹 브라우저 존재 → 몇몇 브라우저에서는 api 사용 불가능할수도 (=browser compatibility)

ex2. node API: 웹 서버에서 제공되는 다양한 api들

recap!
js엔진 = 싱글스레드 + 메모리(stack+heap)

js 엔진 + web API

js엔진은 싱글스레드이기 때문에, 웹 브라우저에서는 비동기 지원을 위해 멀티스레드를 제공하는 Web Worker API가 필요하다.

https://youtu.be/eiC58R16hb8?si=E7986v-toWkJQSQ0

영상의 예시 중 getCurrentPosition (Geolocation API)

call stack에 getCurrentPosition 함수가 나타났다 pop
- callback을 등록하고, aync task를 시작하기 위함
web api
- (background) broswer에서 user에게 팝업 실행 > user가 allow 버튼 클릭 시 api가 유저의 응답을 받는다. > 응답 핸들링을 위해 successCallback
web api가 successCallback을 task queue에 push함
event loop는 call stack이 비었는지 확인한 후에 task queue의 첫 번째 항목(이 경우, successCallback)을 call stack에 전달
완료

cf. Web Worker API를 직접 사용하는 경우: fe 개발자가 직접 멀티스레드를 활용하여 개발

Web APIs : Audio API, Canvas API 많은것들중 백그라운드 스레드 활용을 위한 Web Worker API 존재
- 종류 : Dedicated Web Worker(특정 웹 페이지 귀속) + Shared Web Worker(모든 웹 페이지 공유)
- (특수 목적) Service Worker API : 웹 브라우저(웹앱)와 인터넷 사이의 Middleware 혹은 Proxy 동작
  - PWA : 오프라인 수행도 가능하여 웹앱이 앱과 유사하게 동작되게 점진적(Progressive)으로 향상
    - 웹 푸시 알림 서비스
    - 백그라운드 동기화 기능
    - 네트워크 인터셉트(헤더, 요청, 응답 조작 등) 및 캐싱
  - 웹 페이지가 닫히더라도 비활성화되지 않아 브라우저 창이 닫히더라도 푸시 알림을 받을 수 있다.
(심화) 동작 : postMessage, onmessage 와 같이 Pub/Sub Pattern 으로 구현
- 스레드간 데이터 통신을 위해 MessageChannel 활용 (onmessage + postMessage)
- 주의 : 앱이 실행되는 환경의 CPU 코어 수만큼 만들어서 사용하는 것이 가장 좋다.
  - navigator.hardwareConcurrency 를 통해 가져올 수 있다.
    - 사용자의 컴퓨터에서 스레드 실행에 사용할 수 있는 논리 프로세서의 수 반환

js 엔진 + Node APIs + LIBUV

*blocking, non-blocking 비동기 처리 = 네트워크, 파일I/O