친구랑 스터디로 각자 Toast 컴포넌트를 만들어보고 어떤 로직으로 어떻게 구현했는지 비교하는 시간을 갖기로 했다. 그리고 이왕 하는 김에 npm에 배포하는 것까지 목표로 하기로 했다.
번들러 선택
컴포넌트 제작을 하고 가장 고민이 됐던 부분이 바로 번들러이다.
최근에 새로운 프로젝트 세팅을 bun으로 하고 있는데, 속도도 정말 빠르고 할 수 있는 것도 많아서 이것저것 해보고 있다. 패키지 매니저 및 번들링 기능 모두 지원하기에 이번 Toast 컴포넌트 배포를 bun으로 해보기로 했다.
쉽지 않았던 bun들링
bun의 현재 버전은 1.1.33으로 Vite(5.4.10)나 rollup(4.24.2), tsup(8.3.5) 등 다른 번들러들에 비하면 많이 낮은 편이다. 또한 자료도 생각보다 넉넉하지 않아서 찾아가면서 하는데 정말 애먹었다.
Toast 컴포넌트를 만들 때 css 파일에 최대한 코드를 많이 작성했다. bun은 기존에 css의 번들링 지원이 안되다가 1.1.30에 들어서면서 실험적 기능으로 도입이 되었다. 그렇게 css 번들링이 되는 것을 확인하고 npm에 배포를 했다.
해치웠나..?
설레는 마음으로 install 하고 실행을 시켜보니 스타일링이 쏙 빠진 toast가 보이는 것이었다.
옹졸하게 보이는 Hello가 내가 만든 toast이다...
알고 보니 css가 적용이 되지 않아 저렇게 보이는 것이었다. 스타일링을 적용하기 위해서는 번들링된 css 파일도 import 해야했다.
import { Toast } from "@gs0428/toast";
import "@gs0428/toast/dist/index.css"; // 추가해야 스타일 적용
toast에 스타일이 정상적으로 적용이 되는 것을 확인할 수 있다.(확대해서 겁나 크게 보이네요 ㅎㅎ...)
사용자가 라이브러리를 다운로드하고 사용할 때 스타일을 적용하기 위해 css 파일을 import 해야 한다는 점이 번거롭다는 느낌이 들었기 때문에 맘에 썩 들지 않았다.
돌고 돌아 Vite로
그렇게 몇 시간을 해결 방법을 찾다가 실패하고, 생각하다가 지쳐서 결국 Vite로 돌아오게 되었다.
Vite로 하게 된 결정적 이유는 바로 vite-plugin-css-injected-by-js라는 플러그인을 발견했기 때문이다.
이 플러그인은 css 파일 자체를 js 파일의 첫 번째 줄에 IIFE 형식으로 바로 주입을 한다.
(function () {
"use strict";
try {
if (typeof document < "u") {
var t = document.createElement("style");
t.appendChild(
document.createTextNode(
// css 파일 내용
// ex)
// span{background-color: blue;}
)
),
document.head.appendChild(t);
}
} catch (o) {
console.error("vite-plugin-css-injected-by-js", o);
}
})();따라서 이전처럼 css를 import 할 필요 없이 바로 스타일이 적용되는 모습을 확인할 수 있었다.
트러블슈팅
TypeError: Cannot read properties of null (reading 'useRef')
배포 초반에 만났던 에러다.
bun, Vite 모두 external라는 옵션을 이용하여 react와 react-dom을 번들링 과정에서 제외해 주니 정상적으로 동작했다.
마무리하며
번들링에 대해 공부하게 되는 계기가 되어 좋았다. 그리고 처음으로 컴포넌트를 배포해 보아서 감회가 새롭다.
지금 올려둔 코드를 어떻게 작성해야 더 좋을지, 기능은 어떤 것을 더 붙일지 생각을 해봐야겠다.
라이브러리 이름을 제대로 못 정해서 레포지토리랑 npm이랑 다르다 ㅎㅎ... 좋은 이름 생각나시는 분 언제나 환영입니다!!ㅎㅎ
레포지토리: https://github.com/gs0428/simple-toast
npm: https://www.npmjs.com/package/@gs0428/simple-toast
