M-Project/PERFORMANCE_OPTIMIZATION.md

M-Project 성능 최적화 가이드

개요

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

---

🚀 구현된 최적화 기능

1. 페이지 프리로딩 시스템

파일: frontend/static/js/core/page-preloader.js

기능

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

사용법

// 자동 초기화 (공통 헤더에서 자동 실행)
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. 브라우저 개발자 도구 활용

// 페이지 로드 시간 측정
console.time('페이지 로드');
window.addEventListener('load', () => {
    console.timeEnd('페이지 로드');
});

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

2. 서비스 워커 상태 확인

// 캐시 상태 조회
navigator.serviceWorker.controller?.postMessage({
    type: 'GET_CACHE_STATUS'
});

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

3. 네트워크 성능 모니터링

// 연결 상태 확인
if ('connection' in navigator) {
    const connection = navigator.connection;
    console.log('연결 타입:', connection.effectiveType);
    console.log('데이터 절약 모드:', connection.saveData);
}

---

⚡ 성능 최적화 팁

1. 프리로딩 최적화

// 중요한 페이지만 프리로드
const priorityPages = ['issues_create', 'issues_view'];

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

2. 캐시 전략 조정

// 자주 변경되는 API는 네트워크 우선
const networkFirstPatterns = [
    /\/api\/issues/,
    /\/api\/users/
];

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

3. 메모리 관리

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

4. 이미지 최적화

// 지연 로딩
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. 프리로더 디버깅

// 프리로드 상태 확인
console.log('프리로드 진행 중:', window.pagePreloader.isPreloading);
console.log('프리로드된 페이지 수:', window.pagePreloader.preloadedPages.size);

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

2. 서비스 워커 디버깅

// 서비스 워커 상태 확인
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

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