{
  "name": "Performance Optimization Rules",
  "description": "애플리케이션 성능 최적화를 위한 규칙 및 가이드라인",
  "rules": {
    "initialLoading": {
      "metrics": {
        "ttfb": {
          "target": "< 200ms",
          "description": "Time to First Byte - 서버 응답 시작 시간"
        },
        "fcp": {
          "target": "< 1.8s",
          "description": "First Contentful Paint - 첫 콘텐츠 렌더링 시간"
        },
        "lcp": {
          "target": "< 2.5s",
          "description": "Largest Contentful Paint - 주요 콘텐츠 렌더링 시간"
        },
        "tti": {
          "target": "< 3.8s",
          "description": "Time to Interactive - 사용자 상호작용 가능 시간"
        },
        "tbt": {
          "target": "< 300ms",
          "description": "Total Blocking Time - 메인 스레드 차단 시간"
        },
        "cls": {
          "target": "< 0.1",
          "description": "Cumulative Layout Shift - 레이아웃 변동 지표"
        }
      },
      "strategies": {
        "codeOptimization": [
          "코드 분할 (Code Splitting): 경로 기반, 컴포넌트 기반",
          "트리 쉐이킹 (Tree Shaking): 미사용 코드 제거",
          "지연 로딩 (Lazy Loading): 필요한 시점에 모듈 로드"
        ],
        "assetOptimization": [
          "이미지 최적화: WebP/AVIF 형식 사용, 적절한 크기 조정",
          "폰트 최적화: WOFF2 사용, 폰트 서브셋, preload 적용",
          "자원 압축: Gzip, Brotli 압축 활성화"
        ],
        "caching": [
          "효과적인 캐시 정책 설정 (Cache-Control 헤더)",
          "정적 자산 적극 캐싱",
          "CDN 활용: 정적 자산 배포 및 캐싱"
        ],
        "serverOptimization": [
          "서버 응답 시간 개선: 데이터베이스 쿼리 최적화, 캐싱",
          "HTTP/2 또는 HTTP/3 활용",
          "필요한 경우 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 적용"
        ]
      }
    },
    "rendering": {
      "general": [
        "불필요한 렌더링 방지",
        "적절한 키(key) 사용으로 DOM 재사용 최적화",
        "가상화 적용: 긴 목록이나 테이블에 가상 스크롤 적용"
      ],
      "react": {
        "memoization": [
          "React.memo, useMemo, useCallback 적절히 사용",
          "렌더링 최적화를 위한 컴포넌트 분리",
          "상태 관리 계층화"
        ],
        "stateManagement": [
          "지역 상태와 전역 상태 적절히 분리",
          "상태 업데이트 일괄 처리",
          "불변성 유지를 위한 효율적인 패턴 사용"
        ]
      },
      "vue": {
        "reactivity": [
          "반응형 시스템 이해 및 최적화",
          "computed 속성과 watch 적절히 사용",
          "v-once, v-memo 디렉티브 활용"
        ],
        "rendering": [
          "키(key) 속성 적절히 사용",
          "불필요한 컴포넌트 래핑 피하기",
          "큰 리스트는 가상 스크롤링 적용"
        ]
      },
      "angular": {
        "changeDetection": [
          "OnPush 변경 감지 전략 적용",
          "NgZone 이해 및 최적화",
          "trackBy 함수 사용하여 목록 렌더링 최적화"
        ],
        "performance": [
          "지연 로딩 모듈 적극 활용",
          "Pure Pipes 활용",
          "AOT 컴파일러 활용"
        ]
      }
    },
    "memoryManagement": {
      "memoryLeaks": {
        "common": [
          "미사용 이벤트 리스너 제거",
          "타이머 및 인터벌 정리",
          "DOM 참조 적절히 해제"
        ],
        "closure": "클로저에 의한 의도치 않은 메모리 유지 방지",
        "observables": "구독(subscription) 명시적 해제"
      },
      "dataStructures": [
        "적절한 자료구조 선택",
        "대용량 데이터는 필요한 부분만 로드",
        "데이터 정규화 및 중복 제거"
      ],
      "garbageCollection": [
        "긴 GC 작업 방지를 위한 객체 재사용",
        "객체 풀링 패턴 고려",
        "최대 메모리 사용량 모니터링 및 관리"
      ]
    },
    "networkOptimization": {
      "requests": {
        "minimize": "HTTP 요청 최소화 (번들링, 스프라이트, 인라인)",
        "prioritize": "중요 리소스 preload/prefetch",
        "parallelize": "동시 요청 최적화 (HTTP/2 활용)"
      },
      "dataTransfer": {
        "compression": "네트워크 데이터 압축 (Gzip, Brotli)",
        "minification": "JS, CSS, HTML 최소화",
        "binaryFormats": "적절한 경우 바이너리 형식 사용 (protobuf 등)"
      },
      "api": {
        "payloadSize": "필요한 데이터만 요청/응답",
        "pagination": "대용량 데이터 페이지네이션 구현",
        "caching": "클라이언트측 캐싱 및 서버측 캐싱 활용"
      }
    },
    "bundleSize": {
      "monitoring": {
        "tools": ["Webpack Bundle Analyzer", "Lighthouse", "source-map-explorer"],
        "metrics": "초기 로드 번들 < 170KB (압축 후)",
        "tracking": "번들 크기 변화 추적 및 회귀 방지"
      },
      "optimization": {
        "dependencies": [
          "불필요한 의존성 제거",
          "경량 대안 사용 (lodash-es, date-fns 등)",
          "의존성 크기 의식적 관리"
        ],
        "codeSplitting": [
          "경로 기반 코드 분할",
          "컴포넌트 기반 코드 분할",
          "공통 청크 최적화"
        ],
        "dynamicImports": [
          "필요 시점에 동적 임포트 사용",
          "모듈 프리로딩 전략 적용",
          "중요도에 따른 로딩 우선순위 설정"
        ]
      },
      "buildOptimization": {
        "modes": [
          "개발 모드와 프로덕션 모드 구분",
          "프로덕션 빌드 최적화 활성화",
          "소스맵 전략 수립 (프로덕션에서 인라인 소스맵 지양)"
        ],
        "tools": [
          "Babel/SWC 최적화 옵션 활용",
          "트리쉐이킹 보장을 위한 모듈 구조 설계",
          "빌드 캐싱 활용"
        ]
      }
    },
    "monitoring": {
      "userMetrics": {
        "realUser": [
          "실제 사용자 성능 메트릭 수집",
          "지역별, 기기별, 네트워크별 세분화",
          "핵심 성능 지표 (Core Web Vitals) 모니터링"
        ],
        "customMetrics": [
          "비즈니스 관련 성능 지표 정의",
          "사용자 만족도와 성능 상관관계 분석",
          "주요 사용자 경로 성능 추적"
        ]
      },
      "technicalMetrics": {
        "server": [
          "API 응답 시간 모니터링",
          "서버 리소스 사용량 (CPU, 메모리, 디스크 I/O)",
          "데이터베이스 쿼리 성능"
        ],
        "client": [
          "메모리 사용량 추적",
          "프레임 레이트 & 자바스크립트 실행 시간",
          "렌더링 성능 병목 식별"
        ]
      },
      "tools": {
        "analytics": ["Google Analytics", "Adobe Analytics", "Matomo"],
        "monitoring": ["New Relic", "Datadog", "Sentry"],
        "lab": ["Lighthouse", "WebPageTest", "Chrome DevTools"]
      }
    },
    "specificOptimizations": {
      "images": {
        "formats": "WebP/AVIF 우선, PNG/JPG 폴백",
        "loading": "지연 로딩(lazy loading), 적절한 크기",
        "responsive": "이미지 srcset 및 sizes 적절히 사용"
      },
      "fonts": {
        "loading": "font-display: swap 또는 optional",
        "formats": "WOFF2 우선, 필요 시 WOFF 폴백",
        "strategies": "폰트 서브셋팅, preload 중요 폰트"
      },
      "animations": {
        "techniques": "CSS 애니메이션 우선, JS는 필요시만",
        "properties": "transform/opacity 우선 사용(합성 레이어)",
        "timing": "중요한 로딩 과정에서 무거운 애니메이션 자제"
      },
      "dataHandling": {
        "pagination": "필요한 데이터만 로드",
        "caching": "클라이언트 캐싱 적극 활용",
        "prefetching": "다음 사용자 작업 예측하여 데이터 미리 로드"
      }
    }
  }
}