브라우저용 번들링 플러그인, 직접 만들었어요

브라우저에서 코드를 수정할 때마다 결과를 갱신하는 샌드박스를 만들려 했지만, 브라우저는 파일 시스템에 접근할 수 없고 iframe 기반 가상 환경은 결제 SDK에 필요한 리다이렉트를 지원하지 않았어요. 이에 `@rollup/browser`를 사용해 메모리 객체의 코드를 번들링하고, Rollup의 `resolveId`, `load`, `transform` 훅으로 가상 파일 탐색과 CDN 모듈 로딩, JSX 변환을 구현했어요. 외부 라이브러리는 esm.sh에서 가져오고, JSX 트랜스파일에는 빠른 빌드가 중요한 점을 고려해 Sucrase를 선택했어요. 그 결과 브라우저에서 React 코드를 번들링해 미리보기에 실행할 수 있었으며, Vue·Svelte 지원과 가상 파일 시스템 구축은 후속 과제로 남겼어요.

• 브라우저에서 파일 시스템을 쓸 수 없다면, 메모리 객체를 가상 파일 시스템처럼 활용해 모듈을 관리할 수 있다.
• Rollup 플러그인의 `resolveId`, `load`, `transform` 훅으로 모듈 탐색, 코드 로딩, 변환을 나눠 구현한다.
• 외부 ESM 의존성은 esm.sh 같은 CDN에서 가져오고, 반복 요청을 줄이도록 캐시할 수 있다.
• 코드 변경이 잦은 미리보기 환경에서는 트랜스파일러의 기능 범위뿐 아니라 빌드 속도도 중요한 선택 기준이다.