01 / OVERVIEW
어떤 프로젝트인가요?
muncCode는 서버 통신 없이 브라우저 안에서 코드를 번들링하고 바로 실행하는 코드 플레이그라운드입니다. 온라인 에디터 서비스들이 서버에서 처리하는 번들링을, ESBuild의 WebAssembly 빌드로 브라우저 안에 옮겨온 실험이었습니다.
02 / IMPLEMENTATION
핵심 구현
- ESBuild(wasm)를 브라우저에서 초기화해 입력 코드를 즉시 번들링
- import 구문의 npm 패키지를 CDN에서 받아 해석하는 커스텀 플러그인 구성
- 내려받은 패키지를 Localforage(IndexedDB)에 캐싱해 재번들링 시 네트워크 요청 제거
- 번들 결과를 iframe 샌드박스에서 실행해 사용자 코드와 에디터 앱을 격리
03 / SCREENS
서비스 화면
04 / REFLECTION
배운 점
- 번들러가 하는 일(경로 해석 → 로드 → 변환 → 결합)을 플러그인 레벨에서 직접 다루며 이해했습니다.
- 실행 격리와 캐싱처럼 눈에 보이지 않는 처리가 도구의 사용 경험을 결정한다는 것을 배웠습니다.