KT AIVLE School 빅프로젝트 - event loop, call stack, callback queue 학습

자바스크립트는?

자바스크립트는 논블로킹, 싱글 스레드 언어이다. = 호출 스택을 하나만 사용한다 = 동시에 하나의 일만 처리할 수 있다.

 

비동기 코드는 Back Stage로 보낸다.

Back Stage = Web APIs, Callback Queue(Task Queue), Event Loop

 

비동기 처리 방법

Callback Function, Promise, async await, then catch

 

 

자바스크립트 엔진

자바스크립트 코드를 해석하고 실행하는 인터프리터 = 메모리 힙과 호출 스택이 존재

메모리 힙 = 변수, 객체 등이 저장되는 곳

호출 스택 = 함수가 호출되서 함수의 실행 문맥을 순서대로 쌓고 실행하는 스택으로 작동하는 것

 

자바스크립트가 구동되는 환경인 브라우저는 여러 개의 스레드가 사용된다. = Web APIs가 멀티 스레드로 작동

Web API 예시 = Ajax, DOM Events, Timer

 

 

Event Loop의 역할

Callback Function은 Callback Queue로 이동하고 호출 스택이 빌 때까지 대기한다. 호출 스택이 비어있으면 Event Loop가 callback 함수를 Call Stack으로 옮겨서 함수를 실행한다.

 

 

Callback Queue 종류

- MacroTaskQueue = setTimeout, setInterval, Event Dispatch, networking response (이벤트 루프 한번에 한 개 task만 처리)

- MicroTaskQueue = Promise, MutationObserver (이벤트 루프 한 번에 모든 task 처리, 무한루프 주의, 우선순위가 제일 높음)

- AnimationFrameQueue = requestAnimationFrame으로 등록한 callback 함수가 들어간다. repaint 전에 task 전부 처리, frame drop 최소화

 

 

느낀점

MacroTaskQueue에 작업을 계속 넣으면 카운팅이 정확하지 않지만 화면 갱신을 보장한다는 점이 이해가 됐습니다. 빅프로젝트를 하면서 setInterval, setTimeout이 정확히 설정한 시간에 작동하지 않는 것의 이유를 알게 되었습니다. 또한 queue의 종류가 3가지이며 3가지가 어떤 순서로 Call Stack에 들어가는지 알게되었습니다. Dancify-v2를 진행할 때는 고려해서 UX를 개선하는 일을 해볼 예정입니다.

 

---

출처

https://youtu.be/wcxWlyps4Vg

https://icy-receipt-591.notion.site/2f8d99ccdae54291aee9f41a24fd7726?pvs=4