모노레포로!

간단하게 풀어보는, 모노레포로 옮긴 썰

문제

현재 회사 서비스는 크게 홈페이지, 대시보드, 툴로 나누어져 있다.
사실상 모두 같은 디자인 시스템을 사용하고 있고, 모두 비슷한 기술 스택으로 만들어졌다.
그럼에도, 파편화된 개발 환경과 공통 코드 복붙이 활개 치는 혼돈의 사태가 지속하였다.

어떤 곳은 허스키로 커밋 스타일을 강제하고… 어떤 곳은 다른 패키지 버전을 사용하고… 같은 컴포넌트지만 각자 도생한 코드들… 중복되는 복붙 코드들…

해결

모노레포로 이동!
Turborepo 사용!

여러 툴들이 있지만, Turborepo를 사용하기로 결정하면서 다음과 같은 이유가 있었다.

지원되는 기능과 성능이 부족한 Yarn과 Learna는 제외
팀원 모두가 모노레포 경험이 없었기 때문에, 더 직관적이고 보일러 플레이트가 적은 Turborepo가 낫다! (zero-config)
NX의 경우 커다란 커뮤니티와 서버 개발이나 테스트 환경 등 폭넓은 기능을 지원하지만, 상당히 구조화된 모습을 보인다. 현재 회사 프로젝트 크기에는 굳이 쓸 이유가 없다.
회사에서 서비스가 모두 Vercel에 의존하고 있었기 때문에, Vercel에 인수된 Turborepo와 좋은 시너지를 낼 것이다. (뇌피셜)

과정

레포 구성 자체는 Turborepo에서 제공해주는 스캐폴딩을 이용해 쉽게 만들 수 있었다.
어떻게 옮길지가 문제였는데,
모든 팀원들이 작업을 멈추고 master branch에 모두 병합한 상태로 옮겼다면 훨씬 수월했겠지만… 일정상 불가능하여, 다음과 같은 스크립트를 작성했다.

    git clone https://github.com/회사레포/$1.git

    cd $1

    git fetch
    git checkout -b develop
    git branch --set-upstream-to=origin/develop develop
    git pull

    mkdir apps
    mkdir apps/$1

    setopt extended_glob
    git mv -k ^$1 apps/$1
    unsetopt extended_glob
    setopt globdots
    git mv -k \* apps/$1
    unsetopt globdots

    git commit -m "Preparing for monorepo merge"

    cd ..

    git remote add -f $1 $1
    git merge -m "Integrating $1" $1/$2 --allow-unrelated-histories
    git remote rm $2

대략 설명을 적자면,

변수 받기 $1 = 레포 이름, $2 = 브랜치 이름
기존의 레포를 모노레포로 클론
기존 레포의 파일들을 ‘apps/기존레포’ 경로로 옮긴다. 여기서 apps는 모노레포의 프로젝트들이 모인 경로다.
모노레포의 리모트에 로컬에 있는 기존 레포를 추가하고 옮기고 싶은 브랜치를 합친다. (–allow-unrelated-histories를 통해 다른 조상을 지니는 브랜치 둘을 합침)

결과

다음과 같은 구조를 가지게 되었다!

    Plask
    └── apps
        ├── dashboard
        ├── homepage
        └── tool
    └── packages
        ├── common-types # 공통 type 정의
        ├── eslint-config-custom # 공통 eslint 환경 설정
        ├── next-config # 공통 next js webpack config
        ├── tsconfig # 공통 tsconfig
        └── ui # 공통 컴포넌트
    └── .eslintrc.js
    └── .gitignore
    .
    .
    .

공통 컴포넌트를 공유한다는 점에서 가장 큰 만족을 얻었고,
앞으로 새로운 프로젝트를 추가할 때 훨씬 쉽게 환경을 구성할 거라 기대하고 있다!