앞선 포스팅에서 자바스크립트의 용도에 맞춰 다양한 라이브러리와 프레임워크들이 등장했고 백엔드 자바스크립트 프레임워크인 Express.js 와 Nest.js 를 소개했는데, 이처럼 js 엔진은 웹 서버에서도 쓰인다!
런타임
자바스크립트가 실행되는 환경에는 js 엔진과 환경에 맞는 api가 제공된다.
환경에 맞는 api? 환경에 따라 제공받는 api가 다르다는 뜻?
맞다! 브라우저 환경과 서버 환경은 각각 다른 api로 실행된다.
그 이유는 api의 컨셉을 알면 납득이 될 것이다.
자바스크립트를 실행하는건 JS 엔진이고 이를 특정 환경에서 동작하도록 주변부와 접합해주는게 API의 역할이기 때문에 당연히 환경에 맞도록 주변부가 세팅되어야 한다.
- WB: JS엔진 + Web APIS
- WS: JS엔진 + Node API + LIBUV
JS 엔진
브라우저 환경이든 서버 환경이든 JS 엔진이 필요하다. 자바스크립트를 실행시키는 JS 엔진은 다음 2가지 특징을 가진다.
1️⃣ Single thread
JS는 기본적으로 한번에 하나의 일만 수행한다. 이 특징을 그대로 가지고 코드를 작성하면 하나의 파일을 처리하는데 굉장히 오랜 시간과 메모리가 소모될 것이다. 이를 극복하기 위해 Web Worker API를 직간접적으로 사용하여 비동기 작업을 수행하도록 후작업을 해준다.
-
간접 사용: 자바스크립트에서 비동기 작업이 완료되면 해당 작업의 콜백은 Web APIs에 의해 태스크 큐에 쌓인다. 이벤트 루프는 콜 스택이 비워질 때까지 기다렸다가, 콜 스택이 비어 있으면 태스크 큐에 있는 콜백을 콜 스택으로 이동시킨다. V8 엔진은 이러한 동작을 메모리의 스택과 힙에서 관리하여 코드 실행을 처리한다.
-
직접 사용: const worker = new Worker('./sample_worker.js')로 worker thread를 만들어 main thread 와 분리해 작업한다.
Worker API 직접 사용 간단 설명
자바스크립트의 워커 API는 브라우저에서 멀티스레딩 작업을 가능하게 하는 기능이다. 이 API를 활용하면, 메인 스레드가 아닌 별도의 백그라운드 스레드(Worker thread)에서 코드를 실행할 수 있다. 워커 API는 복잡하고 시간이 많이 소요되는 작업을 백그라운드에서 처리하여 메인 스레드를 차단하지 않고, 페이지의 반응성을 유지하게 해준다.
Worker thread는 Main thread 와 독립적으로 작동하며, 메인 스레드와 데이터를 주고받을 수 있는데, 이 때 주고받는 데이터는 복사되어 전달되므로 원본 데이터에는 영향을 미치지 않는다. 워커 스레드에서는 DOM에 직접 접근할 수 없으며, 메시지 기반의 통신을 통해 메인 스레드와 상호작용한다.이 기능을 통해 개발자는 자바스크립트가 싱글 스레드로 동작한다는 제한을 넘어설 수 있다.
구체적으로는 postMessage, onMessage로 데이터 송수신하고, self. 로 원본 데이터에 접근한다고 하는데... 어려우니 일단은 간단하게 Multi Thread를 위한 도구라고만 생각하자.
2️⃣ stack, heap
자바스크립트 엔진에서 메모리 관리는 주로 두 가지 주요 구조, 즉 스택(Stack)과 힙(Heap)을 사용하여 수행된다.
- 스택: 함수 실행 순서대로 적재 및 수행
- 함수 호출에 필요한 영역을 보장해줌
- 함수 호출이 되면 늘어나고 끝나면 줄어듦
- 힙: 변수, 함수 저장
- 마찬가지로 변수나 함수가 저장되면 늘어나고 제거되면 줄어듦
정리
자바스크립트 엔진은 브라우저와 서버 환경에서 각각 다른 API를 사용하여 실행되며, 이를 통해 각 환경에 맞는 최적의 성능을 제공한다. Web Worker API를 통해 멀티스레딩 방식을 활용하면 메인 스레드를 방해하지 않고 비동기적으로 데이터를 처리할 수 있으며, 복잡한 작업을 효율적으로 관리할 수 있다.
참고
✔️ Web Worker 간단 정리하기
