Mono Repo

 현재 재직중인 회사에서 yarn workspace를 활용하여 모노레포(MonoRepo) 프론트엔드 시스템을 구축하고 있습니다.

제가 하는 업무는 기존 서비스하는 application의 공통적으로 사용되는 컴포넌트를 storybook에 작성한 뒤 storybook 컴포넌트를 기존 컴포넌트와 교체하는 작업입니다. 이러한 업무를 진행하던 중 이슈가 발생하여 기록해놓고자 합니다. 

 

Monorepo

 여러개의 프로젝트를 하나의(mono) 저장소(repository)로 관리하는 시스템을 의미합니다.

각각 패키지를 하나의 Root Package 아래에 묶어 하나의 저장소로 관리합니다.

기존 멀티레포 시스템에서 모노레포 시스템으로 프로젝트를 구축하며 다음과 같은 이점을 얻기를 원하고 있습니다. 

• 중복되는 패키지에 대한 공간적 시간적 활용도 향상
• 컴포넌트 재사용성을 application단위가 아닌 프로젝트 단위로 활용
• 테스트 툴 도입 시 하나의 테스트 툴로 모든 application에 대한 테스트를 진행하도록 하기 위함.

 예를 들어 eslint, Prettier와 같이 각 패키지별로 동일한 설정이 필요할 경우, Root패키지에서 설정하면 하위의 패키지들에서는 별도의 lint설정이 필요 없으므로 각 패키지 별 설정할 시간을 들일 필요가 없고, 설정량이 줄어드므로 공간적인 이점도 있고, build속도도 개선됩니다.

 

Yarn workspace

 이러한 Monorepo 프로젝트를 구축하며, 패키지 의존성 관리를 위하여 yarn workspace를 선택했습니다.

yarn workspace는 workspace 내부 패키지 사이의 의존성을 관리하여 연결된 패키지를 효율적으로 처리할 수 있습니다.

 workspace를 이용하여 ui 스타일 패키지를 사용할 폴더와 application을 저장할 폴더를 분리하고 application에서 ui 스타일 패키지의 컴포넌트를 export하여 공통 컴포넌트를 사용할 수 있습니다.

 

Storybook

Storybook은 공식문서에서 이렇게 소개하고 있습니다.

Storybook is an open source tool for building UI components and pages in isolation. 
It streamlines UI development, testing, and documentation.

"UI 컴포넌트 및 페이지를 별도로 구축할 수 있는 오픈소스 도구이며, UI개발, 테스트, documentation을 간소화 할 수 있습니다."

https://storybook.js.org/

Storybook: UI component explorer for frontend developers

스토리북을 사용하여 독립적인 환경에서 UI를 컴포넌트를 개발할 수 있고, 프로그램 개발 시 문서화 등에 사용할 수 있습니다. 

 rollup과 typescript를 이용한 Storybook을 구축하였으며, 공통 디자인 소스를 하나의 패키지로 관리하며 테스팅, 문서화를 하고 있습니다.

 

발생한 이슈와 해결법

 현재 application에 사용되는 라이브러리는 react이고, react를 이용한 개발을 지속하기위해 Storybook도 react에 맞게 설정을 해두었습니다.

 그러던 중 Storybook에 만들어 둔 컴포넌트를 application에 import하는 도중 문제가 발생했습니다.

Invaild hook call 이슈

"Hooks can only be called inside the body of a function component."

위 오류가 발생하는 일반적인 이유로 3가지가 있습니다.

1. React와 React DOM 버전이 일치하지 않을 수 있습니다.
2. Hooks 규칙을 위반했을 수 있습니다.
3. 같은 앱에 React가 한개 이상 있을 수 있습니다.

처음에는 해당 오류가 발생한 이유에 대하여 이해가 되지 않았습니다.

1번 Storybook에 설치한 react와 react dom은 application과 동일한 v17이므로 제외

2번 hooks 규칙 위반이 있었다면 설정해둔 eslint에서 이 오류를 보기 전에 확인을 했을 것, (공식문서에서도 eslint 설정을 권장)

3번 application에는 React가 하나만 설치되어 있음.

 

위 오류를 해결하기 위해 여러가지 시도를 해보았지만 해결방법을 찾지 못하다가 다시 처음으로 돌아와서 생각해봤습니다.

3번 같은 앱에 React가 한개 이상 있을 경우에 대하여 생각해보았고, 해당 문제에 대한 해결방법을 찾게 되었습니다.

 

Workspace 세팅할 때 nohoist 옵션으로 React 관련 라이브러리를 설정해두었습니다.

 nohoist란 workspace에서 플러그인이나 라이브러리를 설치할 때 자동으로 root package로 설치되는데 nohoist를 설정해두면 각 패키지에 설치가 됩니다.

 즉 nohoist에 react를 설정해 둔 뒤 프로젝트를 build한다면 package단위로 react가 설치가 되는 것이었습니다.

3번 규칙에 대하여 잘못 이해하고 있었지만 다시 생각해보니 여기서 문제가 발생할 수도 있겠다는 생각이 들었습니다.

Application과 storybook은 각자 package의 react를 바라보고 있고, storybook의 컴포넌트를 import하는 application에는 결국 react가 2개가 존재하는 형태가 되어버립니다.

 

nohoist에서 react를 지우고 프로젝트를 다시 build한다면 아래와 같은 구조가 됩니다.

이렇게 되면 Application과 Storybook은 같은 react를 바라보는 것이고 하나의 앱에는 하나의 react만 존재하게 되고, 발생한 이슈는 해결되었습니다.

 

 

 

https://ko.reactjs.org/warnings/invalid-hook-call-warning.html#:~:text=Hooks%20can%20only%20be%20called,of%20React%20and%20React%20DOM.&text=You%20might%20have%20more%20than,React%20in%20the%20same%20app.

Invalid Hook Call Warning – React