[JavaScript] 코어 자바스크립트 - 3. 이벤트 루프

1. 이벤트 루프에 대해 설명해 주세요. (비동기 처리, 자바스크립트 동시성 처리)

자바스크립트는 싱글 스레드 언어이기 때문에 콜 스택이 하나이지만, 동시에 작업을 처리하기 위해 논 블로킹으로 작업을 수행

그렇기 때문에 비동기 처리가 가능

자바스크립트 엔진이 브라우저 위에서 동작할 때, Web API를 사용할 수 있는데 비동기 처리를 위해 Web API 및 콜백 큐, 이벤트 루프를 이용

이를 통해 자바스크립트는 작업을 동시에 수행할 수 있음 

 

2. 콜 스택에 대해서 설명해 주세요.

자바스크립트 엔진을 이루는 것 중 하나

함수가 호출됐을 때 스택으로 쌓이는 후입 선출의 자료구조 형태

자바스크립트 파일의 어느 부분이 현재 실행 중인지 알 수 있음

 

3. Web API에 대해서 설명해 주세요. (비동기 처리를 위해 브라우저에서 백그라운드 스레드로 돌아가서 처리되는 과정 설명, Web worker)

자바스크립트 엔진이 브라우저 위에서 동작할 때 Web API를 사용할 수 있음

이벤트 루프를 막을 위험이 있는 무거운 작업은 Web API 중 하나인 웹 워커를 사용해 별도의 백그라운드 스레드에서 병렬적으로 처리 가능 

 

4. 콜백 큐에 대해서 설명해 주세요.

Web API에서 처리한 콜백 함수가 큐의 형태로 쌓임, 선입 선출의 자료구조 형태 

우선 순위에 따라 1. 마이크로태스크 큐,  2. 애니메이션 프레임, 3. 매크로태스크 큐로 나뉨

중요도가 높은 앞의 것이 비워져야 다음 것이 콜 스택으로 들어갈 수 있음

 

5. 마이크로태스크와 매크로태스크가 이벤트 루프에서 어떻게 동작하는지 설명해 주세요. 

중요도에 따라 동작하기 때문에 마이크로태스크 큐가 다 비었을 경우에만 매크로태스크 큐의 콜백 함수가 콜 스택으로 이동 가능

1. 마이크로태스크 큐는 우선 순위가 가장 높음

코드를 사용해서만 만들 수 있는데, 주로 Promise를 사용해 만들며, Promise와 함께 쓰이는 .then/catch/finally, async 함수 등을 처리한 콜백 함수가 들어옴

2. 매크로태스크 큐는 우선 순위가 가장 낮으며, timing에 관한 함수 - setTimeout, setInterval 등을 처리한 콜백 함수가 들어옴 

 

6. setTimeout을 0초로 주었을때 어떻게 작동하나요?

(콜 스택부터 콜백 큐까지의 과정을 설명해주면 좋다. setTimeout이 매크로태스크니까 마이크로태스크와 함께 있을 때의 경우를 예시로 들 것)

 

1. setTimeout이 0초인 함수를 실행 -> 콜 스택에 쌓였다가 실행 컨텍스트 종료

2. Web API로 이동 -> setTimeout이 처리되고 -> 콜백 함수가 매크로태스크 큐로 이동

3. 3초 뒤에 실행되는 Promise 함수를 실행 -> 콜 스택에 쌓였다가 실행 컨텍스트 종료

4. Web API로 이동 -> Promise가 처리되고 -> 콜백 함수가 마이크로태스크 큐로 이동

5. 마이크로태스크 큐가 더 중요도가 높기 때문에 콜 스택이 비었을 때 Promise가 먼저 이벤트 루프를 통해 콜 스택으로 이동

6. 이후 setTimeout의 콜백 함수가 콜 스택으로 이동