이벤트 루프
August 13, 2021
자바스크립트 엔진
자바스크립트 코드를 해석하고 실행하는 인터프리터
⚙ Webkit, V8…
자바스크립트 엔진은 크게 힙 + 호출스택 (Call Stack) 으로 구분된다
힙 Heap은 메모리 할당이 일어나는 부분 (변수, 객체 등이 저장되는 일종의 창고)
-
호출 스택 Call Stack은 함수가 호출되는 순서대로 쌓이는 스택- 함수 실행 시 호출 스택에 해당 함수를 집어 넣음
- 함수 return 시(함수의 실행이 끝나면) 호출 스택의 맨 위에 있는 해당 함수를 끄집어냄
- 호출 스택이 빈다 = 실행할 함수가 남아있지 않다
-
🤔 사실 정확히 말하면 호출 스택에 쌓이는 건
함수가 아니라 함수의 실행 컨텍스트가 쌓이는 것!
함수의 실행 컨텍스트(Execution Context)
자바스크립트 엔진이 함수를 실행시키기 위해 가지고 있어야하는 여러가지 정보들 (변수나 함수의 선언, 스코프, this … 같은 정보들을 물리적인 객체 형태로 보관하고 있다)
- 스크립트가 시작하면 전역 문맥(Global Context)이 호출스택에 추가된다 스크립트가 끝날 때 전역 문맥이 호출스택에서 사라지면서 끝!
자바스크립트는 Single Thread 언어다
그래서 자바스크립트 엔진은…
= 동시에 하나의 일만 처리할 수 있다
= 호출 스택을 하나만 사용한다
👀 그럼 비동기 처리나 동시성에 대한 처리는 어디서 어떻게 하는 걸까?
브라우저의 구조
브라우저는 자바스크립트 엔진 말고도
Web API, 이벤트루프, 콜백, 큐 ... 등을 가지고 있다
💡 동시성을 지원하기 위해 자바스크립트 엔진을 구동하는 환경인 브라우저가 비동기 처리를 담당한다
setTimeout, DOM 매서드, HTTP 요청등은
모두 자바스크립트 엔진 밖에 있는Web API에서 제공하는 메서드
Web API매서드들은 모두 비동기 메서드들이기 때문에
작동을 마치고콜백함수를콜백 큐에 집어 넣음
콜백 큐 Callback Queue에 비동기 처리가 끝난 후 실행 되어야 할
콜백함수들이 차례로 할당되고, 실행을 대기하게 됨
이벤트 루프가 하는 일
호출 스택 Call Stack과콜백 큐 Callback Queue를 계속 주시하고 있다가
호출 스택이 비어있으면,콜백 큐에 먼저 들어온 순서대로콜백 큐에 있는콜백 함수들을호출 스택으로 집어 넣는다.
호출 스택에서콜백 함수가 실행되고 사라진다.
✨자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프라고 할 수 있다!
