런타임 개념
→ 크롬의 자바스크립트 런타임 표현한 그림
스택
자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조
힙
동적으로 생성된 자바스크립트 객체가 저장되는 공간
큐(콜백큐)
비동기적 작업이 완료되면 실행되는 함수들이 대기하는 공간
Web APIs
브라우저에서 제공하는 API 모음, 비동기적으로 실행되는 작업들을 전담하여 처리(AJAX 호출, 타이머 함수, DOM조작 등)
이벤트 루프란
이벤트 루프는 브라우저 내부의 Call Stack, Callback Queue, Web APIs의 요소들을 모니터링 하면서 비동기적으로 실행되는 작업들을 관리하고, 이를 순서대로 처리하여 프로그램의 실행흐름을 제어한다. 즉, 브라우저의 동작 타이밍을 제어하는 관리자이다.
이벤트 루프의 동작과정을 간단하게 살펴보면 자바스크립트의 setTimeout이나 fetch와 같은 비동기 자바스크립트 코드를 브라우저 Web APIs에게 맡기고, 백그라운드 작업이 끝난 결과를 콜백함수 형태로 큐에 넣고 처리 준비가 되면 호출 스택에 넣어 마무리 작업을 진행한다.
출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Event_loop
https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리 [Inpa Dev 👨💻:티스토리]
https://beomy.github.io/tech/javascript/javascript-runtime/
gif 출처: https://beomy.github.io/tech/javascript/javascript-runtime/
