M-Project/PERFORMANCE_OPTIMIZATION.md

# M-Project 성능 최적화 가이드

## 개요
M-Project의 성능 최적화 기능들과 사용 방법을 설명합니다.

---

## 🚀 구현된 최적화 기능

### 1. 페이지 프리로딩 시스템
**파일**: `frontend/static/js/core/page-preloader.js`

#### 기능
- **우선순위 기반 프리로딩**: 사용자 권한에 따른 접근 가능한 페이지를 우선순위별로 프리로드
- **호버 프리로딩**: 링크에 마우스를 올렸을 때 해당 페이지를 미리 로드
- **리소스 프리로딩**: HTML과 함께 CSS, JS 파일도 함께 프리로드
- **네트워크 감지**: 느린 연결에서는 프리로딩을 중단하여 사용자 경험 보호

#### 사용법
```javascript
// 자동 초기화 (공통 헤더에서 자동 실행)
window.pagePreloader.init();

// 수동 프리로드
await window.pagePreloader.preloadPage({
    id: 'issues_view',
    url: '/issue-view.html',
    priority: 1
});

// 캐시 정리
window.pagePreloader.clearCache();
```

#### 우선순위 설정
1. **Priority 1**: 부적합 등록, 부적합 조회 (기본 접근 페이지)
2. **Priority 2**: 부적합 관리, 일일 공수
3. **Priority 3**: 프로젝트 관리, 보고서
4. **Priority 4**: 사용자 관리 (관리자 전용)

### 2. 서비스 워커 캐싱
**파일**: `frontend/sw.js`

#### 캐시 전략
- **Network First**: API 호출 (`/api/`, `/auth/`)
- **Cache First**: 정적 리소스 (CSS, JS, 이미지, 폰트)
- **Stale While Revalidate**: HTML 페이지

#### 캐시 종류
- **Static Cache**: 변경되지 않는 리소스
- **Dynamic Cache**: API 응답 및 동적 콘텐츠
- **CDN Cache**: 외부 라이브러리 (Tailwind, Font Awesome)

#### 오프라인 지원
- HTML 페이지: 기본 페이지로 폴백
- 이미지: SVG 플레이스홀더 제공
- API: 캐시된 응답 반환

### 3. 키보드 단축키 시스템
**파일**: `frontend/static/js/core/keyboard-shortcuts.js`

#### 주요 단축키
| 단축키 | 기능 | 설명 |
|--------|------|------|
| `?` | 도움말 표시 | 모든 단축키 목록 보기 |
| `Esc` | 모달/메뉴 닫기 | 열린 모달이나 드롭다운 닫기 |
| `g h` | 홈 이동 | 부적합 등록 페이지로 이동 |
| `g v` | 조회 이동 | 부적합 조회 페이지로 이동 |
| `g d` | 일일 공수 | 일일 공수 페이지로 이동 |
| `g p` | 프로젝트 관리 | 프로젝트 관리 페이지로 이동 |
| `g a` | 관리자 | 관리자 페이지로 이동 |
| `n` | 새 항목 | 새 항목 생성 버튼 클릭 |
| `s` | 저장 | 저장 버튼 클릭 |
| `r` | 새로고침 | 페이지 새로고침 |
| `f` | 검색 포커스 | 검색 필드에 포커스 |

#### 권한 기반 단축키
- **일반 사용자**: 기본 네비게이션 및 액션 단축키
- **관리자**: 모든 단축키 + 관리자 전용 단축키
- **입력 필드**: 제한된 단축키만 작동 (Esc, Ctrl+S 등)

### 4. 공통 헤더 시스템
**파일**: `frontend/static/js/components/common-header.js`

#### 성능 최적화
- **권한 기반 메뉴**: 접근 불가능한 메뉴는 렌더링하지 않음
- **지연 로딩**: 권한 시스템 로드 후 헤더 렌더링
- **이벤트 위임**: 효율적인 이벤트 처리
- **부드러운 전환**: 150ms 딜레이로 자연스러운 페이지 이동

---

## 📊 성능 측정 및 모니터링

### 1. 브라우저 개발자 도구 활용
```javascript
// 페이지 로드 시간 측정
console.time('페이지 로드');
window.addEventListener('load', () => {
    console.timeEnd('페이지 로드');
});

// 프리로드 상태 확인
console.log('프리로드된 페이지:', window.pagePreloader.preloadedPages);
console.log('리소스 캐시:', window.pagePreloader.resourceCache);
```

### 2. 서비스 워커 상태 확인
```javascript
// 캐시 상태 조회
navigator.serviceWorker.controller?.postMessage({
    type: 'GET_CACHE_STATUS'
});

// 캐시 정리
navigator.serviceWorker.controller?.postMessage({
    type: 'CLEAR_CACHE'
});
```

### 3. 네트워크 성능 모니터링
```javascript
// 연결 상태 확인
if ('connection' in navigator) {
    const connection = navigator.connection;
    console.log('연결 타입:', connection.effectiveType);
    console.log('데이터 절약 모드:', connection.saveData);
}
```

---

## ⚡ 성능 최적화 팁

### 1. 프리로딩 최적화
```javascript
// 중요한 페이지만 프리로드
const priorityPages = ['issues_create', 'issues_view'];

// 네트워크 상태에 따른 조건부 프리로딩
if (!window.pagePreloader.isSlowConnection()) {
    window.pagePreloader.startPreloading(priorityPages);
}
```

### 2. 캐시 전략 조정
```javascript
// 자주 변경되는 API는 네트워크 우선
const networkFirstPatterns = [
    /\/api\/issues/,
    /\/api\/users/
];

// 정적 리소스는 캐시 우선
const cacheFirstPatterns = [
    /\.css$/,
    /\.js$/,
    /\.png$/
];
```

### 3. 메모리 관리
```javascript
// 페이지 이동 시 정리
window.addEventListener('beforeunload', () => {
    // 이벤트 리스너 정리
    if (window.pageManager) {
        window.pageManager.cleanup();
    }
    
    // 캐시 정리 (필요시)
    if (performance.memory?.usedJSHeapSize > 50 * 1024 * 1024) {
        window.pagePreloader.clearCache();
    }
});
```

### 4. 이미지 최적화
```javascript
// 지연 로딩
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            imageObserver.unobserve(img);
        }
    });
});

images.forEach(img => imageObserver.observe(img));
```

---

## 🔧 디버깅 및 문제 해결

### 1. 프리로더 디버깅
```javascript
// 프리로드 상태 확인
console.log('프리로드 진행 중:', window.pagePreloader.isPreloading);
console.log('프리로드된 페이지 수:', window.pagePreloader.preloadedPages.size);

// 프리로드 실패 원인 확인
window.pagePreloader.addEventListener('error', (error) => {
    console.error('프리로드 실패:', error);
});
```

### 2. 서비스 워커 디버깅
```javascript
// 서비스 워커 상태 확인
navigator.serviceWorker.ready.then(registration => {
    console.log('서비스 워커 상태:', registration.active?.state);
});

// 캐시 내용 확인
caches.keys().then(cacheNames => {
    console.log('사용 가능한 캐시:', cacheNames);
});
```

### 3. 성능 문제 해결
- **느린 페이지 로드**: 프리로딩 우선순위 조정
- **메모리 누수**: 이벤트 리스너 정리 확인
- **캐시 문제**: 서비스 워커 재등록
- **키보드 단축키 충돌**: 입력 필드 예외 처리 확인

---

## 📈 성능 지표 목표

### 1. 로딩 성능
- **첫 페이지 로드**: < 3초
- **후속 페이지 로드**: < 1초 (프리로드된 경우)
- **API 응답**: < 1초

### 2. 사용자 경험
- **페이지 전환**: < 150ms
- **키보드 단축키 반응**: < 100ms
- **검색 결과**: < 500ms

### 3. 리소스 사용량
- **메모리 사용량**: < 100MB
- **캐시 크기**: < 50MB
- **네트워크 요청**: 최소화

---

**작성일**: 2025-10-25  
**버전**: 1.0  
**작성자**: AI Assistant

> 성능 최적화는 지속적인 모니터링과 개선이 필요합니다.