콜 스택, 이벤트 루프 이론은 가득한데 이게 어떻게 돌아가는지 몰라
혹시 자바스크립트나 nodejs 이론을 공부할 때, 딱딱한 이미지나 글로만 보고 넘어 가시는 경우 많지 않나요?
그냥 면접용 CS 지식으로만 사용하고 그냥 버려두기에는 중요한 이론이고, 동작 방식인데, 이를 시각적으로 확인할 수 있다면 얼마나 좋을까요?
그래서 오늘 소개하는 도구는 이러한 고민들을 많이 해소해 줄 수 있을 거라 자신합니다.
바로 본론으로
바로 JavaScript Visualizer 9000 (←클릭시 해당 사이트로 이동) 라는 사이트인데, 여기에 바로 들어가시면 여러분이 작성한 코드가 어떠한 과정을 거쳐서 실행되는지 시각적으로 확인할 수 있습니다.
아래 시연 영상을 보면, 함수가 호출되는 순서에 따라 호출 스택(call stack)에 어떻게 쌓이는지 비동기적 처리는 어떠한 큐에 담기는지 등을 확인할 수 있습니다.
보통 우리가 사용하는 타이머 함수의 경우에는 Task Queue 에서 대기하고 있다가 사용할 준비가 되면 이벤트 루프에 의해서 호출 스택에 쌓이게 됩니다. 반면, Promise 를 통한 비동기처리의 경우에는 Microtask Queue 에 대기하고 있다가 호출 스택에 쌓이는 것을 확인할 수 있습니다.
(참고로 위에서는 안 나왔는데, requestAnimationFrame 이라고 하는 애니메이션 최적화를 위한 메서드의 경우에는 위 큐가 아닌 별도의 큐에 담겨서 사용 때 까지 대기하게 됩니다. 이와 관련해서는 한 번 찾아보셔서 추가적인 공부를 해보시는 것을 추천합니다.
마무리
어떤 것 같나요? 좀 더 시각적인 공부를 해보고 싶어서 다양한 도구를 찾아보다가 발견한 사이트인데, 정말 편리하지 않나요? 꼭 지나가다 한 번 쯤 써보시면 좋을 것 같아서 공유해 봤습니다.