지난주부터 어떤 환경이든 컴포넌트 개발을 빨리하기위해 CFCs 개발을 진행하고 있다. Litjs를 활용해서..

여기서 중요한 점은 Litjs를 통해 만든 컴포넌트는 <script src="...경로..."></script> 형태든 es module 형태든 모두 가져다 사용할 수 있어야한다는 점이었다.

거기에 +해서 타입추론까지 되어야한다는 걸 목표로 잡았다.

vite-plugin-dts

사실 지금 공통 컴포넌트를 개발하기 전부터 타입추론이 되게해주는 라이브러리들은 도대체 어떤 방식으로 개발하는건지 궁금했다.

개인 프로젝트나 회사 프로젝트에서 타입 정의를 하면서 프로젝트를 진행하는거 조차 어려운데, 다른 사람들이 사용하라고 만드는 프레임워크나 라이브러리에선 도대체 어떻게 타입정의를 하길래 타입추론이 되는건지 궁금했다.

열심히 조사한 결과 좀 쉬운 해결방법을 알아냈다.

바로 vite-plugin-dts라는 플러그인이다.

vite를 빌드툴로 사용하고 위 플러그인을 사용하면 빌드 결과물에 대한 타입정의 파일도 빌드 결과물로 내보내준다.

직접 타입 정의 파일을 작성하며 개발하고 싶었지만.. 시간을 줄여주는 플러그인이 있기에.. 위 방법을 마다할 이유가 없었다.

Litjs의 createComponent, vue의 defineComponent

정말 개발하다보면 가끔 세상엔 정말 천재 개발자들이 많구나 라는 생각이든다.

아무리 웹 컴포넌트가 웹브라우저 표준 기술이라 어떠한 프레임워크 환경에서든지 사용할 수 있다고 하더라도, react 같은 프레임워크에는 어떠한 이유로 웹 컴포넌트를 바로 사용할 수 없었는데, 역시나 천재 개발자들은 이를 이미 해결해놨다.

Litjs의 createComponent가 그러하다.

또한 vue에선 자체적으로 내장되어있는 defineComponent 함수를 통해 웹 컴포넌트를 vue에서 아무 문제없게 사용할 수 있는 컴포넌트로 변환해준다.

위 두 함수를 통해 Litjs 프로젝트에서 웹 컴포넌트를 React용, Vue용으로 빌드하면 각 프레임워크에서 웹 컴포넌트를 문제없이 사용할 수 있다.

umd

umd 방식으로 빌드하면 일반 html 환경에서 웹 컴포넌트를 아주 쉽게 사용할 수 있다.

이는 jsp, woowahan 같은 환경에서 웹 컴포넌트를 쉽게 사용할 수 있게 해준다.

---

원하는 기능은 대충 다 알아냈고 테스트도 대충 완료되었다.

이제 마지막으로 웹 컴포넌트로도 Headless UI 방식으로 개발할 수 있느냐인데..

이것만되면 정말 대박일듯..?