TIL
TIL List
-
Event Loop
-
이벤트 루프는 어떻게 생겼을까?
-
이벤트 루프에 대한 나의 비유
1) Event Loop
이벤트 루프에 대해 알아보기 위해 여러 블로그와 기술서적을 참고해보았지만 "이벤트 루프는 무엇이다" 라고 명확하게 정의한 글을 거의 보지 못했다.
이벤트 루프에 대한 정의는 사람마다 제각각인데 그들의 공통적인 설명은 다음과 같았다.
자바스크립트는 싱글 스레드 기반 언어이다. 이는 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 불리게 됐다.
일단 이벤트 루프에 대한 감을 잡기 위해 일단 다음의 코드를 살펴보자.
console.log("1")
setTimeout(function cb () {
console.log("2")
}, 3000)
console.log("3")위 코드의 실행 순서는 어떻게 될까? 자바스크립트는 싱글 스레드 언어이니 1 번을 출력하고 setTimeout 함수를 기다렸다가 2를 출력하고 마지막으로 3을 출력하는 것일까?
정답은 다음과 같다.
console.log("1")
setTimeout(function cb () {
console.log("2")
}, 3000)
console.log("3")
// 1
// 3
// 2굉장히 이해가 안되는 현상이다. 아까 위에서 설명한 것과 다른 결과가 나오니 말이다.
여기서 이벤트 루프의 역할에 대해서 나오게 된다.
2) 이벤트 루프는 어떻게 생겼을까?
이벤트 루프는 위의 사진과 같은 구조를 가지고 있다.
다음은 각 단어들에 대해 나의 주관적으로 나름 쉽게 한 설명이다.
Heap : 변수, 함수 등의 메모리들이 모이는 곳
Call Stack : 실행된 코드들을 저장하는 곳이다. 선입후출 (FILO) 의 구조이며 함수 호출 시 콜 스택에 push 된다.
Web APIs : DOM, Ajax, setTimeout 등 브라우저에서 제공하는 API
Callback Queue : 이벤트 발생 시 실행되야 할 callback 함수가 잠시 머무르는 곳
자, 이제 대략적인 구조와 의미에 대해 어느정도 알게 됐으니 다시 코드를 봐보자.
console.log("1")
setTimeout(function cb () {
console.log("2")
}, 3000)
console.log("3")
// 1
// 3
// 2해당 코드가 실행 될 경우 이벤트 루프는 다음의 실행 과정을 거친다.
-
콜 스택에
console.log("1")이 들어간다. -
해당 코드를 실행한다.
-
console.log("1")이 콜 스택에서 제거된다. -
콜 스택에
setTimeout함수가 들어간다. -
setTimeout함수가 실행되면서 브라우저가 제공하는 Web API 를 호출한다. -
setTimeout함수가 콜 스택에서 제거된다. -
콜 스택에
console.log("3")이 들어간다. -
해당 코드를 실행한다.
-
console.log("3")이 콜 스택에서 제거된다. -
setTimeout함수의 3초의 시간이 지난 뒤 콜백 함수인cb()는 콜백 큐에 들어간다. -
이벤트 루프는 콜 스택이 비어있는걸 확인하고 콜백 큐를 확인한다.
-
cb()함수를 발견하고 이를 콜 스택에 추가한다. -
해당 코드를 실행한다.
-
cb()함수가 콜 스택에서 제거된다.
사실 과정을 글로 길게 나열해서 그렇지 굉장히 단순한 패턴을 띄고 있다.
이벤트 루프의 패턴은 다음과 같다.
이벤트 루프는 콜 스택에 쌓인 코드들부터 처리한다. 만약 중간에 비동기 함수가 실행된다면 해당 함수의 콜백 함수를 콜백 큐에 밀어넣고 다음 콜 스택을 처리한다. 콜 스택들이 다 처리되면 그제서야 콜백 큐를 쳐다보고 하나씩 처리한다.
3) 이벤트 루프에 대한 나의 비유
나는 이벤트 루프를 굉장히 바쁜 회사원에 비유하고 싶다.
예를 들어 A 라는 회사원이 해야 할 일이 1 부터 10 까지 있다고 가정하자.
A 는 1 부터 순차적으로 10 까지 일을 해야하고, 이를 단 1분안에 해결해야 한다고 가정하자.
A 의 책상 (Call Stack) 에 1...2...3... 순서로 계속 문서가 쌓이고 일을 해결하고 있다.
그러던 중 4번 문서는 대략 3초동안 고민해야 할 문제라고 가정해보자.
이 경우 일단 4번은 옆에다 놔두고 다음 문서를 처리한다.
5..6..7..8... 젠장, 9번 문서는 대략 5초 정도의 고민을 소요한다.
일단 9번도 옆에다 놔두고 10번까지 진행한다.
그 다음 4번 문서, 9번 문서 순서대로 일을 진행한다.
일 끝났다!!
