[NEXT.js] 모노레포 사용기 - 모노레포를 선택한 이유 / 모노레포 장점 / 백오피스 / 클라이언트 페이지 / pnpm 사용 이유

모노레포 언제 씀?

 

모노레포 적용부터 yarn berry까지 – 화해 블로그 | 기술 블로그

https://seunghyum.github.io/design%20pattern/Monorepo/

[Design Pattern] Monorepo 공부

https://medium.com/hcleedev/dev-monorepo-개념-알아보기-33fd3ce2b767

Dev: MonoRepo 개념 알아보기

https://velog.io/@dbwjd5864/%EC%9A%B0%EC%95%84%EC%BD%98-2022-%EC%9A%B0%EB%A6%AC%EB%8A%94-%ED%95%98%EB%82%98%EB%8B%A4-%EB%AA%A8%EB%85%B8%EB%A0%88%ED%8F%AC-with-pnpm

[우아콘 2022] 우리는 하나다! 모노레포 with pnpm

 

 

위의 글들을 참고한 결과! 모노레포는 다음의 이유로 사용하는 것 같다.

( 개인이 소규모의 프로젝트를 할 때를 기준으로 정리해 보았다. )

 

1. 다양한 프로젝트의 패키지를 일관적으로 관리

예를 들어 클라이언트 페이지 프로젝트와 백오피스 페이지 프로젝트 두 개를 운영하는데

린트 설정이나 라이브러리를 공유하고 싶다면 각각 프로젝트에 파일을 만들고 설치하는 것보다 한 번에 관리하는 것이 유리하다. 

나 같은 경우 ui 라이브러리를 쓰지는 않지만 코어 컴포넌트들은 공유하면 편리할 것 같아서 모노레포로 프로젝트를 구상하게 되었다.

 

2. CI, CD 로직 공유 가능

 

같은 맥락에서 CI, CD도 하나의 로직으로 관리가 가능하니 편리하다고 한다.

 

 

결론적으로 두 번 세 번 할 일을 한 번에 할 수 있다는 맥락에서 모노레포가 주목받고 있는 것 같다.

물론 규모가 큰 회사에서는 이렇게 일관적으로 코드를 관리하는 것이 유지보수 등의 측면에서도 매우 유리할 것 같다. 

 

---

 

나는 백오피스 (관리자 페이지) , 웹 클라이언트, 웹 백엔드를 구축해야 했고

웹 클라이언트와 백오피스를 모노레포로 관리해 코어 컴포넌트, api 코드, eslint 설정, 허스키 설정 등을 공유할 수 있도록 구상했다. 

---

 

모노레포를 사용하려고 알아보니 기존 내가 사용하던 패키지 매니저인 npm 이 아닌 pnpm이나 yarn을 많이 사용하는 것 같았다. 

드디어 pnpm으로 갈아탈 때가 온...

 

 

 

우선 이유가 궁금해 찾아보았다.

우선 모노레포 환경을 구성하려면 패키지 매니저의 workspace 기능이 필요하다. 이 workspace로 분리된 여러 개의 프로젝트를 관리할 수 있다. 그런데 npm, pnpm, yarn 모두 workspace를 지원하기는 한다. 그럼 왜,,. why? 

 

기존 npm 대비 pnpm의 장점 + package.json에 peer dependency를 명시하지 않으면 사용할 수 없는 pnpm의 엄격함 때문이라고 한다. 

 

기존 pnpm의 장점

https://yceffort.kr/2022/05/npm-vs-yarn-vs-pnpm

npm, yarn, pnpm 비교해보기

이 블로그가 매우 잘 정리해주고 있으니 한 번씩 읽어보면 좋을 것 같다. 

요약하면 pnpm은 yarn과 npm이 dependencies를 중복 저장하는 점을 개선했다.

글로벌 저장소에 dependencies를 저장하여 중복 코드를 없앤다. 

 

 

package.json의 peer dependency

peerDependencies를 명시하지 않으면 사용할 수 없다는 말은  pnpm이 다른 패키지 매니저보다 의존성 충돌이나 관리 문제를 엄격하게 다루므로, 명시하지 않으면 경고를 발생시킬 수 있다는 의미이다. 

그러나!!! peerDependencies가 명시되지 않았거나 설치되지 않았더라도 상위 프로젝트가 필요한 패키지를 설치하면 문제없이 동작할 수 있다. 실제로 나는 peerDependencies를 명시하지 않았는데 잘 동작한다. 

peerDependencies는 보통 라이브러리 개발 시 많이 명시하는데,

쉽게 말하면

'나를 사용할 사용자야,, peerDependency에 명시된 버전의 react를 이용해 줘!'라고 알려주는 것과 같다.

https://velog.io/@johnyworld/Peer-Dependencies-%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

Peer Dependencies 에 대하여

 

 

모노레포를 구상할 때는 '패키지매니저만 사용하기', '패키지 매니저와 모노레포 빌드 툴을 같이 사용하기'의 두 옵션이 있다.

보통 프로젝트 규모가 커지면 관리의 용이를 위해 모노레포 빌드 툴을 같이 사용하지만, 나는 작은 프로젝트를 구상 중이라 오히려 해당 툴들을 사용하는 것이 오버헤드를 키울 수 있다고 판단해 pnpm만 사용하기로 했다. 

---

결론

모노레포를 선택한 이유 

웹 클라이언트와 백오피스를 모노레포로 관리해 코어 컴포넌트, api 코드, eslint 설정, 허스키 설정 등을 공유

---

pnpm을 사용한 이유

npm, yarn 대비 디스크 사용 효율적! 처음 모노레포를 접할 때 사용하면 좋음! (규칙이 엄격해서)