가수면

모노레포 (MonoRepo) 설정 본문

웹 개발/웹 개발

모노레포 (MonoRepo) 설정

니비앙 2023. 8. 18. 23:40

모노레포란 한 저장소 안에 여러 개의 프로젝트 혹은 여러 개의 package.json이 존재하는 레포지토리를 말한다.

예시 1)

프로젝트 이름/
|-- 부속 라이브러리/
|   |-- node_modules/
|   |-- ...
|   |-- package.json
|-- node_modules/
|-- public/
|-- src/
|-- ...
|-- package.json

예시 2)

 

저장소 이름/
|-- 프로젝트1/
|   |-- node_modules/
|   |-- ...
|   |-- package.json
|-- 프로젝트2/
|   |-- node_modules/
|   |-- ...
|   |-- package.json

이 경우 배포를 진행하면 클라우드가 루트 경로에 위치한 package.json만 인식해 설치하기 때문에 빌드하는 과정에서 다른 폴더 안에 위치한 모듈을 import해오는 과정에서 오류가 발생한다.

위 사진은 예시1의 경우에서 발생한 에러이다.

 

모노레포를 사용할 때 누릴 수 있는 이점은 다음과 같다.

코드의 재사용성
의존성 관리
통합 테스팅
코드 리뷰의 통일성

 

모노레포를 설정하는 법

이 글에서는 모노레포를 이용해 예시1의 케이스를 설정하는 방법에 대해 설명하겠다.

lerna를 이용한 방법은 이제 레거시가 되었기 때문에 그냥 npm과 yarn을 이용해 워크스페이스를 설정해주면 된다. 

 

방법은 간단하다.

루트 package.json 파일에 workspaces 배열을 추가하고 워크스페이스 폴더를 가리키는 상대적인 글로브 패턴을 나열하면 된다.

예시)

  "workspaces": [
    "sanity"
  ],

이 경우 구조를 보면 아래와 같다.

프로젝트 이름/
|-- sanity/
|   |-- node_modules/
|   |-- ...
|   |-- package.json
|-- node_modules/
|-- public/
|-- src/
|-- ...
|-- package.json

그리고 npm install 혹은 yarn install을 실행해주면 된다.

그래도 안 될 경우 node_modules과 package-lock.json을 날려준 뒤 다시 설치하면 된다.

'웹 개발 > 웹 개발' 카테고리의 다른 글

mkcert를 이용해 로컬 환경 https로 실행시키기  (0) 2023.09.04
리팩토링  (0) 2023.08.22
ESLint 설정  (1) 2023.07.19
rgba와 opacity  (1) 2023.04.18
CSS 팁들  (0) 2023.04.01
Comments