모노레포(Monorepo) 구축기

모노레포란??

여러 개의 다른 프로젝트 코드를 하나의 repo에서 관리하는 전략이다.

 

왜 구축하게 되었는가??

신촌 연합 IT 동아리 CEOS 16기에서 프론트엔드 스터디 커리를 진행하면서, 팀 프로젝트를 제외하고도 5개의 레포지토리가 생성되었다...

 

이 5개의 레포지토리는 1개의 바닐라 자바스크립트 레포, 3개의 react 레포, 1개의 next.js 레포로 구성되어있는데, 뭔가 이 레포지토리들을 하나의 레포지토리로 합병해서 관리할 수는 없을까... 하던 중 모노레포 시스템을 알게되어 바로 적용해보게 되었다.

 

바닐라 자바스크립트 레포는 node_modules를 관리할 필요가 없기 때문에 모노레포 시스템의 의도와는 맞지 않으나 단순히 나의 편의성을 위해 다른 레포들과 같이 모노레포로 관리하게 되었다.

 

그 과정

1. 각 레포들을 클론 -> 생성한 모노레포에 폴더로 복사

 

2. 각 폴더의 package-lock.json 삭제

 

 나는 이전에 npm을 이용해 package install을 해왔으나, 최근에 yarn의 매력에 빠져 yarn install 방식을 사용하고자 package-lock.json을 모두 지워줬다. package-lock.json 이 있으면 후에 yarn install을 했을 때 yarn.lock 파일과 충돌날 수 있어서 지워줘야한다.    

+) package-lock.json 과 yarn.lock은 각각 npm, yarn 으로 package를 다운로드했을 때 자동으로 생성되는 파일들인데, package.json에 명시되어있는 라이브러리들의 버전은 범위가 광범위하므로, 초기 세팅 시의 라이브러리 버전을 lock 파일들에 명시해주어 협업 시 개발자들의 라이브러리 버전을 통일성있게 관리할 수 있게 도와준다. 

 

3. root에 yarn init을 이용해 package.json 생성

 

 

yarn init을 하면 커맨드창에 이것저것 question이 뜨고 괄호 안의 대답이 맞으면 엔터,  수정하고 싶다면 수정 내용을 적어주면 된다.

 

4. 생성된 package.json에 workspace 추가   

 

위와 같이 package.json을 생성해주면, 다음과 같은 양식이 생성될 것이다.

{
  "name": "CEOS-16th-Study",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/JeeeunOh/CEOS-16th-Study.git",
  "author": "JeeeunOh <0909oje@naver.com>",
  "license": "MIT",
  "private": true,
}

여기에, 모노레포로 관리할 app들의 이름을 workspaces 에 리스트로 명시해줘야한다.

이 때 app 의 이름은 각 프로젝트 소스의 package.json에 보면

{
  "name": "react-messanger-16th",
  "version": "0.1.0",
  "private": true,
  // ...
}

와 같이 name이 명시되어있는데, 이게 바로 app name이다. 이를 활용해 아래와 같이 workspace를 명시해준다.

{
  "name": "CEOS-16th-Study",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/JeeeunOh/CEOS-16th-Study.git",
  "author": "JeeeunOh <0909oje@naver.com>",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "next-netflix-16th",
    "react-messanger-16th",
    "react-todo-16th",
    "react-vote-16th"
  ]
}

5. root에서 yarn install

 

root에서 yarn install을 진행하면, 공통 모듈은 root에, 하위 폴더에서만 사용하는 모듈은 하위 폴더에 node_modules들이 생성된다!!

그럼 모노레포 구축 끝이다~~~

 

이제 각 폴더에서 yarn start ( next js 프로젝트는 npm run dev ) 를 해주면 각 프로젝트가 정상적으로 작동하는 것을 볼 수 있다 ㅎㅎ

Repository

https://github.com/JeeeunOh/CEOS-16th-Study

GitHub - JeeeunOh/CEOS-16th-Study: CEOS 16기 프론트 과제를 정리한 레포지토리