JavaScript Engine Simulator
2025.03 ~ 진행 중
JavaScript 실행 과정을 시각화하는 인터랙티브 교육 도구. Tokenizer → Parser → Interpreter 파이프라인을 직접 구현하고, 엔진·클로저·this 바인딩·이벤트 전파 4가지 시뮬레이터로 런타임 동작을 단계별로 시각화.
엔진 시뮬레이터 — Sync & Async 실행 시각화
순수 TypeScript로 구현한 Tokenizer → Parser → Generator 기반 Interpreter 파이프라인으로 JavaScript 코드의 토큰, AST, Call Stack, Scope Chain을 단계별로 시각화합니다. Async 모드에서는 Web APIs, Task Queue, Microtask Queue, Event Loop까지 완전한 비동기 런타임을 시뮬레이션합니다.
클로저 시뮬레이터 — 힙 메모리 & GC 시각화
클로저가 캡처하는 환경 객체의 생성(Active) → 유지(Retained) → 해제(Collected) 생명주기를 힙 메모리 관점에서 시각화합니다. Scope Chain과 Closure Reference를 추적하여 GC가 어떤 환경을 수거하는지 직관적으로 보여줍니다.
this 바인딩 시뮬레이터 — 5가지 바인딩 규칙 시각화
new · implicit · default · arrow · lost 5가지 this 바인딩 규칙을 실시간으로 감지하고 소스코드에 색상 코딩으로 표시합니다. 각 함수 호출 시점에서 this가 어떤 규칙으로 결정되는지 단계별로 확인할 수 있습니다.
이벤트 시뮬레이터 — DOM 이벤트 전파 시각화
인터랙티브 DOM 트리 빌더로 노드를 구성하고, 이벤트가 Capturing → Target → Bubbling 단계를 거쳐 전파되는 과정을 애니메이션으로 시각화합니다. 이벤트 리스너 등록과 트리거를 동적으로 관리할 수 있습니다.