이벤트 루프란?
콜백 이벤트 큐에서 하나씩 꺼내서 동작시키는 루프를 의미한다.
자바스크립트는 단일 쓰레드 기반 언어이기 때문에, 한 번에 하나의 작업만을 처리한다.
하지만 자바스크립트가 쓰이는 웹을 예로 들면, 수 많은 이벤트와 api요청이 동시에 처리되길 요구한다.
이러한 일을 가능케 하기 위해 비동기 방식으로 처리를 한다.
비동기 방식은 자바스크립트 엔진이 아닌! 브라우저나 node.js에서 지원된다고 한다.
글로 설명한 블로그가 많아서 시각화 자료를 통해 설명해준 블로그에서 자료를 가져오려 한다.
(바로 이곳)
먼저 우리가 함수를 실행하면, Call Stack에 추가가 된다. 스택(Stack) 이므로 FILO구조이다.
처음에 greet 함수를 호출하여 콜스택에 추가하고 반환하며 사라진다.
그 다음, respond 함수는 setTimeout 함수를 반환 하고, 콜스택에서 제거된다.
그러면 setTimeout의 콜백 함수인 ()=>{ return "Hey!" } 가 Web API에 추가된다.
Web API 안에서, setTimeout이 반환한 함수가 1000ms동안 실행된다.
이후, 콜스택이 아닌, Queue에 추가된다.
큐는 대기열 이므로 함수는 자기 차례를 기다려야 한다.
만약 콜 스택이 비어있다면, (이전에 호출 되었던 함수들이 값을 반환하고 빠져나갔다면) 큐의 첫번째 요소가 콜스택에 추가된다.
콜백 함수가 콜 스택에 추가되면, 값을 반환하고 스택을 빠져나간다.
글로 설명하는 것 보다 확실히 이런 그림으로 설명하니 이해가 훨씬 빠르다.
