웹 컴포넌트 API를 활용해 크로스 프레임워크 만들고있다. 

이때 목표는 vue2, vue3, react 18버전 모두 지원 가능해야된다는 것이다. 

그리고 vue2, vue3에서 사용할 땐 v-model을 사용할 수 있어야돼고, react18에서 사용할 땐, state 값과 해당 state를 수정하는 함수를 넘겨 사용할 수 있어야된다는 것이다. 

일단 vue2와 vue3을 생각해보면, 각 버전마다 v-model을 구현하는 방식이 다르다. 

vue2는 value prop을 내려주고 input 이벤트를 emit 해줘야된다. 

vue3는 modelValue prop을 내려주고 update:modelValue 이벤트를 emit해야된다. 

최근 vue3 버전에선 multi v-model도 지원한다고 어디서 봤는데, 그 기능을 구현하기위한 방식이 다른지 그대로인지 아직 확인 안해봤다. 여튼 여러 부분을 신경써야된다. 

react는 어떨까. 

react는 vue나 svelte와는 이벤트 다루는 방식이 다르다. 

react는 루트 요소에서 이벤트를 위임하는 방식으로 이벤트를 제어한다. 때문에 웹 컴포넌트를 바로 가져다 사용할 수 없다. 

react에서도 동작하게 하기위해서 한번 래핑을 해줘야된다. 

위와 같은 것들을 고려하면서 Headless Ui 형식까지 고려하려면 너무 신경쓸게 많아진다. 

이러한 것들 때문에 stenciljs나 litjs가 뭔가 제약 사항?(다른 말로하면 추상화)을 좀 만들어 놓은 것 같아보였다. 

web component API를 직접 사용해서 만드는 것보다 뭔가 더 까다롭다는 느낌을 받았기 때문이다. 

아마 각 프레임워크(stencil, lit)로 만든걸 리액트나 뷰 같은 곳에서 잘 쓰게하기위해서 그렇게 해놓은게 아닐까 생각한다. (얕게 사용해본거라 아직 잘 모름)

여튼 그래서 일단 차선책으로 각 프레임워크용 컴포넌트를 각각 제작하기로 결정했다. 이를 위해 모노레포 기반 마이크로 프론트앤드로 구현해 vue2, vue3, react18 앱을 하나의 앱으로 합쳐 디자인 시스템을 만들어볼까 한다. 시간이 될지는 모르겠지만..

https://hyungju-lee.github.io/front-design-system/

일단 vue2(webpack5) vue3(vite5) react18(vite5) 세가지 앱을 app shell(vite5) 앱 안에 마운트 시켰다. 

나중에 nuxt 또는 next 같은 ssr 프레임워크로 app shell을 만들면 모노레포로 구현 안하고 각기 다른 레포, 각기 다른 배포폴더를 가져가면서 자유자재로 앱을 불러와 마운트 시킬 수 있을거 같다. 

(nuxt나 next 안써도 되지만 그냥 개발 편의상..) 

여튼 지금은 각 앱별 디자인 시스템을 만드는데 좀 더 집중하고 웹 컴포넌트는 틈틈히 연구해야겠다.