이라 쓰고 JS 동작원리라 한다.
: 자바스크립트는 싱글스레드이다.
어떻게 자바스크립트는 싱글스레드이면서 비동기인 것일까?
자바스크립트가 어떻게 동작하는지 내부 원리에 대해 알아보자.
🍳자바스크립트 엔진 - JS 코드를 실행 시켜 줘
역할
자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터라고 정의되어 있다. 자바스크립트 엔진은 표준적인 인터프리터로 구현할 수도 있고 또는 정적 컴파일러로 구현할 수도 있다.
또한 두 방식을 합친 JIT 컴파일(just-in-time compilation)로도 구현할 수도 있다.
(즉, 여러 종류의 엔진마다 차이가 있다.)
(1) 인터프리터란: 소스 코드를 바로 실행하는 컴퓨터 프로그램으로,
프로그래밍 언어를 읽어가면서 해당 기능에 대응하는 기계어 코드를 실행하는 방식
(2) 컴파일러란: 소스 코드를 읽기 전에 기계어로 먼저 번역한다.
(3) JIT컴파일러란: 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이다. (같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지한다.)
종류
웹 브라우저마다 각각의 다른 엔진을 사용하고 있다.
V8 : 구글의 크롬에서 사용되는 엔진이다. C++로 만들어졌으며 오픈소스이다.
JavaScriptCore : 사파리용으로 애플이 개발했으며 이 역시 오픈소스이다.
SpiderMonkey : 최초의 자바스크립트 엔진으로 모질라 파이어폭스를 지원한다.
V8은 유일하게 바이트코드와 같은 중간 코드를 생산하지 않는다는 차이가 있다.
V8은 나중에 정리해보자...
다 어렵다면.. 이거🤔
자바스크립트 코드를 실행 시켜 줘 (JS Engine)
자바스크립트 엔진은 Javascript 코드를 이해하고 실행을 도와주는 녀석
대표적인 JS engine으로 V8엔진(Chrome, Node.js에서 사용)이 있으며, 이외에도 각 브라우저 별로 여러가지 엔진들이 존재한다.
자바스크립트 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있다.
Memory Heap
데이터를 임시 저장하는 곳으로, 함수나 변수, 함수를 실행할 때 사용하는 값들을 저장
다른말로 메모리할당이 일어나는 곳!
Call Stack
코드가 실행되면 코드의 내부의 실행 순서를 기록해 놓고, 하나씩 순차적으로 진행할 수 있도록 도와주는 곳
똑같은 말로 코드 실행에 따라 호출 스택이 쌓이는 곳!
🍳호출 스택 (Call Stack)
자바스크립트는 기본적으로 싱글 쓰레드 기반 언어이다.
호출 스택이 하나라는 소리 따라서 한 번에 한 작업만 처리할 수 있다.
- 쓰레드란: 운영체제에서 실행중인 하나의 프로그램을 프로세스라 하며 이 프로세스의 작은 단위
- 쓰레드는 단 한개의 일만 처리할 수 있으며 쓰레드가 여러개 모여 프로세스라고 한다.
- 두개 이상의 프로세스는 멀티 프로세스, 그렇게 여러 일을 동시에 하는 것을 멀티 테스킹이라 한다.
- 호출스택이란: 현재 실행중인 서브루틴(함수)에 대한 정보들을 담아두는 스택구조의 메모리영역
function first() {
second();
console.log("첫번째");
}
function second() {
third();
console.log("두번째");
}
function third() {
console.log("세번째");
}
first();이 코드를 실행시킨다면 콜스택은 어떻게 될까?
먼저 first 함수가 호출되고, 그안의 second 함수가 호출되고, 마지막에 third 함수가 호출된다.
main() 함수는 처음 실행시 전역 컨텍스트(함수가 호출 되었을때 생성되는 환경)이다.
함수의 실행이 완료되면 호출 스택에서 지워진다. third, second, first, main 순으로 pop되고 main 함수까지 실행완료되면 호출 스택이 비워진다. 따라서 위 코드는 "세번째", "두번째", "첫번째" 순으로 콘솔에 찍힌다.
그런데 만약에 Call Stack에 들어간 코드 중 일부가 시간이 오래 걸린다면 어떻게 될까?
노랑색으로 칠해진 코드가 어떠한 이유로 시간이 오래걸리게 된다면 당연히 다음에 호출되어야 코드는 실행에 시간이 걸릴 수 밖에 없다.
이와 같은 상황은 특정 코드가 오래 걸려 다른 코드를 실행하지 못하게 되어 block이 된 상태가 된다.
이 때 효과적으로 event를 관리하기 위해 필요한 것이 바로web API와 Callback Queue, event loop이다.
🍳web API, Callback Queue, event loop - 능률적으로 일하기
✅Web APIs - 오래 걸리는 일 따로 처리하기
: 이것은 자바스크립트 엔진이 아니라 브라우저에서 제공하는 API,
자바스크립트 엔진에서 정의되지 않았던 setTimeout이나 HTTP 요청(ajax) 메소드, DOM 이벤트 등의 메소드를 지원한다.
콜스택에서 불러온 함수 중 비동기적인 함수이면 Web API 가 이것의 Run함수를 호출한다.
비동기적 처리라 했으니 DOM, Ajax, SetTimeout 등이 이것에 해당하며 Web API에서 처리를 끝마친 함수를Callback Queue 으로 이동 시킨다.
✅Callback Queue(Event Queue, Task Queue) - 머리 속에 다음에 할 일 생각해 놓기
: Web API 에서 보내진 비동기 처리가 모이는 곳으로 콜 스택과는 다르게 선입선출 되는 특징을 가진다.
여기 모인 비동기함수는 이제부터 이벤트 루프의 감시하에 놓이게 된다.
이벤트 발생 후 호출되어야 할 콜백 함수들이 기다리는 공간.
이벤트 루프가 정한 순서대로 줄을 서 있으므로 콜백 큐라고함
✅Event Loop - 할 일을 정돈하기(감시자)
: Call Stack과 Queue를 감시하는 일을 한다.
감시하다가 Call Stack이 비게 되면 Queue에 쌓인 비동기 함수를 Call Stack으로 보내주는 역할을 한다.
Call Stack이 비어있을 때 Callback Queue 에 쌓여있는 비동기 함수 중 가장 먼저 들어온 함수를 보내준다.
이벤트 루프를 통해 비로소 동기 함수와 비동기 함수의 순서가 정해진다.
