📝 자바스크립트 동작원리

자바 스크립트 동작구조

• js를 실행하기 위해서는 js 엔진이 필요함
• V8, Rhino, SpiderMonkey 등 다양한 엔진이 존재함
• 가장 대표적인건, google에서 만든 V8(구글 사랑해요)

js 엔진은 2가지 구성요소로 구성됨

1. 메모리 힙(Memory Heap) -> 메모리 할당이 발생
2. Call Stack(호출 스택) -> 코드 실행에 따라 스택이 하나씩 쌓이는 곳

하지만 이외에도 수많은 API들을 사용하는데,
3. Web API라고 해서 웹 브라우저 혹은 node.js 같은 자바스크립트 런타임에서 지원해주는 API 그러니까 브라우저에 따라 지원해줄 수 도 있고 안해줄 수 도 있음

자바스크립트 자체에는 비동기 코드를 처리하기 위한 개념을 가지고 있지 않음
그러면 어떻게 비동기 처리 함? -> 이벤트루프와 콜백 큐의 환장의 콜라보로 가능함

이게 뭔데?

사실 비밀이지만 브라우저나 런타임에서는 Web API를 포함해서 Event Loop와 Callback Queue라는것도 지원해줌

런타임은 프로그래밍 언어가 구동되는 환경을 말하는거임 (다들 알겠지만)

암튼 정리했던 내용이니까…

왜 Call Back Queue가 비워져 있어야 하는 걸까?

V8 엔진 개발자분이 말씀하시길….

• 예를 들어 Call Stack에 정상적으로 처리되고 있는 함수들이 있다고 가정을 해봄
• 그런데 어떤 함수를 잘 처리하고 있던 와중에 갑자기 Event Loop에서 Callback Queue의 내용을 Call Stack으로 Push 해서 처리해야 한다고 함
• 그래서 어쩔 수 없이 잘 처리하고 있던 함수를 중단하고 Event Loop가 보낸 함수를 처리했음
• 그런데 또 갑자기 Event Loop에서 Callback Queue의 내용을 Call Stack으로 Push 해서 처리해야 한다고 함
• 과연 이 경우 실행의 결괏값을 어떻게 될까?
• 과연 내가 처리하려고 했던 함수는 내가 예상했던 시간에 끝나고 값을 제대로 도출할 수 있을까?

간단히 말하자면 이벤트 루프가 반드시 Call Stack이 비어져있는 상태에서만 Call Stack으로 Push 하는 이유는 자바스크립트라는 언어가 동기화 문제를 안는 것을 피하고 단일 스레드 언어라는 것을 보장해주기 위함

만약 단일 스레드 환경에서 위에서 예를 들었던 것 같은 상황이 발생한다면, 그것은 멀티 스레드에서 발생하는 문제 상황을 그대로 단일 스레드 언어가 안게 되어림

따라서 단일 스레드 언어에서 “해당 함수를 중단하지 말고 실행이 끝난 뒤에 Event Loop가 보내준 함수를 처리해야 해!”같은 동기화 문제를 해결할 수 있는 요소가 추가로 필요해짐

결국에는 Event Loop가 Call Stack이 비어있는지를 확인하게 함으로써 프로그래머는 동기화 문제에 대해 골머리를 앓을 필요가 없어지는 것임

정리(최종본?)

JS는 기본적으로 싱글 쓰레드에 동기 언어지만(동기사랑..ㅎ, 논-블로킹이라고도 불리움), 웹 브라우져 or 런타임의 도움을 받아서 비동기 작업을 처리 할 수 있고
마치 유사 멀티 쓰레드인것 마냥 동작하는 이상한 친구

깜박했는데 사실

Render Queue라는것도 존재함
이벤트 큐랑 비슷한데… 렌더큐가 더 높은 우선순위를 차지함(이 콜백이 먼저 콜스택에 올라감)

왜있음?

• 브라우저는 1초에 60프레임 속도로 화면을 다시 그림(repaint)
• 하지만 js가 하는 일들로 인해 다시 그리는 작업에 영향을 받음
• 렌더도 큐에 쌓여있는 하나의 콜백처럼 동작, 따라서 콜스택에 코드가 있음? 동작 못하제
• 그래서 느린 동기식 루프를 실행하면, 콜 스택에 코드가 쌓여 있어서 렌더가 동작하지 않음
• 이벤트 루프를 막지 말라고 하는것이 이런 현상을 뜻함
• 따라서 쓸데없는 느린코드 그만 쌓고 적당히 하장 ^^