[JS] 이벤트 기반의 js, 이벤트 루프
이벤트 기반이란 이벤트가 발생할 때 미리 저장해둔 작업을 수행하는 방식을 의미.
이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 무엇을 할지 미리 등록해두어야 한다.
이를 이벤트 리스너에 콜백 함수를 등록한다고 표현한다.
노드도 이벤트 기반 방식으로 동작하며, 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백 함수를 호출하고, 발생한 이벤트가 없거나 발생했던 이벤트를 다 처리하면, 다음 이벤트가 발생할 때까지 대기한다.
특정 시간 이후에 코드를 실행하는 setTimeout을 사용하면 특이한 상황이 발생한다.
function run() {
console.log('3초 후 실행');
}
console.log('시작');
setTimeout(run, 3000);
console.log('끝');결과는 다음과 같다.
시작
끝
3초 후 실행
3초 뒤에 run함수를 실행하는 코드이다. 예상했던 결과는 3초가 밀려도 '3초 후 실행'이 나오고 끝이 뒤따라오는 것인데, 예상과 달랐다. 이를 파악하기 위해서는 이벤트 루프, 태스크 큐, 백그라운드를 알아야한다.
- 이벤트 루프 : 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정하는 역할을 담당한다.
- 백그라운드 : setTimeout 같은 타이머나 이벤트 리스너들이 대기하는 곳이다. 자바스크립트가 아닌 다른 언어로 작성된 프로그램이 봐도 무방. 여러 작업이 동시에 실행될 수 있다.
- 태스크 큐 : 이벤트 발생 후, 백그라운드에서는 태스크 큐로 타이머나 이벤트 리스너의 콜백 함수를 보낸다. 콜백들은 보통 완료된 순서대로 줄을 서 있지만 특정한 경우에는 순서가 바뀌기도 한다.
위의 코드 내용을 풀면 다음과 같이 진행된다.
1. 콜 스택에 전역 컨택스트인 anonymous가 처음으로 들어가고, setTimeout이 들어간다.
2. 콜 스택은 last in first out이기 때문에 setTimeout이 먼저 실행된다. setTimeout이 실행되면 타이머와 함께 run 콜백을 백그라운드로 보내고, setTimeout이 콜 스택에서 빠지며 그 후 anonymous가 콜 스택에서 빠진다.
3. 백그라운드에서는 3초 이후 run 함수를 태스크 큐로 보낸다.
4. 이벤트는 콜 스택이 비어 있으면 태스크 큐에서 함수를 하나씨 가져와 콜 스택에 넣고 실행한다. anonymous까지 실행이 완료되면 태스크 큐에서 run함수를 가져와 콜 스택에 올려 실행할 것이다.
이러한 이유 때문에 setTimeout은 시간을 보장하여 실행해 주는 것이 아닌, 최소딜레이에 가깝다. 콜 스택에 함수들이 너무 많이 들어 있으면 시간이 지나도 함수가 실행되지 않을 수 있기 때문이다.
출처 : https://www.inflearn.com/course/노드-교과서/lecture/56870?volume=1.00&speed=1.75&tab=curriculum