[ JavaScript ] Loupe : 이벤트 루프 시각화 사이트

http://latentflip.com/loupe/

✅ 사이트 목적

👉 JavaScript의 이벤트 루프, 콜 스택, 태스크 큐 작동 방식을 시각적으로 보여줌

👉 사용자 대상 : JS 초중급 개발자, 비동기 처리 흐름을 이해하고 싶은 사람

 

🎯 이게 뭘 위한 사이트냐면…

• JavaScript 예시 코드

console.log("Hi!");

setTimeout(() => {
  console.log("Click the button!");
}, 2000);

console.log("Welcome to loupe.");

 

이걸 실행하면 콘솔에 뭐가 찍힐까요?

바로 이 흐름이 "Loupe"에서 눈에 보이게 애니메이션으로 나옵니다.

 

🔍 Loupe가 보여주는 것들

 

• Call Stack (콜 스택): 지금 실행 중인 함수들
• Web APIs: setTimeout, DOM 이벤트 등 브라우저가 처리하는 비동기 작업
• Callback Queue / Task Queue: 완료된 비동기 작업들이 대기하는 곳
• Event Loop: 콜 스택이 비어 있으면 큐에서 함수를 꺼내 실행