Skip to content

Latest commit

 

History

History
184 lines (132 loc) · 4.49 KB

README.md

File metadata and controls

184 lines (132 loc) · 4.49 KB

인프런 워밍업 클럽 스터디 3기 - 풀스택 (Next.js + Supabase)

이 프로젝트는 인프런 워밍업 클럽 스터디 3기 - 풀스택 (Next.js + Supabase) 스터디 저장소 입니다.

This is a monorepo project containing multiple independent services built with Turborepo. Each service runs independently while sharing common UI components and configurations.

🏗 프로젝트 구조

├── apps/
│   ├── todo/        # Todo 애플리케이션 (포트: 3000)
│   ├── dropbox/     # Dropbox 클론 (포트: 3001)
│   ├── netflix/     # Netflix 클론 (포트: 3002)
│   └── instagram/   # Instagram 클론 (포트: 3003)
├── packages/
│   ├── ui/          # 공유 UI 컴포넌트
│   └── supabase/     # Supabase 관련
├── package.json
└── turbo.json

🚀 주요 기능

  • 독립적인 서비스: 각 애플리케이션은 독자적인 포트에서 실행되며 독립적으로 개발/배포 가능
  • 공유 UI 컴포넌트: 모든 애플리케이션에서 공통 UI 컴포넌트 사용
  • 기술 유연성: 일관성을 유지하면서 각 서비스별로 다른 기술 스택 사용 가능
  • 효율적인 개발: Turborepo의 캐싱과 병렬 실행 기능 활용
  • 확장 가능한 아키텍처: 각 서비스를 독립적으로 확장 가능

🛠 기술 스택

  • 프레임워크: Next.js
  • 클라이언트 상태관리: Jotai
  • 서버 상태관리: Tanstack-query v5
  • UI 라이브러리: shadcn/ui
  • 스타일링: Tailwind CSS
  • 패키지 매니저: pnpm
  • 빌드 시스템: Turborepo

📦 설치 방법

  1. 의존성 설치:
pnpm install

🚀 서비스 실행 방법

Supabase 설정

  1. Supabase 프로젝트 생성

  2. 환경 변수 설정:

# 루트/.env (여기서 루트는 turbo.json 파일이 있는 경로)
# apps/(각 프로젝트)/.env.local
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_SUPABASE_SERVICE_ROLE=your-service-role
NEXT_SUPABASE_DB_PASSWORD=your-password
NEXT_PUBLIC_STORAGE_BUCKET=your-bucket

  1. 데이터베이스 스키마:

    • Todo 서비스: todo 테이블
    • Dropbox 클론: minibox스토리지
    • Netflix 클론: TBD
    • Instagram 클론: TBD

  2. 타입 생성:

pnpm supabase gen types typescript --project-id your-project-id > packages/supabase/src/types.ts

개발 모드

모든 서비스 실행:

pnpm dev

특정 서비스만 실행:

# Todo 애플리케이션
pnpm --filter todo dev  # http://localhost:3000

# Dropbox 클론
pnpm --filter dropbox dev  # http://localhost:3001

# Netflix 클론
pnpm --filter netflix dev  # http://localhost:3002

# Instagram 클론
pnpm --filter instagram dev  # http://localhost:3003

프로덕션 빌드

모든 서비스 빌드:

pnpm build

특정 서비스 빌드:

pnpm --filter [서비스-이름] build

🔧 새로운 컴포넌트 추가

shadcn/ui 컴포넌트 추가:

# UI 패키지에 컴포넌트 추가
pnpm --filter @next-inflearn/ui dlx shadcn@latest add [컴포넌트-이름]

📚 공유 컴포넌트 사용법

서비스에서 공유 컴포넌트 가져오기:

import { Button } from "@workspace/ui/components/button";

🌐 서비스 URL

📝 개발 가이드라인

  1. 컴포넌트 개발

    • 공유 컴포넌트는 packages/ui에 위치
    • 서비스별 컴포넌트는 각 앱 디렉토리에 위치

  2. 스타일링

    • Tailwind CSS를 사용하여 일관된 스타일링
    • UI 패키지에 정의된 디자인 시스템 준수

  3. 상태 관리

    • 각 서비스는 독립적인 상태 관리 솔루션 사용 가능
    • 선택한 솔루션은 서비스의 README에 문서화

🔄 CI/CD

Turborepo의 파이프라인 설정을 통한 효율적인 빌드:

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "outputs": []
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false
    }
  }
}