e72f9e8d26
🚀 성능 최적화 (Task 8): - React.lazy를 활용한 코드 스플리팅 구현 - React.memo, useMemo, useCallback을 통한 메모이제이션 최적화 - 초기 번들 크기 87% 감소 (470kB → 62kB) - 백그라운드 동기화 간격 최적화 (5분 → 30초) 📦 Vercel 배포 인프라 구축 (Task 9): - vercel.json 배포 설정 및 보안 헤더 구성 - GitHub Actions 자동 배포 워크플로우 설정 - 환경별 배포 및 미리보기 시스템 구현 - 자동화된 배포 스크립트 및 환경 변수 관리 - 포괄적인 배포 가이드 및 체크리스트 작성 🔧 코드 품질 개선: - ESLint 주요 오류 수정 (사용하지 않는 변수/import 정리) - 테스트 커버리지 확장 (229개 테스트 통과) - TypeScript 타입 안전성 강화 - Prettier 코드 포맷팅 적용 ⚠️ 참고: 테스트 파일의 any 타입 및 일부 경고는 향후 개선 예정 🛠️ Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
135 lines
4.3 KiB
Markdown
135 lines
4.3 KiB
Markdown
# 💰 Zellyy Finance - 개인 가계부 관리 애플리케이션
|
|
|
|
[](https://vercel.com)
|
|
[](https://github.com/hansoo./zellyy-finance/actions)
|
|
[](https://reactjs.org/)
|
|
[](https://www.typescriptlang.org/)
|
|
[](https://vitejs.dev/)
|
|
|
|
React와 TypeScript로 구축된 현대적인 개인 가계부 관리 애플리케이션입니다.
|
|
|
|
## 🚀 라이브 데모
|
|
|
|
- **프로덕션**: [zellyy-finance.vercel.app](https://zellyy-finance.vercel.app)
|
|
- **스테이징**: Preview 배포는 PR 생성 시 자동으로 생성됩니다.
|
|
|
|
## 📋 프로젝트 정보
|
|
|
|
**Lovable Project URL**: https://lovable.dev/projects/79bc38c3-bdd0-4a7f-b4db-0ec501bdb94f
|
|
|
|
## How can I edit this code?
|
|
|
|
There are several ways of editing your application.
|
|
|
|
**Use Lovable**
|
|
|
|
Simply visit the [Lovable Project](https://lovable.dev/projects/79bc38c3-bdd0-4a7f-b4db-0ec501bdb94f) and start prompting.
|
|
|
|
Changes made via Lovable will be committed automatically to this repo.
|
|
|
|
**Use your preferred IDE**
|
|
|
|
If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
|
|
|
|
The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
|
|
|
|
Follow these steps:
|
|
|
|
```sh
|
|
# Step 1: Clone the repository using the project's Git URL.
|
|
git clone <YOUR_GIT_URL>
|
|
|
|
# Step 2: Navigate to the project directory.
|
|
cd <YOUR_PROJECT_NAME>
|
|
|
|
# Step 3: Install the necessary dependencies.
|
|
npm i
|
|
|
|
# Step 4: Start the development server with auto-reloading and an instant preview.
|
|
npm run dev
|
|
```
|
|
|
|
**Edit a file directly in GitHub**
|
|
|
|
- Navigate to the desired file(s).
|
|
- Click the "Edit" button (pencil icon) at the top right of the file view.
|
|
- Make your changes and commit the changes.
|
|
|
|
**Use GitHub Codespaces**
|
|
|
|
- Navigate to the main page of your repository.
|
|
- Click on the "Code" button (green button) near the top right.
|
|
- Select the "Codespaces" tab.
|
|
- Click on "New codespace" to launch a new Codespace environment.
|
|
- Edit files directly within the Codespace and commit and push your changes once you're done.
|
|
|
|
## What technologies are used for this project?
|
|
|
|
This project is built with .
|
|
|
|
- Vite
|
|
- TypeScript
|
|
- React
|
|
- shadcn-ui
|
|
- Tailwind CSS
|
|
|
|
## 🔧 TypeScript 타입 시스템
|
|
|
|
이 프로젝트는 강력한 타입 안전성을 위해 중앙화된 타입 시스템을 구축했습니다.
|
|
|
|
### 주요 특징
|
|
|
|
- **Strict Mode**: 모든 TypeScript strict 옵션 활성화
|
|
- **중앙화된 타입**: `src/types/`에서 모든 타입 관리
|
|
- **타입 가드**: 런타임 타입 검증 지원
|
|
- **성능 최적화**: 조기 반환 및 Set 기반 검증
|
|
|
|
### 문서
|
|
|
|
- 📚 [타입 시스템 가이드](./docs/TYPE_SYSTEM_GUIDE.md) - 상세한 사용법과 구조 설명
|
|
- ⚡ [빠른 참조](./docs/TYPE_SYSTEM_QUICK_REFERENCE.md) - 자주 사용하는 패턴들
|
|
|
|
### 타입 검증
|
|
|
|
```bash
|
|
# 타입 오류 검사
|
|
npm run type-check
|
|
|
|
# 또는 직접
|
|
npx tsc --noEmit
|
|
```
|
|
|
|
## 🚀 배포 가이드
|
|
|
|
이 프로젝트는 Vercel을 통해 자동 배포됩니다.
|
|
|
|
### 자동 배포
|
|
|
|
- **프로덕션**: `main` 브랜치에 푸시하면 자동으로 프로덕션 배포
|
|
- **프리뷰**: PR 생성 시 자동으로 미리보기 배포 생성
|
|
- **스테이징**: `develop` 브랜치는 스테이징 환경으로 배포
|
|
|
|
### 배포 설정
|
|
|
|
자세한 배포 설정 방법은 [DEPLOYMENT.md](./DEPLOYMENT.md)를 참조하세요.
|
|
|
|
### 필수 환경 변수
|
|
|
|
```env
|
|
VITE_APPWRITE_ENDPOINT=https://your-appwrite-endpoint/v1
|
|
VITE_APPWRITE_PROJECT_ID=your-project-id
|
|
VITE_APPWRITE_DATABASE_ID=default
|
|
VITE_APPWRITE_TRANSACTIONS_COLLECTION_ID=transactions
|
|
VITE_APPWRITE_API_KEY=your-appwrite-api-key
|
|
VITE_DISABLE_LOVABLE_BANNER=true
|
|
```
|
|
|
|
## 🔗 커스텀 도메인
|
|
|
|
Vercel을 통해 커스텀 도메인을 쉽게 연결할 수 있습니다:
|
|
|
|
1. Vercel 프로젝트 Settings > Domains
|
|
2. 원하는 도메인 입력
|
|
3. DNS 설정 업데이트
|
|
4. SSL 인증서 자동 설정
|