Vue-vite 프레임워크로 생성된 UI 컴포넌트들을 React-vite으로 변환 후, storybook의 composition 기능을 활용하여 multi-frameworks을 단일 레포에 관리할 수 있도록 고민해본 과정 기록.
🍎 현 상황 파악
- Bitbucket
vue-storybook(integration-design-system) 배포 완료 (chromatic X) - Github
react-storybookvue ↔ react 코드 변환 후 배포 완료 (chromatic O) - 크로마틱으로 배포한
react-storybookurl을vue-storybook의 main.js 에 ref로 추가하므로써 composition 기능 실험 완료
→ 두 개의 별도 레포로 관리하려니 유지보수에 불편함을 느낄 것 같아 bitbucket 내 단일 레포로 관리할 수 있는 방안을 고민해보게 되었다. (심지어 vue는 bitbucket에, react는 github에 존재하는 상황이었음!)
🍎 단일 레포 내 폴더 구조
root-storybook
ㄴ [+] components
react와 vue로 작성된 UI 컴포넌트들이 모여있다.
ㄴ [+] storybook-react
components 내 jsx를 import하는 story들이 모여있다.
ㄴ [+] storybook-vue
components 내 vue를 import하는 story들이 모여있다.
ㄴ .storybook
story는 없고, react와 vue를 composition하는 storybook.Storybook의 composition 기능을 적용시킬 상위 스토리 레포를 하나 새로 생성해서, 그 안에 리액트와 뷰 스토리 코드를 폴더 별로 각각 추가하는 방식을 채택하기로 했다.
root-storybook는 storybook composition 기능을 적용시킬 외부 스토리 (껍데기 같은 기능)
- jsx와 vue코드로 된 UI 컴포넌트들은
components폴더에서 한번에 관리- stories.js 파일은 각각
storybook-react,storybook-vue폴더 내에서 관리
- 리액트 폴더 내 stories.js는 component 폴더 내 jsx 코드를 import
- 뷰 폴더 내 stories.js는 component 폴더 내 vue 코드를 import
‼️ 여기서 composition 기능을 활용하기 위한 root-storybook 은 UI 컴포넌트가 따로 없는 껍데기(?)이지만, 그래도 스토리북이 정상적으로 작동하기 위해서는 스토리 파일이 하나라도 존재해야 한다.
→ root-storybook 에서 introduction.stories.mdx을 하나 만들어 stories 폴더에 넣어주었다.
🍎 크로마틱으로 재배포 후 composition 기능으로 합치기
🍏 1차 시도 - DOMException error
react-storybook은 크로마틱으로 배포가 되었으나, vue-storybook은 다른 라이브러리로 배포가 된 상태였기 때문에 크로마틱으로 재배포할 필요가 있었다.
그래서 기존의 레포인 integration-design-system (aka vue-storybook) 을 pull 받아서 chromatic으로 배포 후 상위 root 레포의 main.js에 url만 넣는 식으로 composition 기능을 활용하여 합치려고 했더니 다음과 같은 에러가 났다.
→ 이미 배포가 된 vue-storybook 도메인과 충돌이 되는 것 같았다.
그래서 기존 레포는 무시하고, root 레포 내에 다시 합쳐준 vue-storybook 폴더로 경로를 이동해서 그 경로 내에서 다시 한번 크로마틱으로 배포해주었다. (글로만 보면 복잡🧐)
💡 간단히 말해, 기존에 배포한 것은 없던 일이다~ 하고 무시하고, 새롭게 생성해준 상위
root-storybook레포 내 vue-storybook과 react-storybook을 각각 크로마틱으로 재배포했다는 뜻!
storybook-root>react-storybook레포에 리액트 코드 복붙 후 chromatic으로 배포storybook-root>vue-storybook레포에 integration-design-system 코드 복붙 후 chromatic으로 배포
🍏 2차 시도 - refs 구조
이제 더 이상 DOM 에러는 나타나지 않으나, 여전히 의도한 대로 화면에 나타나지는 않았다. React와 Vue 스토리가 둘 다 있어야 하는데 하나만 있는 것.
처음엔 root-storybook 의 main.js 파일에 다음과 같이 ref를 추가해줬었다.
// 수정 전 storybook-root/.storybook/main.js
[+]
refs: {
vue: {
title: "Vue",
url: "https://64dc812a8d1c331facc2ed4f-qzekdnijrv.chromatic.com",
},
},
refs: {
react: {
title: "React",
url: "https://64dc8351623e3a642cdd9b84-qfrpzeixoa.chromatic.com",
},
},→ 이렇게 하니 자꾸 스토리북에 React만 나타나는 것이다. 원래는 Vue와 React가 둘 다 나타나야 하는데 어째서인지 하나만 나타나고 오류 메세지는 따로 안 떴다.
Vue가 잘못된 걸까 싶어서 React refs를 지우고 Vue refs만 놔뒀는데 이번엔 Vue가 잘 나타났다.
그래서 이 순간 무엇이 잘못된 건지 파악이 됐다.
// 수정 후 storybook-root/.storybook/main.js
[+]
refs: {
vue: {
title: "Vue",
url: "https://64dc812a8d1c331facc2ed4f-qzekdnijrv.chromatic.com",
},
react: {
title: "React",
url: "https://64dc8351623e3a642cdd9b84-qfrpzeixoa.chromatic.com",
},
},→ vue와 react refs를 따로 작성해줄 게 아니라, 하나의 refs 안에 코드를 함께 작성해줘야 의도한 대로 화면에 잘 나타나는 것.
multi-framework을 관리해주려면 하나의 refs 로… 사실 이건 다 storybook docs에 명시되어 있는 건데 순간 잊어버리고 착각을 했다.
이렇게 여러 개의 시행착오를 겪고 나니 의도한 대로 상위 레포인 root-storybook 에서 스토리북을 실행해주니 vue와 react 컴포넌트가 하나의 화면에 잘 나타났다.
- 하지만 여전히 크로마틱으로 배포하고 있는
vue-storybook과react-storybook레포 두개가 존재.- 즉,
root-storybook까지 포함해서 총 세개의 레포가 존재하는 셈. root-storybook라는 상위 레포 내에서 vue와 react 스토리 코드를 관리해서 한번에 나타내는 것까지는 성공했으나, root 레포에서 코드를 수정할 시 배포된 vue/react 크로마틱에도 바로 반영이 되도록 하기 위해서는 CI/CD를 활용하는 방안을 알아봐야 할 것 같다. 🤔🤯
- 즉,
