자바스크립트를 사용하여 프로그래밍을 할 때 자바스크립트 이놈은 도대체 어떻게 작동하는것일까라는 생각이 들었다.
처음 프로그래밍을 공부할 때 아무 생각없이 에디터에 코드만 작성하며
"아 이러면 웹사이트를 만들 수 있구나" 라고 단순하게 생각하며 코딩을 했다.
그러던 중에 처음 setTimeout 함수를 사용하였을 때 굉장히 신기한 경험을 하였다.
이것은 그때 당시 내 상황을 간단하게 표현한 코드다.
console.log("a")
setTimeout(()=>{
console.log("b")
},1000)
console.log("c")
처음 자바스크립트를 공부할 때 내 머릿속에 주입된 내용은 자바스크립트 코드는 위에서 아래로 순차적으로 진행된다는 것이였다.
그때 당시 내 생각은 당연하게 a가 출력되고 1초 후에 b가 출력되고 그 후 c가 출력 될 거라고 생각하였다.
하지만 결과는 내 생각과는 달랐다.
결과는 c가 먼저 출력되고 b가 출력되었다.
"분명 자바스크립트는 위에서 아래로 순차적으로 작동한다 하였는데 이게 어떻게 된 일인가?" 라는 생각이 들었다.
그 후 나는 자바스크립트의 동작 원리에 대하여 알아보기 시작하였다.
유튜브와 개발 블로그들을 살펴보며 이벤트루프에 대하여 알게되었다.
그럼 지금부터 내가 알게된 이벤트루프에 대하여 간단하게 설명해보겠다.
우선 이 그림을 봐보자
간단하게 자바스크립트가 동작하는 구조를 표현한 그림이다.
우선 간단하게 각 요소들에 대하여 살펴보자
heap은 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 데이터들을 저장하는 메모리 영역이라고 간단하게 나타낼 수 있다.
stack은 호출된 함수들을 담고있는 영역이다라고 간단하게 나타낼 수 있다.
Web APIs는 브라우저에서 제공하는 별도의 API다.
우리가 자바스크립트에서 사용하는 setTimeout이나 fetch등 몇몇 기능들은 자바스크립트가 아닌 브라우저에서 제공하는 API들이다.
callback queue는 비동기 처리가 완료된 함수들이 대기하고 있는 영역이다.
자 그리고 저 그림에서 바로
이 녀석이 이벤트루프란 녀석이다.
이벤트루프의 역할은 스택과 콜백큐를 감시하고 있다가 스택이 비어져있으면 콜백큐에 있는 함수들을 스택으로 옮기는 역할을 한다고 보면 된다.
자 그럼 정말 쉬운 예제를 작성하여 간단하게 이벤트루프의 동작 방식을 알아보자.
console.log("a")
console.log("b")
setTimeout(function(){
console.log("c")
},1000)
console.log("d")
setTimeout(function(){
console.log("e")
},0)
console.log("f")다음과 같은 코드가 있다.
이 코드를 실행하면
이런 결과가 출력된다.
왜 이런 결과가 나오는지 그림을 통하여 알아보자.
힙영역은 배제하고 설명하겠다.
우선 해당 코드들이 실행되면 스택에 함수들이 쌓이기 시작한다. 그림을 보면 먼저 호출한 함수가 가장 위에 쌓이는걸 볼 수 있다. 이런 구조를 LIFO(last in, first out)라고 한다. 그리고 Web API의 비동기 함수인 setTimeout은 Web API를 실행시켜주는 다른 영역으로 이동한다.
이때부터 이미 setTimeout의 타이머는 시간이 흐르고있다.
그럼 이제 어떤 순서대로 코드들이 실행되는지 알아보자.
1.스택에 있는 함수들이 차례대로 호출된다.
2.비동기 처리가 끝난 함수들이 콜백큐로 이동한다.
3.이벤트루프가 스택이 비어있는것을 확인하고 콜백큐에 대기중인 함수가 있다면 차례대로 스택에 올려보낸다.
4.스택에 올려보내진 함수들이 차례대로 실행된다.
이 과정을 그림으로 봐보자.
여기까지가 2번까지의 과정을 나타낸 것이다.
setTimeout의 두번째 인수로 0을 준 코드가 먼저 비동기 처리가 끝나여 먼저 콜백큐로 이동하고 그 후 1000을 준 코드가 비동기 처리가 끝난 후 콜백큐로 이동한다.
이제 스택이 비어있으니 이벤트루프가 스택이 비어있고 콜백큐에 대기중인 함수들을 감지하고 콜백큐에 대기하고 있는 함수들을 스택으로 하나씩 올려보낸다.
스택으로 올려보내진 함수가 실행되고 스택이 비어있다면 콜백큐에 대기하고 있는 함수를 올려보낸다.
이렇게 콜백큐에 있는 마지막 함수까지 스택으로 올려보내면 이벤트루프의 역할이 끝난다.
이번엔 정말 간단한 예제를 가지고 이벤트루프에 대하여 설명하였다.
다음 작성 글에서는 좀 더 각각 요소들의 대하여 자세히 알아보고
더욱 어려운 예제로 자바스크립트의 동작원리에 대하여 알아보자.
이벤트루프에 대하여 정말 알기쉽게 설명한 유명한 유튜브 영상이 있으니
참고하길 바란다.
이벤트루프 유튜브 바로가기
