[인프콘 2023] "Turborepo NextJS Typescript 이용한 모노레포 적용기" 리뷰

🎈개요

 인프콘 2023 에서 발표한 " Turborepo Next.js Typescropt 이용한 모노레포 적용기 " 발표를 듣고 인사이트를 얻으며 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다.

 

📚강의 내용 정리

모노레포란?

하나의 레포지토리에서 독립적인 여러 프로젝트를 관리하는 방법

 

기존에 많이 사용하던 Multi Repo 같은 경우는 다른 라이브러리에서 공통으로 사용하는 라이브러리를 중복하여 설치할 수 밖에 없습니다. 

반면 모노레포의 경우 공통적으로 사용하는 라이브러리를 한 곳에 모아 관리하고 사용합니다.

 

모노레포의 장점

• 빠른 코드 수정
  • UtilA와 UtilB를 변경하더라도 App에서 바로 반영 가능하다
  • 멀티 레포의 경우 버젼을 올리고 의존성을 다시 설치 해야함
• 각 레포마다 사용했던 같은 코드들의 중복 제거
• 수월한 코드 리팩토링
  • 한번에 코드 관리하게 편함
• 코드 컨벤션 통일
  • 레포지토리 별로 다른 eslint 패키지를 사용함
• 통합 CI, test관리
  • 한꺼번에 CI를 돌릴 수 있고, test를 돌릴 수 있음
  • 멀티 레포의 경우 수정 사항이 생길 때 마다 각 레포마다 yarn test를 해야함

 

모노레포의 단점

• 의존성 관리 복잡
  • 서로 의존성 연결이 쉬워 과도한 의존관계가 생김
• 무거운 프로젝트(CI 속도 저하)
  • 오히려 장점일 수 도 있다. 멀티레포의 경우 보다 좋다
• Code Ownership 위배
  • 많은 팀이 하나의 레포의 관리를 한다면 관리체계가 혼동된다.

 

왜 모노레포와 Turborepo를 선택했는가?

모노레포의 선택

• 서비스 특성상 여러 시점이 존재
• 개발한 UI를 개발자와 고객사의 개발자도 볼 수 있어야 한다.
• 관리 코스트의 이점을 생각

Turborepo의 선택

• 모노레포의 도구 : Yarn Lerna NX Turborepo

• 실제 사용하여 구성하여봄
  • 세팅이 Turborepo, Nx가 빠름
  • Turborepo가 Next.js와 Vercel, Typescript에 친화적이지만 PnP기능을 제공안함
• 기존 스택을 고려하여 채택

 

적용 후 장/단점

장점

• 패키지 분리로 공통 로직 관리가 쉬워졌다.
• 코드구조가 한눈에 잘 보인다
• Next.js와 Typescript와 호환성이 좋다.

단점

• 의존성 관리가 힘들다
• 패키지 간의 의존 관계 설계가 복잡하다
  • 구조를 먼저 생각하고 규칙을 정함
• 모든 패키지 테스트에 CI가 오래 걸린다.

⇒ 모노레포는 하나의 제품에 여러 패키지를 만들어야 할 때 적절한 대안

 

✨리뷰

단일 레포만 다룬 주니어 FE 개발자로서 대형 서비스에 대한 시각을 넓힐 수 있었습니다.

 

대형 프로젝트에서 여러 프로젝트를 합쳐야 한다거나, 여러 패키지의 집합을 만들어야 하는 경우 모노레포의 도입에 대해 고려해볼 수 있겠습니다.

 

하지만 생각해보면 네이버 같은 대형 IT 기업들의 서비스를 생각해보면, 굳이 모노 레포나 멀티 레포를 도입하지 않고 서비스를 독립적으로 구분해 놓은 것을 확인할 수 있습니다. 아래는 기능 별 도메인 주소입니다.

 

- 네이버 쇼핑 shopping.naver.com

- 네이버 지도 map.naver.com

- 네이버 메일 mail.naver.com

 

굳이 필요성이 없다면 위와 같은 방식으로 서비스 별로 독립적으로 도메인을 구성하여 모듈화 하는 것이 각 서비스의 속도를 높이고 가볍게 할 수 있습니다. 

 

하지만 여러 프로젝트가 합쳐져야 하거나 여러 패키지의 집합을 만들어야 하는 경우는 멀티레포의 도입보다 모노레포의 도입에 대한 장점을 확인할 수 있어습니다.