Vue-vite 프레임워크로 생성된 UI 컴포넌트들을 React-vite으로 변환 후, storybook의 composition 기능을 활용하여 multi-frameworks을 단일 레포에 관리할 수 있도록 고민해본 과정 기록.

---

🍎 현 상황 파악

• Bitbucket vue-storybook (integration-design-system) 배포 완료 (chromatic X)
• Github react-storybook vue ↔ react 코드 변환 후 배포 완료 (chromatic O)
• 크로마틱으로 배포한 react-storybook url을 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를 활용하는 방안을 알아봐야 할 것 같다. 🤔🤯