@kood/claude-code 0.6.6 → 0.7.0

package/templates/.claude/skills/tauri-react-best-practices/rules/bundle-cargo-profile.md

@@ -0,0 +1,96 @@
+---
+title: Cargo Release Profile Optimization
+impact: HIGH
+impactDescription: reduces binary size by 30-50%
+tags: bundle, cargo, optimization, release, size
+---
+
+# Cargo Release 프로필 최적화
+
+## 왜 중요한가
+
+Tauri 앱의 최종 바이너리 크기는 사용자의 다운로드 시간, 설치 크기, 메모리 사용량에 직접 영향을 미칩니다. Cargo의 기본 release 설정은 빠른 컴파일을 위해 최적화되지만, 더 공격적인 최적화 옵션을 적용하면 바이너리 크기를 **30-50%까지 줄일 수 있습니다**.
+
+## ❌ 잘못된 패턴
+
+**기본 release 프로필 사용 (Cargo.toml):**
+
+```toml
+# 기본 설정 (최적화 안함)
+[package]
+name = "app"
+version = "0.1.0"
+
+# release 프로필 설정 없음
+```
+
+**결과:**
+- 바이너리 크기: ~15MB (최적화 전)
+- 컴파일 시간: 빠름
+- 디버그 심볼 포함
+
+## ✅ 올바른 패턴
+
+**최적화된 release 프로필 (Cargo.toml):**
+
+```toml
+[package]
+name = "app"
+version = "0.1.0"
+
+[profile.release]
+# 코드 생성 유닛을 1개로 통합 (LLVM 최적화 극대화)
+codegen-units = 1
+
+# Link-Time Optimization 활성화 (전체 프로그램 최적화)
+lto = true
+
+# 크기 최적화 모드 ("s" = size, "z" = aggressive size)
+opt-level = "s"
+
+# panic을 abort로 변경 (unwinding 코드 제거)
+panic = "abort"
+
+# 디버그 심볼 제거
+strip = true
+```
+
+**각 옵션 설명:**
+
+| 옵션 | 설명 | 크기 영향 |
+|------|------|-----------|
+| `codegen-units = 1` | 병렬 컴파일 비활성화, LLVM 최적화 극대화 | ~10-15% 감소 |
+| `lto = true` | 전체 프로그램 최적화 (Link-Time Optimization) | ~15-20% 감소 |
+| `opt-level = "s"` | 속도 대신 크기 최적화 | ~10-15% 감소 |
+| `panic = "abort"` | panic unwinding 코드 제거 | ~5-10% 감소 |
+| `strip = true` | 디버그 심볼 제거 | ~10-20% 감소 |
+
+**예상 결과:**
+- 바이너리 크기: ~7-10MB (최적화 후)
+- 컴파일 시간: 느림 (2-3배)
+- 프로덕션 배포용
+
+## 추가 컨텍스트
+
+**컴파일 시간 vs 크기:**
+- 개발 중에는 기본 설정 사용 (빠른 반복)
+- CI/CD 프로덕션 빌드에서만 최적화 프로필 사용
+
+**opt-level 옵션:**
+- `"s"` (size): 크기 최적화, 합리적인 성능 유지
+- `"z"` (aggressive size): 극단적 크기 최적화, 일부 성능 희생
+- 대부분의 앱에서는 `"s"` 권장
+
+**LTO 옵션:**
+- `lto = true`: 전체 최적화 (가장 느림, 가장 작음)
+- `lto = "thin"`: 부분 최적화 (빠름, 적당한 크기)
+- 프로덕션에서는 `lto = true` 권장
+
+**참고:**
+- Tauri 공식 가이드: [App Size Optimization](https://tauri.app/v2/guides/building/app-size/)
+- Rust Cargo Book: [Profiles](https://doc.rust-lang.org/cargo/reference/profiles.html)
+
+**영향도:**
+- 크기: HIGH (30-50% 감소)
+- 컴파일 시간: HIGH (2-3배 증가)
+- 런타임 성능: NEUTRAL (opt-level="s"일 때)

package/templates/.claude/skills/tauri-react-best-practices/rules/bundle-frontend-treeshake.md

@@ -0,0 +1,242 @@
+---
+title: Frontend Tree-Shaking Verification
+impact: MEDIUM
+impactDescription: removes unused code from bundle
+tags: bundle, tree-shaking, vite, optimization, frontend
+---
+
+# 프론트엔드 Tree-Shaking 확인
+
+## 왜 중요한가
+
+Tree-shaking은 **사용하지 않는 코드를 번들에서 자동으로 제거**하는 최적화 기법입니다. 하지만 **side effect가 있는 import**나 **default export**를 사용하면 tree-shaking이 작동하지 않아 불필요한 코드가 번들에 포함됩니다.
+
+## ❌ 잘못된 패턴
+
+**Side effect가 있는 import (전체 모듈 번들링):**
+
+```typescript
+// ❌ lodash 전체 (~500KB)가 번들에 포함
+import _ from 'lodash'
+
+function App() {
+  const result = _.chunk([1, 2, 3, 4], 2)
+  // chunk 함수만 사용하지만 전체 라이브러리 포함
+}
+```
+
+**Default export 사용 (tree-shaking 불가):**
+
+```typescript
+// ❌ utils.ts
+export default {
+  add: (a: number, b: number) => a + b,
+  subtract: (a: number, b: number) => a - b,
+  multiply: (a: number, b: number) => a * b,
+  divide: (a: number, b: number) => a / b
+}
+
+// App.tsx
+import utils from './utils'
+
+function App() {
+  const sum = utils.add(1, 2) // add만 사용해도 전체 객체 포함
+}
+```
+
+**package.json에 sideEffects 설정 없음:**
+
+```json
+{
+  "name": "my-app",
+  "version": "1.0.0"
+  // sideEffects 설정 없음 - bundler가 안전하게 제거 못함
+}
+```
+
+## ✅ 올바른 패턴
+
+**Named export + 직접 import로 tree-shaking 활성화:**
+
+```typescript
+// ✅ 필요한 함수만 번들에 포함 (~5KB)
+import { chunk } from 'lodash-es'
+
+function App() {
+  const result = chunk([1, 2, 3, 4], 2)
+  // chunk 함수만 번들에 포함
+}
+```
+
+**Named export 사용 (tree-shaking 가능):**
+
+```typescript
+// ✅ utils.ts
+export const add = (a: number, b: number) => a + b
+export const subtract = (a: number, b: number) => a - b
+export const multiply = (a: number, b: number) => a * b
+export const divide = (a: number, b: number) => a / b
+
+// App.tsx
+import { add } from './utils'
+
+function App() {
+  const sum = add(1, 2) // add만 번들에 포함
+}
+```
+
+**package.json에 sideEffects 명시:**
+
+```json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "sideEffects": false
+}
+```
+
+**CSS import가 있는 경우:**
+
+```json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}
+```
+
+**Vite 설정으로 tree-shaking 강화:**
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    // minify를 활성화하여 dead code 제거
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        // 사용하지 않는 코드 제거
+        dead_code: true,
+        drop_console: true, // console.log 제거
+        drop_debugger: true, // debugger 제거
+        pure_funcs: ['console.log', 'console.info'] // 특정 함수 제거
+      }
+    },
+    rollupOptions: {
+      treeshake: {
+        // aggressive tree-shaking
+        moduleSideEffects: 'no-external',
+        preset: 'smallest'
+      }
+    }
+  }
+})
+```
+
+**번들 분석으로 tree-shaking 확인:**
+
+```bash
+# Vite Bundle Visualizer 설치
+npm install -D rollup-plugin-visualizer
+```
+
+```typescript
+// vite.config.ts
+import { visualizer } from 'rollup-plugin-visualizer'
+
+export default defineConfig({
+  plugins: [
+    visualizer({
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+      template: 'treemap' // or 'sunburst', 'network'
+    })
+  ]
+})
+```
+
+```bash
+# 빌드 후 자동으로 stats.html 열림
+npm run build
+```
+
+## 추가 컨텍스트
+
+**Tree-shaking 작동 조건:**
+
+| 조건 | 설명 |
+|------|------|
+| **ESM** | ES Module (import/export) 사용 필수 |
+| **Named Export** | default export 대신 named export |
+| **No Side Effects** | package.json에 sideEffects: false |
+| **Static Analysis** | 동적 import는 tree-shaking 불가 |
+
+**라이브러리별 tree-shaking 지원:**
+
+| 라이브러리 | CommonJS | ESM | Tree-shakable | 대안 |
+|-----------|----------|-----|---------------|------|
+| `lodash` | ✅ | ❌ | ❌ | `lodash-es` 사용 |
+| `lodash-es` | ❌ | ✅ | ✅ | - |
+| `moment` | ✅ | ❌ | ❌ | `date-fns` 또는 `dayjs` |
+| `date-fns` | ❌ | ✅ | ✅ | - |
+| `axios` | ✅ | ✅ | ⚠️ | 전체 번들 (~20KB) |
+| `ky` | ❌ | ✅ | ✅ | axios 대안 (~5KB) |
+
+**Side effect가 있는 코드 예시:**
+
+```typescript
+// ❌ Side effect 있음 - tree-shaking 불가
+export const API_URL = 'https://api.example.com'
+console.log('API initialized') // 부수 효과!
+
+export function fetchData() {
+  return fetch(API_URL)
+}
+```
+
+```typescript
+// ✅ Side effect 없음 - tree-shaking 가능
+export const API_URL = 'https://api.example.com'
+
+export function fetchData() {
+  return fetch(API_URL)
+}
+```
+
+**동적 import vs 정적 import:**
+
+```typescript
+// ✅ 정적 import - tree-shaking 가능
+import { chunk } from 'lodash-es'
+
+// ❌ 동적 import - tree-shaking 불가
+const { chunk } = await import('lodash-es')
+```
+
+**Rollup 플러그인 확인 (Vite 내부 사용):**
+
+```bash
+# Vite는 내부적으로 Rollup 사용
+# tree-shaking은 Rollup의 기본 기능
+```
+
+**효과:**
+- lodash → lodash-es: 500KB → 5KB (100배 감소)
+- moment → date-fns: 300KB → 20KB (15배 감소)
+- 전체 프로젝트: 평균 10-30% 번들 크기 감소
+
+**참고:**
+- Vite Tree-shaking: [Build Optimizations](https://vitejs.dev/guide/features.html#build-optimizations)
+- Webpack Tree-shaking: [Documentation](https://webpack.js.org/guides/tree-shaking/)
+- Rollup Tree-shaking: [Guide](https://rollupjs.org/guide/en/#tree-shaking)
+
+**영향도:**
+- 크기: MEDIUM (10-30% 감소)
+- 빌드 시간: NEUTRAL
+- 런타임 성능: POSITIVE (작은 번들 = 빠른 로드)

package/templates/.claude/skills/tauri-react-best-practices/rules/bundle-lazy-components.md

@@ -0,0 +1,255 @@
+---
+title: Lazy Load Heavy Components
+impact: HIGH
+impactDescription: splits bundle and loads on demand
+tags: bundle, lazy, code-splitting, suspense, react
+---
+
+# 무거운 컴포넌트 Lazy 로드
+
+## 왜 중요한가
+
+차트, 에디터, PDF 뷰어 등 무거운 컴포넌트를 메인 번들에 포함하면 **초기 로드 시간이 크게 증가**합니다. React의 `lazy()`와 `Suspense`를 사용하면 필요할 때만 로드하여 **초기 번들 크기를 크게 줄일 수 있습니다**.
+
+## ❌ 잘못된 패턴
+
+**무거운 컴포넌트 직접 import (메인 번들에 포함):**
+
+```tsx
+// ❌ 메인 번들: 2.5MB (react-chartjs-2 + chart.js 포함)
+import { Line } from 'react-chartjs-2'
+import { Chart as ChartJS, registerables } from 'chart.js'
+
+ChartJS.register(...registerables)
+
+function Dashboard() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <Line data={chartData} /> {/* 500KB 라이브러리 */}
+    </div>
+  )
+}
+```
+
+**다른 무거운 라이브러리 예시:**
+
+```tsx
+// ❌ 메인 번들: 3.2MB
+import { Editor } from '@monaco-editor/react' // ~1.8MB
+import { PDFViewer } from '@react-pdf/renderer' // ~800KB
+import { DataGrid } from '@mui/x-data-grid' // ~600KB
+
+function App() {
+  return (
+    <div>
+      <Editor />
+      <PDFViewer />
+      <DataGrid />
+    </div>
+  )
+}
+```
+
+**번들 분석:**
+```
+main.js: 3.2 MB (gzipped: 1.1 MB)
+- Monaco Editor: 1.8 MB
+- React PDF: 800 KB
+- MUI DataGrid: 600 KB
+```
+
+## ✅ 올바른 패턴
+
+**React.lazy()로 코드 스플리팅:**
+
+```tsx
+// ✅ 메인 번들: 200KB (차트 제외)
+import { lazy, Suspense } from 'react'
+
+// 동적 import로 별도 chunk 생성
+const ChartComponent = lazy(() => import('./components/ChartComponent'))
+
+function Dashboard() {
+  const [showChart, setShowChart] = useState(false)
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <button onClick={() => setShowChart(true)}>
+        Show Chart
+      </button>
+
+      {showChart && (
+        <Suspense fallback={<div>Loading chart...</div>}>
+          <ChartComponent data={chartData} />
+        </Suspense>
+      )}
+    </div>
+  )
+}
+```
+
+**별도 파일로 분리 (components/ChartComponent.tsx):**
+
+```tsx
+// ChartComponent.tsx - 별도 chunk로 빌드됨
+import { Line } from 'react-chartjs-2'
+import { Chart as ChartJS, registerables } from 'chart.js'
+
+ChartJS.register(...registerables)
+
+export default function ChartComponent({ data }: { data: any }) {
+  return <Line data={data} />
+}
+```
+
+**여러 무거운 컴포넌트 lazy 로드:**
+
+```tsx
+import { lazy, Suspense } from 'react'
+
+const Editor = lazy(() => import('@monaco-editor/react'))
+const PDFViewer = lazy(() => import('./components/PDFViewer'))
+const DataGrid = lazy(() => import('./components/DataGridWrapper'))
+
+function App() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading editor...</div>}>
+        <Editor />
+      </Suspense>
+
+      <Suspense fallback={<div>Loading PDF viewer...</div>}>
+        <PDFViewer />
+      </Suspense>
+
+      <Suspense fallback={<div>Loading data grid...</div>}>
+        <DataGrid />
+      </Suspense>
+    </div>
+  )
+}
+```
+
+**번들 분석:**
+```
+main.js: 200 KB (gzipped: 70 KB)
+ChartComponent-[hash].js: 500 KB (gzipped: 180 KB)
+Editor-[hash].js: 1.8 MB (gzipped: 600 KB)
+PDFViewer-[hash].js: 800 KB (gzipped: 250 KB)
+DataGrid-[hash].js: 600 KB (gzipped: 200 KB)
+```
+
+**Route-based code splitting (추가 최적화):**
+
+```tsx
+// App.tsx
+import { lazy, Suspense } from 'react'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+
+// 라우트 레벨에서 lazy loading
+const Dashboard = lazy(() => import('./pages/Dashboard'))
+const Settings = lazy(() => import('./pages/Settings'))
+const Analytics = lazy(() => import('./pages/Analytics'))
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Suspense fallback={<div>Loading page...</div>}>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/analytics" element={<Analytics />} />
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
+  )
+}
+```
+
+## 추가 컨텍스트
+
+**Lazy Loading 대상 라이브러리:**
+
+| 라이브러리 | 크기 | Lazy 로드 권장 |
+|-----------|------|----------------|
+| `@monaco-editor/react` | ~1.8MB | ✅ 필수 |
+| `react-chartjs-2` + `chart.js` | ~500KB | ✅ 권장 |
+| `@react-pdf/renderer` | ~800KB | ✅ 권장 |
+| `@mui/x-data-grid` | ~600KB | ✅ 권장 |
+| `react-quill` | ~400KB | ✅ 권장 |
+| `katex` (수식 렌더링) | ~300KB | ✅ 권장 |
+| `prismjs` (코드 하이라이팅) | ~200KB | ⚠️ 선택 |
+
+**Suspense fallback 패턴:**
+
+```tsx
+// 스켈레톤 UI로 로딩 상태 표시
+function ChartSkeleton() {
+  return (
+    <div className="animate-pulse">
+      <div className="h-64 bg-gray-200 rounded" />
+    </div>
+  )
+}
+
+<Suspense fallback={<ChartSkeleton />}>
+  <ChartComponent />
+</Suspense>
+```
+
+**Preloading 패턴 (UX 개선):**
+
+```tsx
+import { lazy, Suspense } from 'react'
+
+const ChartComponent = lazy(() => import('./ChartComponent'))
+
+function Dashboard() {
+  const handleMouseEnter = () => {
+    // 마우스 호버 시 미리 로드
+    import('./ChartComponent')
+  }
+
+  return (
+    <button onMouseEnter={handleMouseEnter}>
+      Show Chart
+    </button>
+  )
+}
+```
+
+**Vite 설정 확인:**
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // 특정 라이브러리를 별도 chunk로 분리
+          'chart-lib': ['react-chartjs-2', 'chart.js'],
+          'editor-lib': ['@monaco-editor/react'],
+          'pdf-lib': ['@react-pdf/renderer']
+        }
+      }
+    }
+  }
+})
+```
+
+**효과:**
+- 초기 번들: 3.2MB → 200KB (16배 감소)
+- 초기 로드 시간: 3초 → 0.5초 (6배 빠름)
+- 차트 표시 시 추가 로드: ~500KB (병렬 로드 가능)
+
+**참고:**
+- React Documentation: [Code-Splitting](https://react.dev/reference/react/lazy)
+- Vite Guide: [Code Splitting](https://vitejs.dev/guide/features.html#code-splitting)
+
+**영향도:**
+- 크기: HIGH (초기 번들 1-3MB 감소)
+- 초기 로드 시간: HIGH (2-6배 빠름)
+- UX: POSITIVE (페이지 즉시 표시)