지금 하고있는 서비스는 모놀리식 레포이다!
한개의 레포지토리로 3개의 서비스를 운영중인데, 공통인 코드가 아닌 개별 서비스에만 있는 부분은 다 분기처리가 되어있다.
지금은 3개의 서비스만 분기가 되어있지만 앞으로를 생각했을때 완전히 동일한 UI 가 아니라면 분기처리 지옥에 빠질것같았다.😢
그래서 리서치해보다가 우리에게 딱 맞는 모노레포라는 아키텍처를 찾았다!
지금 Nuxt.js(Vue)로 되어있는 서비스를 Next.js(React)로 마이그레이션 하는 동시에 모노레포로 구조 변경을 진행하려고 하니, 제일 빠르게 적용해볼수있는 모노레포 툴을 찾아야했다😫
이중에 vercel에서 만든 Turborepo와 Nx를 테스트를 해보았다!
- Turborepo
- 레거시 소스인 Nuxt.js 코드를 넣고 실행했을때 정상적으로 실행이 되었다!
- root에서 실행하면 apps 하위의 프로젝트들이 각각의 포트들로 잘 실행된당
- packages/ui 컴포넌트로 분리한 코드가 app에서 정상적으로 보이는것도 확인이 되었다!
- 근데 뭔가 핫리로드가 안되고 수정하면 브라우저를 새로고침해야만 반영이 되었다 🥲
- Nx
- Turborepo와 마찬가지로 레거시 소스인 Nuxt.js 코드를 넣고 실행했을때 정상적으로 실행이 되었당
nx graph와 같은 명령어로 앱,패키지 간 종속성 그래프를 시각화하는 기능을 제공한다!- root 에 eslint와 prettier를 설정 후 apps 하위 프로젝트에도 반영이 되는지 확인해봤는데 잘 반영이 되었다!
= 소스를 수정하면 핫 리로드된다 ㅎㅎㅎ 바로바로 반영됨 - VScode에서 Nx console 플러그인으로 GUI로 스크립트 실행이 가능하다는 장점이 있다!
이런 테스트를 통해 최종적으로 Nx를 사용해서 서비스를 구현하기로 했다!
모노레포에 대해 생소했지만 직접 해보니까 이해가 더 잘됐다!
이제 공통 컴포넌트를 분리하는 작업을 해야하는데 모던웹을 위한 마이크로 프론트엔드 라는 책을 참고해서 열심히 나눠봐야겠다~!
