🤔 왜 모노레포를 사용하는가?
이번에 진행할 프로젝트는 메인 서비스(Lily), 관리자 서비스, 디자인 시스템 총 3개를 만들 계획이라 모노레포로 프로젝를 진행하기로 결정했습니다.
모노레포에 종류가 되게 많지만 그 중 Turborepo를 선택하여 진행해보려고 합니다.
Turborepo는 Vercel에서 개발한 오픈소스 모노레포 관리 툴입니다. Turborepo는 모노레포 환경에서의 빌드, 테스트, 배포를 최적화하고 관리하는 데 도움을 주기 위해 만들어졌습니다.
Vercel에서 만들었기 때문에 Vercel로 서비스를 배포하기가 아주 간단합니다. 저는 이번에 디자인 시스템 스토리북과, 관리자 서비스를 Vercel로 배포할 계획이여서 Turborepo 사용하는 것은 적합한 선택이라고 생각합니다.
그리고 모노레포를 사용하면 장점은 통합된 코드베이스 관리, 의존성 관리 용이, 중복 코드 감소 등이 있어서 지금 상황처럼 프로젝트를 원활하게 진행하는데 큰 도움을 주죠
🛠️ Turborepo 설치 및 설정
이번 프로젝트에서는 pnpm을 사용해서 진행해보려고 합니다.
pnpm은 모노레포 환경에서 여러 패키지를 효율적으로 관리할 수 있도록 지원하는데 이는 Turborepo와 같은 모노레포 관리 툴과 잘 결합됩니다.
설치
pnpm install turbo --global
설치 후 프로젝트를 열어보면 위 사진과 같이 구성이 되어있습니다.(스토리북, 허스키, 프리티어는 추가로 설정해줘야함)
프로젝트를 설치하면 해줘야할 국룰 작업이 있죠?
Eslint + Prettier 설정
아까 모노레포를 사용하면 통합된 코드베이스 관리를 할 수 있다고 말했습니다.
모노레포를 사용하지 않으면 프로젝트마다 Eslint + Prettier를 전부 하나씩 다 설정을 해줘야합니다
하지만 저희는 그러기 귀찮으니깐 모노레포를 사용해서 모든 프로젝트에 똑같은 코드베이스 설정을 해줄 수 있습니다.
위에 사진을 보시면 packages라는 폴더가 있는데 그 폴더에는
1. eslint-config
2. typescript-config
두 가지 폴더들이 있습니다.
그 중 eslint-config에 있는 base.js를 열어보면 저희가 흔히 봤던 코드 구조가 나오는데요.
이 파일에서 저희가 적용해주고 싶은 Eslint 규칙을 추가해주시면 프로젝트에 적용이 아주 잘 된답니다.
근데 바로 밑에 있는 next.js는 무엇일까요??
결론만 말씀드리면 지금 web과 docs라는 폴더안에는 Next 프로젝트가 구성되어 있습니다. base.js에 넣은 Eslint 규칙은 모든 프로젝트에 적용이 되는 공통 규칙이고 next.js에 설정한 규칙은 web과 docs 프로젝트에만 적용되는 규칙입니다.
사진을 보면 알 수 있듯이 eslint.config.js에 next.js 파일을 가져와 적용하는 코드를 볼 수 있죠
참고로 이건 eslint 9버전으로 설정한 코드입니다. 8버전은 코드가 다르니 그건 알아서 찾아서 잘 해보시길 👍
이제 남은 건 프리티어 설정인데 이건 뭐 너무 쉽습니다. 프로젝트 루트에 .prettierrc 파일 하나 만들어주고 규칙 설정해주고 vscode 폴더 있을텐데 거기에 아래 코드 넣어주면 끝나더라구요. 그럼 이제 넘어갈게요
{
"eslint.workingDirectories": [
{
"mode": "auto"
}
],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}허스키 설정
허스키 설정도 해줬는데 이건 예전 글에서 말했던 내용이랑 별 다를 거 없어서 넘어갈게요
허스키 설정 글 링크
🧩 packages / ui
여태 참고했던 사진을 보면 알 수 있듯이 packages/ui 위치에 폴더 하나가 있습니다.
구조상 여기에 UI 컴포넌트를 만들어서 web과 docs에서 사용할 수 있게 해주는 역할을 하는 것 같죠?
web 프로젝트에 있는 package.json을 보니 잘 가져와서 사용하고 있습니다.
이건 어떤 원리로 이렇게 사용할 수 있는 것일까요??
원리
Turborepo는 ui 폴더를 로컬 패키지로 간주하고, 이를 모노레포의 다른 프로젝트(예: apps/project1, apps/project2)에서 의존성으로 추가하여 사용할 수 있게 합니다.
ui 폴더는 npm 패키지처럼 작동합니다.
보통 ui 폴더 안에 package.json이 있으며, 이 파일을 통해 의존성, 빌드 설정, 이름 등을 정의합니다.
예: @repo/ui라는 이름의 패키지를 정의한다면, 다른 프로젝트에서 이를 의존성으로 추가할 수 있습니다.
말이 어렵긴한데 실제로 설정하는건 어렵지않으니 나중에 한 번 해보시면 좋을 거 같습니다.
그리고 저기 나오는 workwpace는 무엇일까요??
워크스페이스(Workspace)는 모노레포(Monorepo) 환경에서 여러 프로젝트(패키지)를 한 곳에서 관리할 수 있게 하는 구조입니다.
이를 통해 각각의 프로젝트(패키지)가 서로 독립적으로 작동하면서도 공유되는 의존성이나 코드를 쉽게 재사용할 수 있습니다.
packages:
- "apps/*"
- "packages/*"pnpm-workspace.yaml이라는 파일이 있는데 여기서 워크스페이스를 설정해줄 수 있습니다.
apps/: apps 폴더 아래의 모든 디렉토리를 워크스페이스로 간주.
packages/: packages 폴더 아래의 모든 디렉토리를 워크스페이스로 간주.
요약을 해보자면
1.워크스페이스(Workspace)는 모노레포에서 여러 프로젝트(패키지)를 한곳에서 관리하며, 코드와 의존성을 쉽게 재사용할 수 있는 구조입니다.
2. pnpm-workspace.yaml 파일에서 apps/와 packages/로 워크스페이스 경로를 설정해 각 디렉토리를 관리 대상으로 지정합니다.
3. ui 폴더는 package.json을 통해 로컬 npm 패키지처럼 정의되며, 다른 프로젝트에서 이를 의존성으로 추가해 사용할 수 있습니다.
이런 이유들로 ui 패키지에 있는 것들을 쉽게 가져와 사용할 수 있는 것입니다.
하지만 저희는 이렇게 하면 안됩니다.
왜냐하면 서비스마다 다른 서비스를 이용하여 배포해야하기 때문이죠
배포 계획
- 메인 서비스 - AWS RCS로 배포
- 관리자 서비스 - Vecel로 배포
- 디자인 시스템 - npm에 배포
- 스토리북 - Vecel로 배포
지금처럼 아무 설정 안하고 Vercel에 이 모노레포를 통째로 배포를 하게 되면 Vercel에서 app 폴더안에 있는 서비스들을 각각의 도메인으로 배포를 해줍니다.
Vercel를 이용하여 전부 배포할 생각이면 진짜 이거만큼 개꿀 기능이 없는데 저는 위와 같은 배포 계획을 세웠기 때문에 ui 패키지를 바꿔줘야합니다.
어떻게 바꿀지와 왜 바꿔야하는지는 다음 글에서 다루겠습니다.
긴 글 읽어주셔서 감사합니다.
