Monorepo Turborepo pnpm Tailwind atom 컴포넌트 - rlsdf/my-test GitHub Wiki

📁 Monorepo를 사용하는 이유

🆚 일반 디렉토리 구조 vs Monorepo

일반적으로 여러 프로젝트(web-a, web-b, utils 등)를 각각의 디렉토리로 분리해서 사용하는 경우, 다음과 같은 문제점이 있습니다:

  • 공통 코드(utils 등)를 상대경로로 import해야 함 → 유지보수 어려움
  • 앱마다 node_modules와 package.json이 따로 존재 → 중복 설치, 버전 충돌
  • 공통 코드를 바꿔도 어느 앱에 영향이 갔는지 알기 어려움

✅ Monorepo의 장점

Monorepo는 하나의 저장소에서 여러 앱과 패키지를 함께 관리할 수 있는 구조로, 다음과 같은 이점을 가집니다:

  • 공통 코드와 앱 간 종속성 추적이 명확
  • 빌드/테스트를 변경된 패키지만 실행
  • 팀 협업, CI/CD, 코드 재사용에 최적화

🚀 Turborepo란?

Turborepo는 Vercel에서 만든 모노레포 빌드 도구입니다.

✨ 주요 특징

  • turbo.json을 통해 앱/패키지 간 의존성 그래프를 구성
  • 캐싱 시스템을 통해 이미 빌드된 결과는 재사용
  • turbo run build --filter=web-a처럼 변경된 것만 빌드 가능
  • GitHub Actions 또는 Vercel과 연동 시 속도 극대화

📦 pnpm이란?

pnpm은 빠르고 효율적인 JavaScript 패키지 매니저로, npm이나 yarn의 대안입니다.

✅ pnpm의 장점

  • 디스크에 패키지를 한 번만 설치하고 하드링크로 재사용
  • 설치 속도 빠름 (특히 monorepo 환경에서 강력함)
  • workspace 기능으로 모듈 간 연결이 간편함
  • pnpm install, pnpm -F web-a build 등 범위 지정 실행 가능

🧩 Turborepo + pnpm = 최고의 모노레포 조합

기능 설명
앱/패키지 연결 pnpm workspace로 간편한 모듈 공유
빌드 최적화 turborepo가 캐시와 병렬 빌드 처리
CI/CD 속도 향상 변경된 패키지만 자동 빌드
협업 효율 ↑ 종속성과 변경 내역이 명확함

이 조합은 스케일업에 강한 구조를 제공하며, 공통 컴포넌트 및 유틸리티 관리에 매우 적합합니다.

🎨 Tailwind CSS + Atom(유틸리티 컴포넌트)의 필요성

Tailwind는 유틸리티 클래스 기반의 CSS 프레임워크입니다. 하지만 다음과 같은 이유로 atom 컴포넌트화가 중요합니다:

🤔 왜 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 일관성과 재사용성을 보장합니다.
⚠️ **GitHub.com Fallback** ⚠️