모노레포(Monorepo)를 도입하다

Yarn workspace기능과 Lerna를 사용한 모노레포(monorepo) 짧은 구축 후기.

안녕하세요! 👋
위즈페이스에서 웹 프론트엔드 개발을 담당하고 있는 Jusung 입니다.

Social Trading Platform? — League of Traders (LoT)

저희는 암호화폐 트레이더를 위한 리그를 개최하고 있으며 트레이더들의 투자 내역을 볼 수 있고, 자신의 투자 스타일 분석 등 체계적으로 운영 할 수 있도록 도와주는 소셜 트레이딩 플랫폼 “League of Traders(리그오브트레이더스)”를 서비스하고 있습니다.

현재는 iOS와 안드로이드(AOS)를 메인으로 운영 중이며 웹 버전 또한 개발 진행 중있습니다.

원본: 엉덩국

어서와, 웹뷰(WebView)

LoT는 암호화폐 트레이더들을 위한 서비스 제공의 선두주자로서 오픈 이후 정말 빠른 시일 내에 신규 기능 추가, 버그 수정 및 품질 개선 등 정말 많은 변화를 겪고 있었습니다.

이러한 과정에서 저희는 한 발자국을 더 내디뎌 웹뷰 도입을 통해 배포 주기를 낮추고 지속적인 MVP를 만들어 시도해보기로 결정하였습니다.

공통으로 사용되는 비즈니스 로직과 구성요소, 린트 사용 등 모노레포(Menorepo)를 고려하다.

이전에는 메인 웹 프로젝트 폴더에 웹뷰용 페이지를 추가해서 배포하고 있었습니다.

하지만 이렇게 관리하다 보니 향 후에 웹뷰에 제공하던 기능을 웹 버전으로도 제공을 해야 할 때 불필요한 로드가 발생 할 수 있고 HOC(High Order Component), Custom Hook 등을 만들어 별도의 웹과 웹뷰에서 보여지는 콘텐츠를 다르게 표시하는 핸들러를 만들어야 된다는 추가적인 관리 포인트가 존재했습니다.

무엇보다, 이후 다른 프론트엔드 개발자분이 오셨을 때 협업 부분에서 컨플릭트가 일어날 상황이 더 많을 것이라고 판단되기도 했습니다.

그래서 저희는 Yarn 패키지 매니저에서 지원하는 workspace 기능과 Lerna를 활용하여 모노레포를 구축하기로 결정했습니다.

모노레포를 위한 환경 구축하기

모노레포의 구조와 Yarn Workspace 및 Lerna를 사용한 구축 방법 등 관련 문서들을 찾아보며 저희가 설정했던 부분에 대해 짧게 공유드리고자 합니다.

Monorepo, Yarn workspace, Lerna등 자세한 설명은 참고했던 글과 공식 문서를 하단에 남겨두겠습니다.

모노레포 폴더 구조

스터디를 한 후, 최종적으로 저희가 정한 서비스의 대략적인 폴더 구조는 아래와 같이 정의되었습니다.

모노레포 프로젝트 폴더 구조

• /apps 폴더에서는 실제 프로덕트를 관리하고 있으며, 저희는 main과 webview 이렇게 두 개의 서비스를 나누어 사용하고 있습니다.

이렇게 apps와 packages 폴더를 나누는 것은 꼭 지켜야 하는 규칙이 아닙니다. 단순히 실제 서비스의 코드가 담긴 폴더와 서비스에서 공용으로 사용되는 모듈을 분리했다고 생각하면 쉬울 것 같습니다. 그러니 하나의 폴더(예: packages)만 workspace로 지정하여 사용하셔도 괜찮습니다. 😊

• /packages는 공용으로 사용될 수 있는 기능들을 관리하고 있습니다.
  (예: api, helpers, utils, services, etc…)

package.json private 설정

yarn의 workspace기능을 사용하기 위해선 루트 폴더에 존재하는 package.json을 아래와 같이 private로 만들어 주어야 합니다.
(추가로 workspace에 대한 설정도 같이합니다.)

Lerna 설치

루트 폴더에서 터미널을 열어 yarn add -DW lerna 커맨드를 입력하여 lerna를 설치해줍니다.

-DW 옵션에서 “W”는 작업공간 루트에 패키지를 설치할 수 있게 해줍니다.

Lerna 설정

Learn의 설치가 완료되었다면 초기화를 위해 yarn lerna init 커맨드를 입력하여 lerna.json을 생성해 줍니다. (혹은 별도로 lerna.json 파일을 생성해주셔도 괜찮습니다)

그다음 lerna.json 파일을 열어 npmClient를 yarn으로 설정해준 뒤, 다음과 같이 lerna.json을 작성해 줬습니다.

lerna create 명령어로 새로운 패키지 생성

Lerna CLI에서 제공하는 명령어, lerna create 를 통해 하위 패키지들을 만들어줍니다. (이것도 위와 마찬가지로 직접 하위 폴더에 들어가셔서 만들어주셔도 됩니다)

yarn lerna create components
yarn lerna create hooks
yarn lerna create website ./apps

package.json 스크립트 설정

yarn과 lerna에서 제공하는 커맨드를 활용하여 스크립트 설정을 합니다.

Webpack resolve modules 설정

Next.js 프로젝트에서packages폴더에 있는 모듈을 같이 사용하기 위해 webpack resolve modules의 경로를 설정해 줍니다.

저희는Next.js를사용하고 있기에 next.config.js 파일을 열어 아래와 같이 webpack의 resolve modules를 설정해주었습니다.

이외에 CRA도 별도의 react-app-rewired 같은 도구를 사용해서 webpack 설정을 적용해 주시면 됩니다.

그 외 (typescript, eslint, prettier, jest)

이후에 별도로 타입스크립트를 사용한다면 tsconfig.json의 path 설정을 해주시면 되며, eslint, jest 등 추가적인 설정을 해주시면 됩니다.

마치며

이전부터 모노레포에 대한 얘기는 주변에서 자주 접해보았습니다만,
개발 일정이 너무 빠듯하고 도입할 시기가 모호해서 도입하지 못하였습니다.

그렇지만 계속 이렇게 도입을 미루게 되면 이후에 추가 개발 비용이 더 늘어날 것 같아, 이번 기회에 시간을 조금 투자하여 모노레포를 적용하게 되었던 것
같습니다.

도입을 위한 그 과정에서 많은 시행착오들이 존재하였지만 그래도 적용 이후에 코드 재사용성이 좋아졌다든지, Lint 및 Code Formatting 관련 설정도 편하고 일관성 있게 맞출 수 있게 되어서 좋았습니다. :)

참고 자료

• https://medium.com/@deptno/monorepo-yarn-workspace-e81e3e078100
• https://class101.dev/ko/blog/2019/07/12/tony/
• https://simsimjae.medium.com/monorepo-lerna-yarn-workspace-%ED%81%AC%EA%B2%8C-%EA%B0%9C%EB%85%90%EB%A7%8C-%EC%9E%A1%EC%95%84%EB%B3%B4%EA%B8%B0-c58bc4ba31fe
• https://y0c.github.io/2019/06/14/monorepo-tutorial/
• https://dev.to/t7yang/typescript-yarn-workspace-monorepo-1pao

🚀 슝슝~ 같이 가볼까요?

저희 위즈페이스팀은 언제나 팀원들과 함께 즐겁게 서비스를 만들어 나아갈 사람들을 환영해요!

아래 이메일을 통해 본인이 관심 있는 분야에 대해 편하게 연락주세요 :)
recruit@wizpace.com

감사합니다.