Monorepo Turborepo pnpm Tailwind atom 컴포넌트 - rlsdf/my-test GitHub Wiki
일반적으로 여러 프로젝트(web-a, web-b, utils 등)를 각각의 디렉토리로 분리해서 사용하는 경우, 다음과 같은 문제점이 있습니다:
- 공통 코드(utils 등)를 상대경로로 import해야 함 → 유지보수 어려움
- 앱마다 node_modules와 package.json이 따로 존재 → 중복 설치, 버전 충돌
- 공통 코드를 바꿔도 어느 앱에 영향이 갔는지 알기 어려움
Monorepo는 하나의 저장소에서 여러 앱과 패키지를 함께 관리할 수 있는 구조로, 다음과 같은 이점을 가집니다:
- 공통 코드와 앱 간 종속성 추적이 명확
- 빌드/테스트를 변경된 패키지만 실행
- 팀 협업, CI/CD, 코드 재사용에 최적화
Turborepo는 Vercel에서 만든 모노레포 빌드 도구입니다.
- turbo.json을 통해 앱/패키지 간 의존성 그래프를 구성
- 캐싱 시스템을 통해 이미 빌드된 결과는 재사용
- turbo run build --filter=web-a처럼 변경된 것만 빌드 가능
- GitHub Actions 또는 Vercel과 연동 시 속도 극대화
pnpm은 빠르고 효율적인 JavaScript 패키지 매니저로, npm이나 yarn의 대안입니다.
- 디스크에 패키지를 한 번만 설치하고 하드링크로 재사용
- 설치 속도 빠름 (특히 monorepo 환경에서 강력함)
- workspace 기능으로 모듈 간 연결이 간편함
- pnpm install, pnpm -F web-a build 등 범위 지정 실행 가능
기능 | 설명 |
---|---|
앱/패키지 연결 | pnpm workspace로 간편한 모듈 공유 |
빌드 최적화 | turborepo가 캐시와 병렬 빌드 처리 |
CI/CD 속도 향상 | 변경된 패키지만 자동 빌드 |
협업 효율 ↑ | 종속성과 변경 내역이 명확함 |
이 조합은 스케일업에 강한 구조를 제공하며, 공통 컴포넌트 및 유틸리티 관리에 매우 적합합니다.
Tailwind는 유틸리티 클래스 기반의 CSS 프레임워크입니다. 하지만 다음과 같은 이유로 atom 컴포넌트화가 중요합니다:
이유 | 설명 |
---|---|
반복 방지 |
<button class="px-4 py-2 bg-blue-500 text-white rounded"> 를 계속 쓰기보다 <PrimaryButton /> 으로 추상화 |
일관된 디자인 | 버튼, 입력창 등 스타일이 디자인 시스템으로 통일됨 |
재사용성 ↑ | 공통 스타일을 한 곳에서 관리하고 변경 가능 |
유지보수 편리 | Tailwind 클래스가 분산되지 않고 모듈화됨 |
// 공통 컴포넌트 (packages/ui/PrimaryButton.tsx)
export const PrimaryButton = ({ children, ...props }) => (
<button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700" {...props}>
{children}
</button>
);
→ 이렇게 하면 모든 앱에서 PrimaryButton 하나만 가져다 써도 되므로 생산성과 일관성 모두 향상됩니다.
- Monorepo는 규모가 있는 프로젝트에서 코드 재사용과 유지보수에 탁월합니다.
- Turborepo + pnpm은 빠르고 안정적인 모노레포 운영 구조를 제공합니다.
- Tailwind CSS와 atom 컴포넌트 조합은 UI 일관성과 재사용성을 보장합니다.