"바퀴의 재발명"
개발 공부를 시작한 뒤로 바퀴의 재발명이란 말을 많이 접하게 됩니다. 이미 있는 라이브러리나 프레임워크를 다시 만들지 말라는 개념으로 사용되는데요. 배우는 과정에서만큼은 답답하더라도 기존의 "바퀴를 재발명" 해야할 때가 있죠. 이는 기존의 있는 것들을 더 잘 이해하고 활용하기 위해서입니다.
블로깅의 과정도 비슷한 것 같습니다. 이벤트 루프에 관해 공부하면서 아주 많은 도움을 얻은 글과 영상이 각각 있는데요. 이렇게 잘 정리된 자료가 있는데도 블로깅을 하는 것은 결국 스스로 공부하고 내 것으로 만들기 위함입니다.
출처 https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
싱글 스레드 (Single Thread)
자바스크립트는 single thread 라는 말이 있습니다. 자료마다 다들 많이 들어봤을 거라고 말해서 처음에는 조금 당황스러웠는데요. 한 번에 하나씩 처리한다고 일단은 이해하고 넘어가려고 합니다.
그럼 무엇을 한 번에 처리하느냐. 당연히 코드이겠죠? 자바스크립트 엔진은 Memory Heap 하고 Call Stack 으로 이루어져있는데, Heap 에는 선언한 변수나 함수 등이 담기고, 코드가 실행되는 과정에서 콜스택을 이용해 이를 처리한다고 합니다.
함수 선언 1
함수 선언 2
함수 선언 3
함수 1(함수 2(함수 3));위와 같이 3개의 다른 함수가 선언되어 있고, 함수 1의 인자로 함수 2를, 함수 2의 인자로 함수 3을 전달했다고 가정해보겠습니다. 이때 함수 1을 시작으로 콜스택에 쌓이게 되고, 함수 3까지 쌓인 후 순차적으로 해결되면서 스택에서 사라지게 된다는 것입니다.
이렇게 처리할 수 있는 콜스택이 하나이기 때문에 자바스크립트를 싱글 스레드라고 말한다고 합니다.
비동기 함수는 어디에서?
어떤 것을 비동기로 실행한다는 것은 작업이 자바스크립트 엔진의 바깥에서 이루어진다는 것인데요. 카페를 다시 한 번 예시로 들어보겠습니다.
직원이 두 명이고 주문을 받는 직원과 음료를 만드는 직원으로 나뉜다고 해볼께요. 그러면 주문을 받는 직원은 주문을 받은 이후에 음료를 만드는 직원에게 주문이 이렇게 들어왔다고 정보를 전달해주겠죠. 직원이 1명이라면 혼자서 주문과 음료 만들기까지 다 해야하니 시간이 오래 걸리겠지만, 직원이 2명이라면 일을 구분해서 진행할 수 있습니다. 계속해서 그 다음 손님의 주문 처리를 도울 수 있게 되죠.
비동기 역시 마찬가지입니다. 외부에서 데이터를 받아와야 하거나 하는 경우에 그 작업은 외부에서 일단 진행하도록 넘겨주고, 진행이 마무리되면 그때 작업을 다시 넘겨받는 것이죠. 이것이 바로 Callback Queue 입니다. 비동기적으로 실행된 콜백 함수가 보관되는 영역을 말하죠.
Event Loop (이벤트 루프)
오늘 TIL 의 제목인 이벤트 루프입니다. 이벤트 루프는 콜 스택과 콜백 큐를 체크하고, 콜 스택이 비어있으면 순차적으로 콜백 큐에 남아있는 콜백 함수를 콜 스택으로 다시 넘겨줍니다. loop 라는 단어에서 알 수 있듯이 이벤트 루프는 이 과정을 계속해서 반복합니다.
일련의 과정 때문에 비동기적으로 실행된 것들은, 일단 콜 스택의 모든 것들이 실행된 이후에나 작동하게 됩니다. 하지만 다른 작업을 중단하고 기다려야 했었던 과정을 생략하기 때문에 결과적으로는 더 나은 퍼포먼스 경험을 제공할 수 있는 것이죠.
참고로 콜백 큐는 여러가지 큐를 포괄적으로 지칭하는 표현입니다. 콜백 큐는 다시 Task Queue, Microtask Queue, Animation Frames 으로 나뉘며 Microtask => Animation => Task 의 순서대로 이벤트 루프된다고 합니다.
그 외 참고할 만한 자료들
https://velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84
