Files
zellyy-finance/docs/02_기술_문서/02_기술스택.md
hansoo 3934ab933f fix: Clerk 패키지 설치 및 Vite 빌드 설정 수정
- @clerk/clerk-react 패키지 설치 추가
- Vite external 설정에서 Clerk 번들링 허용으로 변경
- ChunkLoadError 복구 시스템 Playwright 테스트 추가
- Clerk CDN 실패 시나리오 검증 및 Mock 인증 폴백 시스템 확인

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-14 14:12:40 +09:00

2.0 KiB

기술 스택

Zellyy Finance 프로젝트 개발에 사용된 전체 기술 스택을 정리합니다.

Frontend

  • 언어: TypeScript, JavaScript
  • 프레임워크: React 18.x
  • 번들러/빌드 도구: Vite
  • UI 라이브러리: Shadcn UI, Radix UI
  • 스타일링: Tailwind CSS
  • 라우팅: React Router DOM
  • 상태 관리: React Context, @tanstack/react-query
  • 폼 관리: React Hook Form (@hookform/resolvers)
  • 알림: Radix UI Toast, 사용자 정의 토스트 훅

Backend

  • Backend-as-a-Service: Supabase (Cloud)
  • 인증/인가: Supabase Auth
  • 데이터베이스: Supabase Database (PostgreSQL)
  • 스토리지: Supabase Storage
  • API: Supabase Client Library (PostgREST, Realtime)

Mobile (Cross-platform)

  • 플랫폼: Capacitor
  • 패키지: @capacitor/core, @capacitor/cli, @capacitor/android, @capacitor/ios
  • 플러그인: Keyboard, Splash Screen 등

Utilities & Tools

  • 코드 스타일 및 검사: ESLint
  • HTTP 클라이언트: @supabase/supabase-js, fetch
  • 데이터 페칭: @tanstack/react-query
  • UUID 생성: uuid (@types/uuid)

배포 및 운영

  • 개발 서버: Vite dev server
  • 패키지 매니저: npm

개발 환경 및 도구

  • IDE: Visual Studio Code
  • 버전 관리: Git (GitHub)

테스트 및 품질 관리

  • Unit/Integration 테스트: Jest + React Testing Library 또는 Vitest
  • E2E 테스트: Cypress 또는 Playwright

코드 품질 및 포맷팅

  • Prettier
  • Husky + lint-staged + commitlint
  • TypeScript strict 모드

CI/CD

  • GitHub Actions 또는 Gitea Actions: lint → test → build → deploy 자동화
  • Drone CI (Gitea 연동): CI/CD 파이프라인 자동화
  • 커버리지 리포트 업로드

문서화

  • Storybook (UI 컴포넌트 카탈로그)
  • OpenAPI/Swagger (API 문서 자동 생성)

보안

  • Dependabot, Snyk (dependency 스캔)
  • 환경변수 관리: dotenv, Vault

성능 및 PWA

  • Lighthouse 성능 측정
  • Service Worker (오프라인, 푸시 지원)

국제화 (i18n)

  • react-i18next 등

컨테이너화

  • Dockerfile, docker-compose (개발/테스트 환경)