기존 Next.js로 구현중인 프로젝트에 monorepo를 적용할 기회가 생겼다.
작업한 svg icon들을 monorepo를 활용해 관리하면 icon관리(추가, 수정)와 버전관리, 가시성 등에서 큰 장점을 얻을 수 있다고 판단했다. 가장 큰 참고를 했던 오픈소스는 채널톡의 berzier-react 레포지토리이다.
1. yarn workspace 적용하기
우선 이슈에 작업할 내용을 간략하게 정리하고 monorepo를 적용하기 위한 학습을 진행했다. 이전 프로젝트에서 monorepo의 개념에 대한 학습을 어느정도 했기때문에 바로 프로젝트에 적용하는 순서를 진행하기로 했다.
우선 yarn workspace를 적용해서 가볍게 테스트를 진행해보려 했다.
예상되는 레포지토리의 최종 tree구조는 아마 아래와 같을 것이다.
# 적용 전
.
README.md
ㄴ nextjs-client
# 적용 후(예상)
.
README.md
package.json
ㄴ packages
ㄴ web
ㄴ web-icons
Shell
복사
우선 기존에 로컬에 남아있던 모든 빌드 파일들을 지워주었다. 패키지매니저를 npm에서 yarn으로 변경하기위해 package-lock.json 파일도 지워주었다.
rm -rf node_modules package-lock.json
Shell
복사
monorepo 적용 과정은 아래 문서를 참고해서 yarn berry를 활용한 monorepo를 구현해보기로 했다.
2. 상상도 못한 에러 ㄴㅇㄱ 다시 npm으로…
yarn berry를 활용한 monorepo를 적용후, 빌드도 되고 모든 것들이 정상적으로 작동하나 싶었지만 상상도 못한 에러를 마주하게 되었다. prettier와 vscode사이에 문제가 발생해 무한 로딩상태에 빠져버렸다. 뭔가 잘못 설정한 건지 다시한번 살펴보았지만 가장 큰 가능성은 약 한달전 배포된 prettier@3.0.0 버전과 충돌이 발생한다는 것이다.(링크)
prettier를 다시 2.8.8로 다운그레이드 하면 해결될 것 같았지만 다운그레이드를 통해 문제를 해결하면 추후 또다른 의존성 충돌 문제가 발생할 수도 있다고 생각해 다른 해결책을 찾아보았다.
게다가 remirror 패키지에서도 발생한 충돌을 해결하기 위해 prettier 버전 업데이트 PR을 직접 올려서 Merge까지 되었는데, 다시 다운그레이드를 하게되면 이 작업을 진행한게 너무 아까웠다 ㅎㅎ
다시 npm workspace 선택!
yarn berry로 monorepo를 적용하는 것은 포기하고… 추후 해당 문제에 대해 좀 더 명확하게 파악하고 해결할 수 있을 때 다시 적용해보기로 했다. 우선 프로젝트를 이어나가기 위해 npm workspace를 활용하기로 했다.
3. Turborepo를 적용해보자!
yarn berry 적용에 실패(?) 해서 Plug’n’Play(PnP)를 도입하지 못했다. 개발과정에서의 반복되는 의존성 설치에서의 시간 절약은 포기해야했지만, Turborepo를 적용해 빌드 속도 개선에서의 장점을 얻어가기로 했다.
Turborepo를 기존 monorepo에 적용하는 방법은 매우 간단했다. 아래 공식문서에 나오는 방법을 그대로 따라하면 된다.
web-icons 패키지 만들기!
우선 web-icons 패키지를 만들었다. pacages/web-icons디렉토리 아래에 package.json 파일을 만들어주었다.
{
"name": "@80000coding/web-icons",
"version": "1.0.0",
"private": true
...
}
JSON
복사
rollup을 활용해서 외부에서 모듈 형식으로 사용할 수 있도록 패키지를 만들어야 한다. babel.config.js, rollup.config.mjs 등 필요한 config 파일을 추가해 주었다.
핵심 로직은 동일하게 채널톡 레포지토리를 참고하였다. 현재 진행중인 프로젝트 스펙에 맞게 코드를 조금 수정해 주었다.
결론
실제로 적용해보기 전까진 monorepo를 적용하고 관리하는 것이 어렵게만 느껴졌다. 해봐야지 생각은 했었지만 시도해볼 용기가 잘 나지 않았다. 하지만 직접 적용해 보니 역시 도전해 보는것 만큼 쉬운 해결책도 없다는 것을 느꼈다.
아마 프로젝트를 진행할수록 monorepo, Turborepo에 대한 지식이 점점 더 많이 필요하겠지만, 이번 경험을 살려서 차근차근 하나씩 해결해보려고 한다.
