- @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>
2.0 KiB
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 (개발/테스트 환경)