Event Loop
Call Stack, Callback Queue의 상태를 체크,
Call Statck이 빈 상태면 Callback Queue의 첫번째 콜백을 Call Stack으로 배치한다.
이러한 반복적인 행동을 틱(tick)이라 부른다.
이게 무슨소리야?
사진을 봐도 아직 감이 안온다. 다음.
JS Engine
- 자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다.
- 자바스크립트는 단일 스레드 (sigle thread) 프로그래밍 언어이다.
- Memory Heap 메모리 할당이 일어나는 곳
- Call Stack 코드가 실행될 때 쌓이는 곳. stack(자료구조 중 하나이며 후입선출(LIFO) 의 룰을 따른다.)의 형태로 쌓인다.
프로세스(Process) vs 스레드(Thread)
- 프로세스 란 컴퓨터에서 연속적으로 실행되고 있는 프로그램을 말한다. 메모리에 올라와 실행되고 있는 프로그램 인스턴스라고 보면 된다. 운영체제로부터 시스템 자원을 할당받는 작업의 단위이다.
- 스레드 란 프로세스 내에서 실행되는 여러 흐름의 단위라고 할 수 있다. 프로세스가 할당받은 자원을 이용하는 실행의 단위라고 보면 된다.
Web API
그림의 오른쪽에 있는 Wep API는 JS Engine의 밖에 그려져 있다.
Web API 는 브라우저에서 제공하는 API 로, DOM, Ajax, Timeout 등이 있다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고,
Web API는 콜백함수를 Callback Queue에 밀어 넣는다.
Callback Queue
비동기적으로 실행된 콜백함수가 보관 되는 영역이다.
예를 들어 setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자),
addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(2nd 인자) 등이 보관된다.
- Queue(큐) : 자료 구조 중 하나, 선입선출(FIFO, Frist In Frist OUT)의 룰을 따른다.
※비동기 작업시 Callback Queue 해당작업의 종류와 우선순위 참고
다시 Event Loop
- V8 엔진에서 코드가 실행되면, Call Stack에 쌓인다.
- Stack의 후입선출의 룰에 따라 제일 마지막에 들어온 함수가 먼저 실행되며, Stack에 쌓여진 함수가 모두 실행된다.
- 비동기함수가 실행된다면, Web API가 호출된다.
- Web API는 비동기함수의 콜백함수를 Callback Queue에 밀어넣는다.
- Event Loop는 Call Stack이 빈 상태가 되면
Callback Queue에 있는 첫번째 콜백을 Call Stack으로 이동시킨다.
말많은 개발자의 111강