기존 Next.js로 구현중인 프로젝트에 monorepo를 적용할 기회가 생겼다.

작업한 svg icon들을 monorepo를 활용해 관리하면 icon관리(추가, 수정)와 버전관리, 가시성 등에서 큰 장점을 얻을 수 있다고 판단했다. 가장 큰 참고를 했던 오픈소스는 채널톡의 berzier-react 레포지토리이다.

channel.io

1. yarn workspace 적용하기

우선 이슈에 작업할 내용을 간략하게 정리하고 monorepo를 적용하기 위한 학습을 진행했다. 이전 프로젝트에서 monorepo의 개념에 대한 학습을 어느정도 했기때문에 바로 프로젝트에 적용하는 순서를 진행하기로 했다.

우선 yarn workspace를 적용해서 가볍게 테스트를 진행해보려 했다.

예상되는 레포지토리의 최종 tree구조는 아마 아래와 같을 것이다.

# 적용 전
.
README.md
ㄴ nextjs-client

# 적용 후(예상)
.
README.md
package.json
ㄴ packages
	ㄴ web
  ㄴ web-icons

우선 기존에 로컬에 남아있던 모든 빌드 파일들을 지워주었다. 패키지매니저를 npm에서 yarn으로 변경하기위해 package-lock.json 파일도 지워주었다.

rm -rf node_modules package-lock.json 

monorepo 적용 과정은 아래 문서를 참고해서 yarn berry를 활용한 monorepo를 구현해보기로 했다.