브라우저용 번들링 플러그인, 직접 만들었어요
신지호 토스 · 토스 기술 블로그
AI 핵심 요약
브라우저에서 코드를 수정할 때마다 결과를 갱신하는 샌드박스를 만들려 했지만, 브라우저는 파일 시스템에 접근할 수 없고 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에서 가져오고, 반복 요청을 줄이도록 캐시할 수 있다.
- 코드 변경이 잦은 미리보기 환경에서는 트랜스파일러의 기능 범위뿐 아니라 빌드 속도도 중요한 선택 기준이다.
소개
프론트엔드 번들링 도구를 사용하는 것을 넘어 직접 플러그인을 만들어 본 과정을 소개해요.
이 자료가 담긴 로드맵
커뮤니티에서 더 보기비슷한 학습 자료
문서 이현재
AI가 만든 코드가 어드민이 되기까지
문서 김동희
전체 데이터를 브라우저에 두는 광고 대시보드 만들기
문서 강현구
Transpiler, “사용”말고 “활용”하기
문서 박서진
똑똑하게 브라우저 Polyfill 관리하기
문서 박지우