토스 : 직접 브라우저용 번들링 플러그인을 만든 토스 팀

오늘은 토스 페이먼츠 팀이 제품을 사용하는 개발자를 위한 브라우저용 번들링 플러그인 개발을 진행한 사례를 공유드립니다!

1. 개발자를 위한 샌드박스 제품 출시 🎁

   토스페이먼츠 DX(Developer eXperience)팀은 샌드박스 제품을 출시했어요. 이는 브라우저에서 연동 흐름을 체험하고, 테스트 연동을 할 수 있는 개발자 도구로 GitHub 레퍼지토리를 클론하거나, VS code를 띄울 필요 없이 브라우저에서 코딩 -> 실행할 수 있는 코드 에디터죠. 토스가 주목한 가장 중요한 기능은 개발자가 코드 수정할 때마다 미리보기에 수정된 사항을 업데이트해주는 것이었어요.

   
   

2. 브라우저에서 번들링하기

   브라우저에서 번들링을 하기 위해 가상 환경을 도입했어요. Rollup(모듈 번들러)에서 제공하는 브라우저용 라이브러리를 알게 됐는데요. @rollup/browser는 Node.js 환경이 아닌 브라우저에서 동작하도록 관련된 의존성을 제거한, browser API로 만든 라이브러리예요.

   
   

2.1 @rollup/browser

이는 파일 시스템이 아닌 메모리상의 데이터를 다뤄요. 실제 파일에 접근하는 대신 JS 객체에 저장된 코드를 처리하죠. 그래서 rollup은 가상 파일을 읽고 처리하며 마치 실제 파일

시스템에서 작업하는 것처럼 번들링 해요.

3. 브라우저용 번들링 플러그인 만들기

   Rollup은 @rollup/plugin-node-resolve라는 플러그인을 사용해서 외부 라이브러리의 코드를 node_modules에서 찾아냅니다. 이후 네트워크를 통해 외부 라이브러리를 불러옵니다. CDN 주소를 생성한 이후 지정한 위치의 코드를 불러오기 위한 로직이 필요하게 됩니다. 그래서 외부 라이브러리를 불러오는 Rollup 플러그인을 직접 만들었다고 합니다. 라이프 사이클에서는 resolveId, load, transform 메서드를 사용해 로직을 작성했습니다.

   
   

   resolveId - 모듈 위치 식별 및 맵핑
   load - 식별한 위치에 있는 코드 가져오기
   transform - 불러온 코드 변환하기

토스는 확실히 사용자 경험에 탁월한 감각이 있는 팀이라고 생각됩니다. 브라우저에서 손 쉽게 번들링을 할 수 있다니.. 여러 측면에서 시간을 많이 세이브할 수 있을 거라 생각합니다. 원글과 코드는 아래 토스 기술 블로그 링크에서 확인해볼 수 있습니다.

https://toss.tech/article/engineering-note-6