2025.12.02 - [개발] - [vite] vite로 라이브러리 빌드하기
[vite] vite로 라이브러리 빌드하기
최근 제가 사이드 프로젝트로 진행하는 프로젝트에서 사용할 목적으로 UI 컴포넌트 라이브러리를 만들었습니다. UI 컴포넌트를 만들 때, 프로젝트를 vite의 react 템플릿을 사용하여 생성하였습니
bobostown.tistory.com
이전에 vite로 라이브러리를 빌드한 경험을 포스팅으로 남겼는데요,
라이브러리를 실제로 사용해 보니 다양한 버그에 부딪쳤습니다.
그중에서도 가장 심각했던 버그는 제네릭 컴포넌트에서 타입 추론이 제대로 동작하지 않는 것이었습니다.
문제상황
예를 들어, 다음과 같은 컴포넌트가 있습니다:
<Typography.Regular textType="span" className={textStyle}>
이용약관
</Typography.Regular>
이 컴포넌트는 'p', 'span', 'label' 등 다양한 HTML 텍스트 엘리먼트를 textType으로 받을 수 있는 제네릭 컴포넌트입니다.
전달된 textType에 따라 해당 HTML 엘리먼트에 특화된 속성들을 props로 전달할 수 있도록 설계했습니다.
예를 들어:
- textType="label"일 때는 htmlFor 속성 사용 가능
- textType="span"일 때는 span의 고유 속성들 사용 가능
하지만 빌드된 라이브러리에서는 이러한 타입 추론이 정상적으로 작동하지 않았습니다.
그래서 빌드된 코드를 보니 textType을 정의한 Text 타입이 빌드 결과물에 포함되지 않고 있었습니다.
원인
원인은 TextType을 d.ts 파일에 정의한 것이었습니다.
text.d.ts에 다음과 같이 텍스트 element들을 정리해 놨습니다.
export type Text =
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'p'
...
이 파일의 확장자를 .d.ts에서 .ts로 변경하니 정상적으로 빌드 결과물에 해당 타입이 포함되었습니다.