c231d5be65
주요 변경사항: • Clerk 인증 시스템 통합 및 설정 • Supabase 데이터베이스 스키마 설계 및 적용 • JWT 기반 Row Level Security (RLS) 정책 구현 • 기존 Appwrite 인증을 Clerk로 완전 교체 기술적 개선: • 무한 로딩 문제 해결 - Index.tsx 인증 로직 수정 • React root 마운팅 오류 수정 - main.tsx 개선 • CORS 설정 추가 - vite.config.ts 수정 • Sentry 에러 모니터링 통합 추가된 컴포넌트: • AuthGuard: 인증 보호 컴포넌트 • SignIn/SignUp: Clerk 기반 인증 UI • ClerkProvider: Clerk 설정 래퍼 • EnvTest: 개발환경 디버깅 도구 데이터베이스: • user_profiles, transactions, budgets, category_budgets 테이블 • Clerk JWT 토큰 기반 RLS 정책 • 자동 사용자 프로필 생성 및 동기화 Task Master: • Task 11.1, 11.2, 11.4 완료 • 프로젝트 관리 시스템 업데이트 Note: ESLint 정리는 별도 커밋에서 진행 예정 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
74 lines
6.9 KiB
Plaintext
74 lines
6.9 KiB
Plaintext
# Task ID: 13
|
|
# Title: 고급 번들 최적화 및 포괄적 성능 모니터링 시스템
|
|
# Status: pending
|
|
# Dependencies: 10, 11
|
|
# Priority: medium
|
|
# Description: Webpack Bundle Analyzer를 활용하여 74개 dependencies를 정리하고, 고도화된 코드 스플리팅과 Tree shaking을 적용하며, Sentry 계정 설정부터 실제 연동까지 완전한 성능 지표 추적 및 사용자 행동 분석 시스템을 구축합니다.
|
|
# Details:
|
|
1. Sentry.io 계정 및 프로젝트 설정 - Sentry.io 계정 생성 및 React 프로젝트 설정, DSN 키 발급 및 환경 변수 구성, 소스맵 업로드 설정으로 정확한 에러 추적 2. 고급 번들 분석 및 최적화 - Webpack Bundle Analyzer로 74개 dependencies 상세 분석 및 20% 이상 번들 크기 감소, 중복 패키지 제거 및 polyfill 최적화 3. 고도화된 코드 스플리팅 구현 - Dynamic import를 활용한 라우트별 청크 분할, 컴포넌트 레벨 지연 로딩, Critical CSS 분리 4. Tree shaking 고급 최적화 - sideEffects 설정 최적화, Dead code elimination 강화, ES6 모듈 구조 재정비 5. Sentry 성능 모니터링 완전 연동 - Real User Monitoring (RUM) 설정 및 실제 데이터 수집 테스트, Core Web Vitals 추적, 페이지별 로딩 성능 분석 6. 사용자 행동 분석 시스템 - 커스텀 이벤트 트래킹 (거래 등록, 예산 설정, 카테고리 변경), 사용자 플로우 분석, 오류율 및 이탈률 추적 7. 성능 대시보드 및 알림 설정 - Sentry Performance 대시보드 커스터마이징, 이메일/Slack 알림 규칙 설정 (성능 저하, 에러율 임계값), 주간/월간 성능 리포트 자동화 8. 릴리즈 추적 및 배포 모니터링 - Git 연동을 통한 릴리즈 추적, 배포별 성능 비교, 이슈와 커밋 연결 9. Progressive 로딩 전략 - 이미지 지연 로딩 개선, 컴포넌트 Skeleton UI 추가, Intersection Observer API 활용 10. CDN 최적화 및 캐싱 전략 - 정적 자산 CDN 배포, Browser caching 정책 설정, Service Worker 캐싱 전략 수립
|
|
|
|
# Test Strategy:
|
|
Sentry 계정 연동 및 실제 에러/성능 데이터 수집 확인, 번들 분석 전후 크기 비교 및 30% 이상 감소 검증, 페이지별 로딩 시간 측정 (First Contentful Paint, Largest Contentful Paint 개선 확인), Lighthouse 성능 점수 90점 이상 달성, Sentry에서 수집되는 성능 데이터 정확성 검증 (사용자 세션, 트랜잭션 추적), 사용자 행동 분석 이벤트 정상 수집 확인, 다양한 네트워크 환경에서 로딩 성능 테스트 (3G, 4G, WiFi), 메모리 사용량 프로파일링 및 최적화 전후 비교, 실제 사용자 환경에서 Core Web Vitals 지표 모니터링 (CLS, FID, LCP), 에러 추적 및 알림 시스템 동작 확인, 릴리즈별 성능 비교 및 회귀 탐지, 소스맵 업로드 후 정확한 스택 트레이스 표시 확인
|
|
|
|
# Subtasks:
|
|
## 1. Sentry.io 계정 설정 및 프로젝트 초기 구성 [pending]
|
|
### Dependencies: None
|
|
### Description: Sentry.io 계정 생성, React 프로젝트 설정, DSN 키 발급
|
|
### Details:
|
|
Sentry.io에 계정을 생성하고, React 프로젝트를 등록하여 DSN 키를 발급받습니다. 환경 변수 파일에 DSN을 설정하고 기본 Sentry 클라이언트를 초기화합니다.
|
|
|
|
## 2. 소스맵 업로드 설정 및 에러 추적 정확성 확보 [pending]
|
|
### Dependencies: None
|
|
### Description: 빌드 프로세스에 소스맵 업로드 설정을 추가하여 정확한 에러 위치 추적
|
|
### Details:
|
|
Vite 빌드 과정에서 소스맵을 생성하고 Sentry CLI를 통해 업로드하도록 설정합니다. 이를 통해 프로덕션 환경에서 발생하는 에러의 정확한 소스 위치를 추적할 수 있습니다.
|
|
|
|
## 3. 번들 분석 및 74개 dependencies 최적화 [pending]
|
|
### Dependencies: None
|
|
### Description: Webpack Bundle Analyzer를 사용하여 의존성 분석 및 20% 이상 번들 크기 감소
|
|
### Details:
|
|
현재 74개의 dependencies를 상세 분석하여 중복 패키지 제거, 사용하지 않는 라이브러리 정리, polyfill 최적화를 통해 번들 크기를 대폭 감소시킵니다.
|
|
|
|
## 4. 고도화된 코드 스플리팅 및 동적 임포트 구현 [pending]
|
|
### Dependencies: None
|
|
### Description: 라우트별 청크 분할과 컴포넌트 레벨 지연 로딩 적용
|
|
### Details:
|
|
React.lazy와 dynamic import를 활용하여 페이지별로 코드를 분할하고, 자주 사용되지 않는 컴포넌트는 지연 로딩을 적용합니다. Critical CSS를 별도로 분리하여 초기 로딩 성능을 개선합니다.
|
|
|
|
## 5. Tree shaking 최적화 및 Dead code elimination [pending]
|
|
### Dependencies: None
|
|
### Description: sideEffects 설정 최적화 및 ES6 모듈 구조 개선
|
|
### Details:
|
|
package.json의 sideEffects 필드를 올바르게 설정하고, 사용하지 않는 코드를 자동으로 제거하도록 빌드 설정을 최적화합니다. ES6 모듈 구조를 재정비하여 tree shaking 효율성을 극대화합니다.
|
|
|
|
## 6. Sentry 성능 모니터링 및 Real User Monitoring 설정 [pending]
|
|
### Dependencies: None
|
|
### Description: 실제 사용자 환경에서 성능 데이터 수집 및 Core Web Vitals 추적
|
|
### Details:
|
|
Sentry의 Performance Monitoring과 RUM을 설정하여 실제 사용자 환경에서 발생하는 성능 데이터를 수집합니다. Core Web Vitals (LCP, FID, CLS) 지표를 추적하고 페이지별 로딩 성능을 분석합니다.
|
|
|
|
## 7. 커스텀 이벤트 트래킹 및 사용자 행동 분석 [pending]
|
|
### Dependencies: None
|
|
### Description: 비즈니스 중요 액션들에 대한 트래킹 설정
|
|
### Details:
|
|
거래 등록, 예산 설정, 카테고리 변경 등 핵심 사용자 액션에 대한 커스텀 이벤트를 설정합니다. 사용자 플로우 분석과 이탈률 추적을 통해 UX 개선 포인트를 식별합니다.
|
|
|
|
## 8. 성능 대시보드 커스터마이징 및 알림 설정 [pending]
|
|
### Dependencies: None
|
|
### Description: Sentry 대시보드 구성 및 이메일/Slack 알림 규칙 설정
|
|
### Details:
|
|
Sentry Performance 대시보드를 프로젝트 요구사항에 맞게 커스터마이징하고, 성능 저하나 에러율 임계값 초과 시 이메일/Slack으로 알림을 받도록 설정합니다.
|
|
|
|
## 9. 릴리즈 추적 및 배포 모니터링 시스템 구축 [pending]
|
|
### Dependencies: None
|
|
### Description: Git 연동을 통한 릴리즈 추적 및 배포별 성능 비교
|
|
### Details:
|
|
Git과 연동하여 각 릴리즈를 추적하고, 배포별 성능 변화를 모니터링합니다. 이슈와 커밋을 연결하여 문제 발생 시 빠른 원인 파악이 가능하도록 설정합니다.
|
|
|
|
## 10. Progressive 로딩 및 CDN 최적화 전략 구현 [pending]
|
|
### Dependencies: None
|
|
### Description: 이미지 지연 로딩, Skeleton UI 추가 및 캐싱 전략 수립
|
|
### Details:
|
|
Intersection Observer API를 활용한 이미지 지연 로딩 개선, 컴포넌트별 Skeleton UI 추가, 정적 자산의 CDN 배포 및 브라우저 캐싱 정책을 설정합니다.
|
|
|