[ASAC 6기] 웹 개발이란 무엇이며, 어떻게 동작하나? FE(2) - JS엔진, JS엔진 비동기 처리

✅Javascript Framework

JS는 웹 개발의 공식 프레임워크 같은 것이 아니라 단순히 프로그래밍언어이기에 정말 미친듯이 다양한 라이브러리와 프레임워크들이 등장하게 됐다.

🔷프론트엔드 Javascript Framework

    🔹React.js (다른것들과 달리 리액트는 라이브러리지만 프론트엔드 프레임워크로 분류된다)

    🔹Angular

    🔹Vue.js

🔷백엔드 Javascript Framework

    🔹Express.js

    🔹Nest.js  

🔷그래픽 Javascript Framework

    🔹Three.js 등

 

프론트엔드, 백엔드 자바스크립트 프레임워크를 나열했는데, 이처럼 웹 브라우저나 웹 서버에서도 쓰인다.

---

✅ 자바스크립트 런타임 = JS엔진 + API 및 기타 라이브러리/바이너리

언어를 실행하기 위해서는 엔진이 필요한데, 자바스크립트는 웹브라우저, 웹서버 어디서든지 사용할 수 있다.

자바스크립트 엔진을 기반으로 자바스크립트 언어로 된 모든 코드를 실행할 수 있게한 뒤 필요한 API들을 조합

 

런타임은 엔진 + 라이브러리 API로 구성된다.

 

자바스크립트 런타임은 웹 브라우저와 웹 서버에 사용된다.

🔹웹 브라우저 = V8 자바스크립트 엔진 + Web APIs(웹 라이브러리)

🔹웹 서버 = V8 자바스크립트 엔진 + Node APIs(서버라이브러리) + LIBUV

APIs처럼 's'가 붙은 이유는 다양한 API가 존재하기 때문이다.
LIBUV는 비동기 I/O이다.

 

🔷자바스크립트 엔진 구성: 크롬 V8기반

1. 싱글 스레드

2. stack + Heap

💡Stack과 Heap
(Call) Stack: 함수 실행 순서대로 적재 및 수행
    🔹간단하게, 함수 실행 순서는 Stack
Heap: 선언 및 할당된 변수 및 함수 저장
    🔹여려 변수 및 함수를 담는다

 

---

✅ JS엔진에서 비동기는 어떻게 지원되는것인가? API를 통해

위에서 JS엔진은 싱글 스레드라고 하였다.

그럼 비동기 처리를 어떻게 지원하지? JS런타임은 엔진 + API로 이루어졌다고 했는데, API를 통해 비동기를 지원한다.

 

API로 멀티스레드를 사용할 수 있다.

 

비동기 처리하기 위해서는 call back 함수를 stack에 저장하는데, call back란 비동기 처리한 후 호출하는 파라미터로 넘겨주는 함수이다.

🔷 "웹 브라우저"에서의 비동기 지원: 멀티스레드

웹 브라우저에서 비동기가 어떻게 이루어지는지 설명하는 영상보러가기

longRunningTask가 끝나기 전까지 imortTask수행을 못함

JS엔진이 싱글 스레이드이므로 엔진 자체로는 비동기 호출이 불가능하다.

싱그 스레이드면 뭐가 문제일까? 스택에 함수가 쌓이면서 스택에 쌓여 있는 함수의 처리가 올래걸리면 다른 task를 할 수가 없다. 즉 동시에 호출해야하는 비동기 호출이 많은데 싱글 스레드에서는 한가지 일이 끝나기 전까지는 다른 일을 할 수가 없다. 그래서 웹 브라우저에서 JS엔진이 비동기 호출을 하기 위해 API를 사용하여 멀티 스레드를 사용한다.

위 사진처럼 네트워크 요청이나, 사용자 이벤트 요청 등등 많으 작업을 해야하므로 비동기 처리는 필수이다.

*영상에 대한 설명은 나중에 그림과 함께 올릴 예정

🔷Web Worker API

커널에 api가 연결되어 있고, 이 api로 HW 조작을 간편하게 해주는데, Web Worker API도 같은 개념으로 생각하면 쉬움.

Web Worker API는 멀티 스레드를 간편하게 사용하도록 제공하는 API..

 

web API 중에서 Web Worker API를 사용해서 비동기를 지원한다.

• 대기실: Web APIs에서 비동기 처리 완료 시 Task (Callback) Queue내 Callback 적재
  • Callback: 비동기 처리가 완료되면 수행할 마지막 함수
• 문지기: Event Loop
  • Callback 함수를 stack에 올리기 전에 Event Loop가 Stack에 남은 작업이 있으면 Task Queue에서 대기하고 있는 Call back을 올리지 않고, 남은 작업이 없다면 올려준다.
• 작업장: Stack + Heap (V8 엔진 메모리 기본 구성)

 

Web Worker API 직접 사용

내 실력이 이 정도 수준까지도 아니고.. 깊게 알지 않아도 될거 같아서 이런게 있구나.. 하고 넘어가자?

프론트엔드 개발자가 직접 멀티스레드를 활용하여 개발하고 싶을 시..

Web API: Audio API, Canvas API 많은 것들 중에 Service Workder API 존재(스레드 활용)

 

🔷 "웹 서버"에서의 비동기 지원: 멀티스레드 + 비동기 I/O 라이브러리

웹 프론트에 중심인 수업이므로 웹 서버에 관한 비동기는 간단하게 하고 넘어가자..

Node API와 LIBUV: 서버 내 자바스크립트 동작 중 비동기(I/O Blocking)가 필요한 상황

Node APIs 에서 비동기 처리 적재

• 대기실: Event Queue <- 비동기 처리 적재
• 문지기: Event Loop
• 작업장: Worker Thread 내 처리 완료

웹 서버에서는 LIBUV가 멀티스레드를 제공한다. 따라서 비동기 처리를 위해 LIBUV가 필요하다.

 

비동기 처리과정을 간단하게 설명하자면 event loop 뒷단에 worker thread가 있음.

1. event loop는 worker thread에게 작업을 념긴다.
2. workder thread가 작업을 다 처리하면 event loop에게 돌려준다.
3. event loop가 완료된 작업을 event queue에 올려준다.

---

💡웹 브라우저에서의 event loop VS. 웹 서버에서의 event loop

EL: Event Loop

 

웹 브라우저에서 event loop: 큐에 대기하고 있는 callback 함수를 stack에 올려주는 역할

웹 서버에서 event loop: 스레드에 함수를 할당해주는 역할

---