모노레포 구축계기
뱅킹, PG, sdk를 모두 만들어보기한 프로젝트를 시작하게 되어서, 모노레포에 대한 이야기가 나오게 되었었어요. 아무래도 3개의 서비스를 각각 다른 레포에서 운영하는 것보다는, 하나의 레포에서 구성하여 운영하는 것이 더 좋지 않을까란 생각을 하게 되었습니다.
아무래도 3개의 서비스가 컨셉이 완전히 다른게 아니라 비슷하기때문에 공통컴포넌트도 비슷하게 나올수 있을거란 생각을 하게되었고, 공통컴포넌트 뿐만 아니라 로직이나 커스텀 훅, 함수가 공유될 수 있다고 생각해서 모노레포를 구축하게 되었습니다. CI/CD 설정도 한번만 하면된다..! 라는 장점도 있기도 했습니다.
물론 도입하게된 이유는 배움이 가장 큰 계기가 아니었을까... 생각합니다.
🥹 yarn berry workspace 를 선택한 이유?
lerna와 turbo도 있었지만, yarn berry를 선택한 이유는 '토스가 사용하는 툴을 따르자'라는 이유에서 시작했는데요, yarn berry workspace를 선택한 다음 저는 열심히 블로깅을 하며 eslint며, prettier 설정하는 방법을 기록하였는데요. 저는 참고했던 블로그와 레포는 아래와 같습니다.
GitHub - kowoohyuk/monorepo-template: 기술블로그 프론트엔드 모노레포 글쓰기의 참고 자료로 제공될 레
기술블로그 프론트엔드 모노레포 글쓰기의 참고 자료로 제공될 레포지토리 입니다. Contribute to kowoohyuk/monorepo-template development by creating an account on GitHub.
github.com
Yarn berry workspace를 활용한 프론트엔드 모노레포 구축기 | 우아한형제들 기술블로그
{{item.name}} 안녕하세요 우아한형제들 딜리버리프로덕트실 DH로컬라이징스쿼드 입니다. 저희 조직에서는 백오피스 애플리케이션, 크로스플랫폼 모바일 애플리케이션 등 다양한 프론트엔드 프로
techblog.woowahan.com
😂 그럼 yarn berry workspace 를 포기한 이유?
일단 본질적으로 아주 많은 에러에 마주했었고요... 제가 참고한 레포는 2022년도에 업데이트된 레포였기때문에 babel 설정 관련해서도 outdated된 부분이 아주 많았습니다. 바벨 프리셋 리액트가 바벨-리액트 로 되어있더군요.하하..😇
workspace마다가 폴더가 나뉘어 vscode를 사용할 수 있다는점이 너무 좋긴했지만 packages 내부에 있는 폴더들마다 모두 package.json을 만들고, 바벨설정을 일일이 해주는것과 tsconfig도 extends해와서 모두 일일이 레포마다 설정해주어야하는 것이 심각히 귀찮았습니다.그리고 아무에러없이 그걸 일일이 설정해주는 것도 현실적으로 불가능할거라고 생각이 들었어요.
yarn berry가 심지어 prettier 관련된 에러가 있었는데요, 이부분은 이미 많이 알려진 에러같았습니다. 아래 블로그를 참고해주시면 좋을 것 같습니다. 안그래도 저희팀도 레포 구축하면서 prettier문제를 마주했었어요..^^
Next.js 프로젝트에 monorepo + Turborepo를 적용해보자
기존 Next.js로 구현중인 프로젝트에 monorepo를 적용할 기회가 생겼다.
80000coding.oopy.io
추가적으로 jest 세팅도 까다로웠고, 모든 세팅을 할때마다 거의 에러 투성이었습니다. 그냥 에러 지옥에 빠진다고 생각하면 됩니다.
lerna? turbo?
그래서 대안으로 이야기가 나온게 lerna를 쓸건지 turbo를 쓸건지에 대한 이야기가 나왔는데요, toss/slash 가 lerna로 이뤄진 모노레포라 참고할까? 했지만 lerna같은 경우에는 공식적으로 지원을 중단했다는 이야기가 2022년도부터 있었어서 막상 도입하기가 좀 .. 그렇더라구요 또 큰 에러들을 마주할 것 같았어요. 지원중단에 대한 글은 찾아보면 많았습니다.
[Korean FE Article] Lerna는 공식적으로 죽었다. 모노레포여 영원하길 | 일일일
글 링크 : https://doong-jo.github.io/posts/long-live-monorepos 소개 현재 시점에서 모노레포를 효율적으로 관리할 수 있는 4가지 도구를 알아봅니다. 모노레포는 서로 다른 프로젝트의 여러 종속성을 관리하
oneoneone.kr
그래서 turborepo를 선택하게 되었는데요, 공식문서가 너무 잘되어있었습니다.
Getting Started with Turborepo – Turborepo
Create your first monorepo or add Turborepo to an existing project.
turbo.build
공식문서대로 따라서 설치만하면 그냥 1초만에 모노레포가 구축됩니다...ㅎ...막상써보니 좀 허탈했어요😰 그리고 명령어도 너무잘나와있고, 패키지마다 eslint, prettier설정도 그냥 한방에 해줘서 너무 편안하고 좋았습니다. 컴파일 관련해서 애쓰지 않아도 되었구요..
그리고 test 관련해서도 모두 공식문서에 자세히 나와있고 turbo 명령어도 자세히 기술되어있습니다.
결론
yarn berry?... nope.. turberepo쓰자..! 입니다.
오늘은 인프콘 영상도 있길래, 보면서 잘예정입니다...! 그리고 turborepo로 또 혼자 구축도 해볼 생각입니다. 추후 마주했던 에러들도 기술해보고자 합니다.
Reference Doc
[Yarn] Yarn-berry PnP 동작 원리 + <PATH> isn't intended to be a project error in yarn-berry issue
이 글은 yarn-berry install error부터 시작하여...
velog.io
Yarn berry workspace를 활용한 프론트엔드 모노레포 구축기 | 우아한형제들 기술블로그
{{item.name}} 안녕하세요 우아한형제들 딜리버리프로덕트실 DH로컬라이징스쿼드 입니다. 저희 조직에서는 백오피스 애플리케이션, 크로스플랫폼 모바일 애플리케이션 등 다양한 프론트엔드 프로
techblog.woowahan.com