모노레포(Monorepo)란, Turborepo 사용법

개인공부/etc

minseokiim 2024. 10. 2. 20:25

많은 프로젝트를 단일 저장소에서 관리하는 방식

장점 : 코드 재사용성, 버전 관리, 종속성 관리 등의 장점

(<-> 멀티레포(Multi-repo) : 전통적으로 각 프로젝트나 라이브러리마다 별도의 저장소를 가짐.)

Turbo

Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.

turbo.build

: Vercel에서 만든 모노레포 관리 도구

작업 간 의존성을 분석하고, 변경된 부분만 다시 빌드하거나 테스트하는 스마트 캐싱 기능 지원.

1. 터보레포 설치

pnpm install -g turbo / npm install -g turbo / yarn add turbo -g

1-1.

만약, 여기서 오류가 난다면 환경 변수 설정이 안됐거나 pnpm install이 안된 것,

pnpm -v 했을 때, 뜨지 않으면 그 때는 npm install -g pnpm 해주면 된다.

1-2.

나의 경우는 pnpm은 설치되어있지만, 설정이 제대로 되지 않아서 직접 설정해줬다.

pnpm -v를 하면 버전은 9.11.0으로 나왔음.

ERR_PNPM_NO_GLOBAL_BIN_DIR Unable to find the global bin directory이 떠서,

pnpm setup 을 실행해줌. (필요한 글로벌 디렉토리를 자동으로 설정해주는 명령어)

그리고도 해결 되지 않아서, pnpm config get global-bin-dir 로 확인 했더니 undefined가 떴다.

글로벌 바이너리 디렉토리가 설정되지 않은 것이기에

수동으로 pnpm config set global-bin-dir C:\Users\유저 이름\AppData\Local\pnpm 해줌.

그리고, 시스템 환경 변수 설정에 들어가서 path에 추가해주었다.

그리고 다시 pnpm install -g turbo 했더니 에러가 안떴다.

turbo --version로 확인하면 2.1.3이 떠서 정상적으로 설치된 것 확인~

2. 새 모노레포 생성하기

pnpm dlx create-turbo@latest / npx create-turbo@latest / yarn dlx create-turbo@latest 해줌.

터보레포 깃허브 레포를 클론해도 된다고 한다.

3. 실행

turbo dev 로 개발서버 실행.

4. 기타 세팅

https://kmmk808.tistory.com/239

Turborepo 안에 react 프로젝트와 next 프로젝트 만들어보기

터보레포 안에 하나는 리액트 프로젝트, 하나는 넥스트 프로젝트로 만들어볼거다. * 생성 방법1. pnpm install -g turbo해서 터보레포 글로벌로 설치해주기 2. 필요한 프로젝트 생성하기기본적으로

kmmk808.tistory.com

1. apps
ㄴ docs : 문서 관리 폴더, 기본적으로 넥스트 프로젝트
ㄴ web : 실제 서비스 될 프로덕트, 기본적으로 넥스트 프로젝트

2.packages
ㄴ eslint-config-custom : 커스텀해서 공통으로 쓸 수 있음
ㄴ tsconfig : 공통 가능, next 설정도 가능
ㄴ ui : 공통 ui 컴포넌트 만들 수 있는 패키지 폴더

+ 만든 패키지 연동하는 법 : apps/web/package.json의 dependencies에 사용하고자 하는 패키지 추가