koriweb
95cd8bb891
- 코드 그라운딩: 기술 주제 문서의 '적용 사례'에 실제 레포 구현 위치
(file:line)+커밋 자동 주입 (예: 문서 청킹 전략→connectai/src/retrieval/chunker.ts).
멱등 마커(CODE-GROUNDING)로 재실행 시 갱신.
- MOC: 39개 클러스터 폴더에 _MOC.md 학습지도 생성(진입점+통찰 주석).
도구: Datacollect/scripts/{code_grounding,moc_generator}.mjs
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
14 KiB
14 KiB
id, title, category, status, type, tags, updated_at
| id | title | category | status | type | tags | updated_at | ||
|---|---|---|---|---|---|---|---|---|
| moc-frontend | Frontend — 학습 지도 (MOC) | MOC | active | map-of-content |
|
2026-06-08 |
🗺️ Frontend — 학습 지도 (MOC)
이 클러스터의 377개 문서에 대한 진입점과 학습 순서. 자동 생성(moc_generator.mjs) — 재실행 시 갱신.
📚 전체 문서 (Topics)
⚠️ 문서가 많은 클러스터(377개) — 첫 글자별로 묶음. 하위 폴더로 재구성 검토 권장.
A
B
- Batching
- BEM
- BEM (Block Element Modifier)
- Branded Types for Nominal Typing
- Bridgeless New Architecture
- Buffer Allocation
- Bundle Size Optimization
C
- Cache Miss Rates
- Case Study — Kiwi.com Frontend Migration
- CesiumJS
- Chrome
- Client Components
- Client-Side Rendering (CSR)
- Code Splitting
- Codegen (GraphQL, OpenAPI, Schema-driven)
- Component Based Architecture
- Component Composition (React)
- Composables (Vue)
- Composition API (Vue 3)
- Compound Components
- Computational Geometry (Frontend)
- Computed Properties & Watchers
- Concurrent Features (React 18+)
- Concurrent Rendering
- Container Queries
- Core Web Vitals
- CPU Overhead
- Critical Rendering Path
- Critical Rendering Path (CRP)
- Cross-platform Mobile Development Frameworks
- CSS 구조 설계 방식
- CSS Grid
- CSS Grid 및 Flexbox
- CSS Media Queries
- CSS Modules
- CSSOM
- CSSOM(CSS Object Model)
- Custom Hooks
- Custom Hooks Patterns
D
- Dart
- Dart FFI (Foreign Function Interface)
- Datacollector Knowledge Hub
- Debugging Frontend Applications
- Declaration Files
- Decorators
- DefinitelyTyped
- Diffing Algorithm
- Discriminated Unions for Error Handling
- Discriminated Unions for State Modeling
- DOM (Document Object Model)
- DOM 및 CSSOM
- DOM(Document Object Model)
- Draw Call Optimization
- Dynamic Theming
E
- E commerce Platforms
- Effect TS 및 ts-brand 라이브러리 활용
- Equipment Crafting and Synthesis Engine
- Error Boundaries
- Error Handling and Stability
- ESLint Configuration
- ESLint Plugin Development
- Eugen Systems의 WARNO 시뮬레이션 개발
- Events
- Expo Router
- Eye Tracking
F
- Fabric
- Fabric Renderer
- Feature Driven Architecture
- Fiber 아키텍처 (Fiber Architecture)
- Fiber 아키텍처와 동시성 (Concurrent Rendering)
- Fiber Architecture
- Figma Tokens Studio
- Fluid Typography
- flushSync
- Flutter
- Flutter AOT Compilation (Dart)
- Flutter Impeller
- Flutter Web / Desktop
- Folder Structure Best Practices
- Frontend
- Frontend Architecture
- Frontend Architecture and Folder Structure
- Functional Programming in TypeScript
G
- Google Chrome
- GPU 가속 및 컴포지팅
- GPU Resources
- GPU WebGL 파이프라인의 미세 지연(Micro-latency) 측정 사례
- GraphQL Code Generator
- Guilty Gear Xrd Rendering Pipeline
H
- Hermes
- Hermes Engine
- Hydration (하이드레이션)
- Hydration & Progressive Rendering
- Hydration 성능 최적화
- Hydration Mismatch and SSR Debugging
I
J
- JavaScript Async and Event Loop
- JavaScript Optimization Patterns
- JavaScriptCore
- JSI (JavaScript Interface)
- JSX
- Judgment
K
L
- Lane Model
- Lanes Model
- Large Frontend Projects
- Large-scale Application Refactoring
- Layout Thrashing
- Lazy Loading
- Levels of Understanding
M
- Memory Leak Debugging in JavaScript
- Memory Leak Prevention 메모리 누수 방지
- Meta Quest Store
- Micro frontends
- Mixins
- Mobile Augmented Reality
- Modern Frontend Engineering Architecture
- Monorepo Architecture
N
- Naming Conventions
- never 타입
- Next.js Caching Architecture
- Next.js Framework
- Node.js Global Namespace Augmentation
- Nominal Typing in TypeScript
O
- OffscreenCanvas Safari 제약 사항
- OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결
- One-way Data Flow
- Opaque Types (TypeScript)
- Open-Closed Principle (OCP)
- OpenGL ES
- Opera
P
- Parser
- Pinia
- Pointer Poisoning
- Prefetching
- Principles
- Probabilistic Graphical Models
- Progressive Hydration (점진적 하이드레이션)
- Prop Drilling
- Provider & Riverpod
R
- Randomized Algorithms
- Re-renders Optimization
- React Native
- React Native 상태 관리 (Redux Toolkit, Zustand, React Query)
- React Native for Web
- React Native New Architecture
- React Native Web — Desktop
- Readonly Type
- Refactoring Techniques
- Reflow Repaint
- Reflow - Repaint 최소화 방법
- Reflow & Repaint
- Reflow 및 Repaint
- Reflow 및 Repaint 최적화
- Reflow and Repaint
- Reflow와 Repaint
- Reflow와 Repaint(리플로우와 리페인트)
- Relative Positioning
- Render Props
- Reusable Components
- Risk Orchestration
- Rollup
S
- SaaS 대시보드 및 이커머스 레이아웃 구축
- SaaS 플랫폼 및 인터랙티브 대시보드 개발
- Sanity Studio
- satisfies 연산자
- satisfies Keyword
- Satisfies Operator
- Scalable Frontend Architecture
- Scavenger 알고리즘
- Scoped Styles
- Scripts
- SCSS
- SCSS (Sass)
- Selective Hydration & Streaming
- SEO 중심의 마케팅 및 블로그 사이트 구축
- Server Actions
- Server Side Rendering (SSR)
- Server Side Rendering (SSR)
- Server State Management
- Shader Compilation Jank
- Shopify Polaris
- Skia
- Skybound — Enemy Motion, Damage Pressure, and Projectile Visual Pass
- Skybound — Miniboss Treasure Cache Reward Loop
- Skybound — Player Airframe and 8-Stage Boss Continuity Rework
- Skybound — Player Sprite Path Warning Fix
- Skybound — Skill Concept and Hangar Layout Overlap Fix
- Skybound — Skip Upgrade and Weapon Transform Reconfiguration
- Skybound — Stage Miniboss Pattern Differentiation
- Skybound — Vampire Survivors Loop and Stage Curve Preparation
- Skybound Skill Image Integration
- Skybound Stage1-3 Playtest — Balance, Bomb, Visual Diversity Pass (2026-04-26)
- Smart vs Dumb Components
- SPA (Single Page Application)
- Spectre
- Spectre and Meltdown
- startTransition
- State Management
- State Management (Pinia/Vuex)
- State Management Libraries
- State Management Libraries (Pinia/Redux)
- State Management Patterns
- Static Site Generation (SSG)
- Static Site Generation with Gatsby
- Streaming SSR
- Style Dictionary
- Style Dictionary Pipelines
- Style Registry
- styled components
- Styled Components
- Styled Components v6
- styled-components v6.3+
- Submodules
- Suspense 및 Streaming
- Suspense Boundary
T
- Threejs WebGL Rendering Optimization
- Threejs WebGPU 파티클 예제
- Throttling Debouncing
- Time Slicing
- Time Slicing
- Timestamp Queries
- Timing Attack
- Timing Attacks
- Total Blocking Time (TBT)
- TS Declaration Files
- TurboModules
- TypeScript 4.9
- TypeScript 타입 시스템 (TypeScript Type System)
- TypeScript Advanced Type System
- TypeScript API Development
- TypeScript Generics
- TypeScript Type Safety
- TypeScript Utility Types (Record Readonly)
U
V
- V8 JavaScript Engine
- vanilla-extract
- Virtual DOM
- Virtual DOM과 Reconciliation
- Vite
- Vite Build Optimization
- Vite Build System
- Vue Options API
- Vue Single-File Components (SFC)
- Vuex
W
- Web Content Accessibility Guidelines (WCAG)
- Web Worker (웹 워커)
- WebAssembly
- WebGL 2.0
- WebGL 모바일 GPU 성능 관리
- WebGL API
- WebGL Optimization
- WEBGL_multi_draw Extension
- WebGL2
- WebGPU Compute Shader
- WebGPU Compute Shaders
- WebKit
- Wonder
- Wonderland Engine
Z
가나다
- 가변 타이포그래피 (Fluid Typography)
- 가상 DOM (Virtual DOM) 및 재조정(Reconciliation)
- 가상 DOM (Virtual DOM) 및 Fiber
- 검색 엔진 최적화 (SEO)
- 검색 엔진 최적화(SEO) 대응 렌더링 전략 수립
- 게임 경제 설계
- 게임 밸런싱
- 과잉 속성 체크(EPC)
- 교집합 타입(Intersection Type)
- 기능 중심 아키텍처(Feature-Driven Architecture)
- 다크 모드 및 다중 브랜드 테마 동적 전환 시스템
- 단일 진실 공급원(Single Source of Truth)
- 단일 진실 공급원(Single Source of Truth) 구축
- 단일 페이지 애플리케이션 (SPA)
- 단일 페이지 애플리케이션(SPA) 렌더링 설계
- 단일 페이지 애플리케이션(SPA) 아키텍처 설계
- 대규모 데이터 렌더링 및 가상화 최적화
- 대규모 이커머스 플랫폼 렌더링 설계
- 대규모 콘텐츠 기반 애플리케이션 및 전자상거래 플랫폼 구축
- 대규모 프론트엔드 아키텍처(Scalable Frontend Architecture)
- 대규모 프론트엔드 프로젝트(Large Frontend Projects)
- 대수의 법칙(Law of Large Numbers)
- 동시성 렌더링 (Concurrent Rendering)
- 디자인 시스템 (Design Systems)
- 디자인 시스템 개념
- 디자인 시스템 구축
- 디자인 시스템 기반 컴포넌트 개발
- 디자인 시스템의 타이포그래피 토큰 확장 및 최적화
- 디지털 트윈 및 데이터 시뮬레이션
- 런타임 상태 검증(Runtime Validation)
- 레이아웃 스래싱 (Layout Thrashing)
- 레이아웃 Flexbox & Grid 완전 이해
- 렌더링 블로킹 방지를 위한 CSS 분할 및 로딩 최적화
- 렌더링 차단 리소스 (Render-blocking Resources)
- 리플로우 및 리페인트 (Reflow & Repaint)
- 리플로우 및 리페인트 (Reflow and Repaint)
- 리플로우 및 리페인트(Reflow & Repaint)
- 마이크로 인터랙션(Micro-interactions)
- 메인 스레드 (Main Thread)
- 모던 웹 성능 최적화(Core Web Vitals)
- 모듈식 CSS (Modular CSS)
- 모바일 우선주의 (Mobile-First) 디자인
- 모바일 퍼스트 및 다양한 디바이스 환경을 위한 반응형 레이아웃 구축
- 모바일 퍼스트(Mobile-First)
- 몬테카를로 시뮬레이션(Monte Carlo Simulation)
- 무거운 데이터 리스트 필터링 구현
- 미디어 쿼리 (Media Queries)
- 미디어 쿼리(Media Queries)
- 반응형 윈도우 리사이즈(Resize) 이벤트 처리
- 백엔드-프론트엔드 데이터 변환(Data Transformation between Backend and Frontend)
- 불필요한 리렌더링 방지
- 브라우저 렌더링 과정
- 브라우저 렌더링 과정 (Critical Rendering Path)
- 브라우저 렌더링 파이프라인(Critical Rendering Path)
- 브라우저 메모리 관리 및 최적화
- 비동기 데이터 관리
- 설정 객체 및 룩업 테이블 설계(Configuration Objects and Lookup Tables)
- 성능 및 SEO 최적화 프로젝트
- 성능 최적화(Reflow & Repaint)
- 성능 최적화가 필수적인 대규모 다중 테마 플랫폼
- 스포티파이 자율적 분대 모델 (Spotify Squad)
- 스포티파이 자율적 분대 모델 및 마이크로 프론트엔드 (Spotify Squads and Micro Frontends)
- 스포티파이(Spotify)의 스쿼드 모델 및 마이크로 프론트엔드 도입
- 시뮬레이션(Simulation)
- 시뮬레이션과 예측 모델링(Simulation and Predictive Modeling)
- 식별 가능한 유니온
- 실무에서 CSS 관리하는 방법
- 실시간 데이터 대시보드 레이아웃 조절 시스템
- 알 수 없는 외부 데이터 검증 (unknown types)
- 애니메이션 (transition / keyframes) 성능 최적화
- 에일리어싱 (Aliasing)
- 왕국 대 왕국 (KvK) 이벤트
- 웹 렌더링 전략 (CSR, SSR, SSG, ISR)
- 웹 워커 이벤트 포워딩 통신 지연 최소화 방법
- 웹 프론트엔드 성능 최적화
- 유동적 타이포그래피 (Fluid Typography)
- 유동적 타이포그래피(Fluid Typography)
- 유지보수 가능하고 확장 가능한 CSS 아키텍처 설계
- 유지보수 가능한 대규모 프론트엔드 CSS 설계
- 전력 시스템 (Power Systems) — 프론트엔드 관점
- 전자상거래 플랫폼 (E-commerce Platforms)
- 중요 렌더링 경로 (Critical Rendering Path)
- 지연 렌더링(Deferred Rendering)
- 차선 모델과 작업 우선순위 (Lane Model & Priorities)
- 철벽 수비대 인터페이스 설계 전략
- 초과 속성 검사 (Excess Property Checks)
- 컨테이너 쿼리 (Container Queries)
- 컨테이너 쿼리(Container Queries)
- 컴포넌트 기반 아키텍처
- 컴포넌트 기반 아키텍처(Component-Based Architecture)
- 컴포넌트 기반 웹 프레임워크 아키텍처 설계
- 콘텐츠 기반의 이커머스 및 뉴스 웹사이트 성능 튜닝
- 크로스 플랫폼 디자인 시스템 연동
- 크리티컬 렌더링 패스 (Critical Rendering Path)
- 클라이언트 사이드 렌더링 (CSR)
- 타이핑에 즉각 반응해야 하는 검색창 (Search as you type)
- 타입 단언(Type Assertion)
- 프론트엔드 성능 최적화 및 SEO 개선 프로젝트
- 프론트엔드 아키텍처 (Frontend Architecture)
- 프론트엔드 애플리케이션 렌더링 병목 개선
- 프론트엔드 컴포넌트 구조화
- 프론트엔드 컴포넌트 설계
- 하이드레이션 (Hydration)
- 확장 가능한 프론트엔드 아키텍처(Scalable Frontend Architecture)
- 힙 스냅샷 (Heap Snapshots)
377 docs · 자동 생성 2026-06-08