[ 백엔드 공부하기 : Node.js ]
NodeJS에 활용되는 JavaScript의 기본 동작 원리와 V8엔진.
∇백엔드_NodeJS : JavaScript의 기본 동작 원리와 V8 엔진.
목 차
1. 자바스크립트 : 엔진이란.
2. V8엔진
3. JS엔진의 내부 실행 원리
4. JS는 개인사업자
5. 상호작용 시뮬레이션
∂ JS의 특성.
"JavaScript"의 태생 자체가 1주일도 안되는 시간에 웹 환경을 위해서 만들어진 언어입니다. [이래서 근본이 약하긴해요]
시대의 변화에 맞춰서 JS는 다양한 특성들을 장착해왔습니다.
명령형(imperative), 함수형(functional), 프로토타입기반(prototype-based), 객체지향 프로그래밍을 지원하는
'멀티 패러다임 프로그래밍 언어'이면서 '인터프리터 언어'입니다.
☆ 브라우저에서 HTML 바디 태그 내부 JS로 작성된 코드가 작동하기까지의 과정과 원리는 무엇인가??
[ = 브라우저가 V8엔진과 함께 JS를 실행시키는 원리 ]
Ⅰ. 자바스크립트 : 엔진이란??
◆ 웹 브라우저는 하나의 커다란 해석기입니다. 웹-브라우저 자체의 구성 요소는 아래와 같습니다.
▼ "JS엔진" 은 우리가 .HTML 이라는 'static file'에 <script>로 감싼 JS코드를 실행하는 영역을 의미합니다.
▼ '렌더링 엔진'은 HTML 문서를 한 줄씩 순서대로 파싱하다가,
" JS 파일을 로드하는 Script태그를 만나게 되면 DOM 생성을 일시 중단합니다.
->> script 태그의 src에 정의된 JS파일을 서버에 요청하여 응답받으면
JS코드를 파싱하기 위해 JS엔진에게 제어권을 넘깁니다.
Ⅱ. V8엔진.
▼ V8은 구글이 도입한 오픈소스 JS 엔진입니다.
√ C++ 언어로 작성되었으며, 구글 크롬 / 크로미움 웹 브라우저 / NodeJS를 지원합니다.
√ 브라우저 환경 등과 상호작용하고 프로그램을 실행하기 위한 바이트코드를 생성하는 역할을 담당합니다.
√ V8엔진과 다른 엔진의 가장 큰 차이점은 V8 엔진의 JIT(Just In Time) 컴파일러 입니다.
위 아키텍쳐 구조에서 'Parser' 부분을 자세히 보면
◎ 파서(Parser)
○ (1) 렉시컬 분석(Lexical Analysis) -> (2) 신택스 분석 (Syntax Analysis) -> (3) AST 의 흐름으로
'Abstract Syntax Tree' 를 만들어냅니다.
○ AST를 이용해서 상위 수준의 코드 표현을 하위 수준의 표현으로 변환합니다.
◎ Ignition
● 분석된 AST를 입력함으로써 바이트 코드를 생성합니다.
이에 따라 'bytecode'를 실행함으로써 진짜 소스코드가 실행됩니다.
◎ TurboFan
● 자주 사용되는 코드는 TurboFan으로 보내집니다.
TurboFan은 전달받은 코드를 'Optimized Machine Code'로 컴파일해서 사용합니다.
● V8 ≒ 8기통 엔진
- Ignition은 엔진 시동시에 사용되는 '점화기'같은 역할이며,
TurboFan은 가열되는 부분(자주 사용되는 부분)을 식히는 Fan을 의미합니다.
Ⅲ. JS엔진의 내부 실행 원리.
★ JS 엔진 내부만 보면 크게 [ Memory Heap & Cal stack ] 2개의 파트가 있습니다.
◎ Memory Heap
● 데이터를 임시 저장하는 곳으로, 함수나 변수, 변수를 실행할 대 사용하는 값들을 저장합니다.
≡ "heap 저장공간"
●해당 부분에서 더 이상 사용되지 않는 변수나 데이터 덩어리들을 비워주는 GC(Garbage Collection)가 있습니다.
◎ Call Stack
● 코드가 실행되면 순서를 기록해 놓고, 하나씩 순차적으로 꺼낸면서 실제로 실행 가능하도록 도와주는 공간입니다.
- stack 자료구조 형태이며, LIFO(Last In, First Out) 의 원칙을 따릅니다.
function add(a, b) {
return a + b;
}
function average(a, b) {
return add(a, b) / 2;
}
console.log(average(10, 20));
● call stack에 순차적으로,
console.log -> average -> add가 쌓이고, 다 쌓인 뒤에는 역순으로 add 결과 -> average 결과 -> console.log 결과
● 실제로 코드를 싱핼했을 때, 다음 순서로 실행되어야 할 코드들을 순서대로 기록하며
순차적으로 코드를 실행시킵니다.
● stack 이라는 자료구조에서 대표적으로 무한루프와 같이 저장공간이 가득차서 넘치는 현상을
"stack overflow"라고 합니다.
Ⅳ. JS는 개인사업자.
∇ JS는 태생적으로 "싱글 스레드(작업하는 파트가 혼자)" 이기 때문에
call stack상에 작업 중 하나가 오래 걸리는 순간,전체 작업시간도 같이 느려지게 됩니다.
★ 그래서 필요한 것이 "Event Loop" 와 "Callback Queue" , 그리고 "browser web APIs" 입니다.
◎ Event Loop
● "이벤트 발생 시 호출"되는 콜백 함수들을 관리하여서 Callback Queue에 전달하고 ,
Callback Queue에 담겨있는 콜백 함수들을 Call Stack에 넘겨줍니다.
● 이벤트 루프가 "Callback Queue" 에서 "Call Stack" 으로 콜백 함수를 넘겨주는 작업은
" Call Stack"에 쌓여있는 함수가 없을 때만 수행됩니다.
반복적으로 Call Stack이 비어있는지 확인하는 것을 " tick " 이라고 합니다.
◎ Callback Queue
●web api에서 비동기 작업들이 실행된 후 호출되는 콜백함수들이 기다리는 공간입니다.
● "Event Loop" 가 정해준 순서대로 대기열에 서있으며, "FIFO(First In First OUt) " 방식을 따릅니다.
-> Callback Queue는 실제로는 하나의 큐로 이루어진게 아니라
Microtask Queue, Animation Frames 과 같은 여러개의 큐로 이루어져 있습니다.
◎ (Browser) Web APIs
● " Web api" 는 브라우저에서 자체 지원하는 api입니다.
● Web api는
Dom 이벤트, Ajax(XmlHttpRequest) & setTimeout 등의 비동기 작업들을 수행 가능하도록 api를 지원합니다.
-> 브라우저가 제공하는 web api는 " MDN 전체 Web API " 에서 확인 가능합니다.
Ⅴ. 상호작용 시뮬레이션.
(1) 아래와 같은 코드를 실행한다고 가정해봅시다.
html에는 button이 있고, 해당 버튼에 event를 바인딩하는 코드와 console.log를 실행하는 코드
그리고 비동기 함수인 setTimeout을 실행합니다.
(2) 결과는 다음과 같습니다.
$.on 이벤트 바인딩 하는게 call stack에 들어오고 바로 web apis로 갑니다.
그리고 console.log와 setTimeout이 차례로 들어옵니다. 그리고선 실행,
setTimeout(function timeout() {
console.log("Click the button!");
}, 5000);
(3) 위 코드, setTimeout 으로 인해 5초마다 실행되는 console.log가 계속 callstack을 들락 날락합니다.
바인딩 된 버튼을 누르면
(4) 좀 혼란스럽지만, "버튼을 누를때마다 Callback Queue에 쌓이고서
쌓인게 다시 Event Loop에 의해서 call stack으로 가서 실행되는 것.
= > 2개의 다른 setTimeout이 어떻게 실행되고 있는지를 보면 됩니다.
(4)결과적으로 Event loop는 Call Stack이 비어있는지를 "주기적으로 확인" 하고
"Callback Queue"에서 "Callback function" 을 가져와서 Call Stack에서
JS 코드가 실행가능하도록 돕는 역할을 합니다.
'Back_End > Node.js' 카테고리의 다른 글
| [ 백엔드 공부하기 : Node.js ] NodeJS의 NPM이란? (0) | 2024.12.07 |
|---|---|
| [ 백엔드 공부하기 : Node.js ] NodeJS의 기본 동작 원리와 이벤트 루프, 브라우저 환경을 벗어난 JS 실행. (1) | 2024.12.06 |
| [ 백엔드 공부하기 : Node.js ] Node.js는 서버단에서 어떻게 JS를 실행할까. (0) | 2024.11.24 |
| [ 백엔드 공부하기 : Node.js ] Node의 역할. (0) | 2024.11.17 |
| [ 백엔드 공부하기 : Node.js ] Node.js의 기초 정리. (0) | 2024.11.17 |