# | 제목 | 카테고리 | 참고 스킬 | 실행 | 난이도 | 상태 |
|---|---|---|---|---|---|---|
| 1 | AI UI Patterns (스트리밍 메시지 렌더러) | React | ai-ui-patterns | Sandpack | Medium | - |
| 5 | Client-side Rendering (UserProfile) | Rendering | client-side-rendering | Sandpack | Easy | - |
| 6 | 커맨드 패턴 (Editor Undo/Redo) | Behavioral | command-pattern | Worker | Medium | - |
| 7 | Compound Pattern (Accordion) | Structural | compound-pattern | Sandpack | Medium | - |
| 8 | Compression (CompressionStream API) | Performance | compression | Sandpack | Medium | - |
| 9 | Dynamic Import (React.lazy + Suspense) | Performance | dynamic-import | Sandpack | Easy | - |
| 11 | 팩토리 패턴 (ShapeFactory) | Creational | factory-pattern | Worker | Easy | - |
| 12 | 플라이웨이트 패턴 (Character Forge) | Structural | flyweight-pattern | Worker | Hard | - |
| 13 | HOC Pattern (withLoading) | Structural | hoc-pattern | Sandpack | Medium | - |
| 14 | Hooks Pattern (useToggle) | Behavioral | hooks-pattern | Sandpack | Easy | - |
| 15 | Import On Interaction (Hover Prefetch + Click Load) | Performance | import-on-interaction | Sandpack | Medium | - |
| 16 | Import On Visibility (IntersectionObserver + React.lazy) | Performance | import-on-visibility | Sandpack | Medium | - |
| 17 | Incremental Static Rendering (RevalidatingPost) | Rendering | incremental-static-rendering | Sandpack | Medium | - |
| 18 | Islands Architecture (Island) | Rendering | islands-architecture | Sandpack | Medium | - |
| 19 | useRafBatched (rAF Coalescing Hook) | Performance | js-performance-patterns | Sandpack | Medium | - |
| 20 | Loading Sequence (PriorityScheduler) | Performance | loading-sequence | Worker | Medium | - |
| 21 | 중재자 패턴 (ChatRoom) | Behavioral | mediator-pattern | Worker | Medium | - |
| 22 | 믹스인 패턴 (Serializable + Loggable) | Structural | mixin-pattern | Worker | Medium | - |
| 23 | 모듈 패턴 (createCounter) | Structural | module-pattern | Worker | Easy | - |
| 24 | 옵저버 패턴 | Behavioral | observer-pattern | Worker | Easy | - |
| 26 | Prefetch (usePrefetch hook) | Performance | prefetch | Sandpack | Easy | - |
| 27 | Preload (<PreloadResource /> 컴포넌트) | Performance | preload | Sandpack | Easy | - |
| 28 | Presentational/Container Pattern (UserList) | React | presentational-container-pattern | Sandpack | Easy | - |
| 29 | Progressive Hydration (HydrateOnVisible) | Rendering | progressive-hydration | Sandpack | Medium | - |
| 30 | 프로토타입 패턴 | Creational | prototype-pattern | Worker | Easy | - |
| 31 | Provider Pattern (ThemeProvider + useTheme) | Structural | provider-pattern | Sandpack | Easy | - |
| 32 | 프록시 패턴 | Structural | proxy-pattern | Worker | Medium | - |
| 33 | PRPL 파이프라인 | Performance | prpl | Worker | Hard | - |
| 34 | React 19 Actions (useAction 훅) | React | react-2026 | Sandpack | Medium | - |
| 35 | Slot Composition (Card.Header / Body / Footer) | React | react-composition-2026 | Sandpack | Medium | - |
| 36 | useResource 훅 (캐시 + 디덥) | React | react-data-fetching | Sandpack | Medium | - |
| 37 | List 렌더 최적화 (memo + useCallback) | React | react-render-optimization | Sandpack | Hard | - |
| 38 | HydrationBoundary (우선순위 기반 하이드레이션) | Rendering | react-selective-hydration | Sandpack | Hard | - |
| 39 | React Server Components (Suspense Boundary) | Rendering | react-server-components | Sandpack | Hard | - |
| 40 | Render Props (Toggle with children-as-function) | Structural | render-props-pattern | Sandpack | Medium | - |
| 41 | 라우트 기반 코드 스플리팅 | Performance | route-based | Worker | Medium | - |
| 42 | Server-Side Rendering (mini renderToString) | Rendering | server-side-rendering | Sandpack | Medium | - |
| 43 | 싱글톤 패턴 | Creational | singleton-pattern | Worker | Easy | - |
| 44 | Static vs Dynamic Import (적재적소 분리) | Performance | static-import | Sandpack | Medium | - |
| 45 | Static Rendering (generateStaticPages) | Rendering | static-rendering | Sandpack | Easy | - |
| 46 | Streaming SSR (Suspense per Chunk) | Rendering | streaming-ssr | Sandpack | Hard | - |
| 47 | 서드파티 스크립트 오케스트레이터 | Performance | third-party | Worker | Medium | - |
| 48 | 데드 코드 분석기 | Performance | tree-shaking | Worker | Medium | - |