docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
@@ -1,4 +1,4 @@
|
||||
# [[Atomic Design]]
|
||||
# [[Atomic Design|Atomic Design]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Atomic Design(아토믹 디자인)은 브래드 프로스트(Brad Frost)가 고안한 디자인 방법론으로, 사용자 인터페이스(UI)를 응집력 있는 전체이자 부분의 집합으로 동시에 생각할 수 있게 해주는 멘탈 모델입니다 [1-3]. 이 방법론은 인터페이스를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)라는 5개의 계층적 단계로 나누어 효과적이고 의도적인 디자인 시스템을 구축하도록 돕습니다 [4, 5]. React와 같은 모던 컴포넌트 아키텍처와 결합하여 일관성을 강제하고, 디자인 시스템의 재사용성을 높이며, 확장 가능한 폴더 구조를 구축하는 데 널리 활용됩니다 [6-8].
|
||||
@@ -22,8 +22,8 @@ Atomic Design(아토믹 디자인)은 브래드 프로스트(Brad Frost)가 고
|
||||
* 성공적인 엔터프라이즈 팀들은 원자 단위의 순수함과 재사용성을 유지하기 위해 UI 라이브러리 계층에는 Atomic Design을 활용하고, 비즈니스 로직이 들어가는 애플리케이션 코드에는 기능 분할 설계(Feature-Sliced Design, FSD) 등 기능 기반 구조를 혼합하여 설계합니다 [10, 27].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Component-Based Design]], [[Feature-Sliced Design (FSD)]], [[Compound Components]], [[Design Systems]]
|
||||
- **Projects/Contexts:** [[React Frontend Architecture]], [[Reusable UI Component Libraries]]
|
||||
- **Related Topics:** [[Component-Based Design|Component-Based Design]], [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD)]], [[Compound Components|Compound Components]], [[Design Systems|Design Systems]]
|
||||
- **Projects/Contexts:** [[React Frontend Architecture|React Frontend Architecture]], [[Reusable UI Component Libraries|Reusable UI Component Libraries]]
|
||||
- **Contradictions/Notes:** 소스에 따르면 Atomic Design은 시각적 일관성과 재사용성을 달성하는 데는 매우 강력하지만, 복잡한 비즈니스 로직을 가진 컴포넌트를 이 5가지의 엄격한 범주에 억지로 끼워 맞추려다 보면 어려움에 직면할 수 있다는 한계도 지적됩니다 [10]. 이에 대한 보완책으로 Headless UI나 Compound Components 패턴이 현대 프론트엔드 환경에서 함께 권장됩니다 [28, 29].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Automatic Batching을 통한 React 18 성능 최적화]]
|
||||
# [[Automatic Batching을 통한 React 18 성능 최적화|Automatic Batching을 통한 React 18 성능 최적화]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Automatic Batching은 React 18에서 도입된 성능 최적화 기능으로, 여러 상태(state) 업데이트를 단일 리렌더링으로 묶어서 처리합니다 [1-3]. 이전 버전과 달리 프로미스(Promises), `setTimeout`, 비동기 작업 등 업데이트 출처에 관계없이 모든 상태 변경을 일괄 처리하여 불필요한 리렌더링을 방지합니다 [4-6]. 이를 통해 Virtual DOM의 비교(diffing) 작업을 최소화하고 애플리케이션의 성능과 UI 응답성을 크게 향상시킵니다 [1, 4, 7].
|
||||
@@ -20,8 +20,8 @@ Automatic Batching은 React 18에서 도입된 성능 최적화 기능으로,
|
||||
성능 최적화를 극대화하려면 관련된 업데이트를 같은 이벤트 내에 그룹화하고 함수형 상태 업데이트(`setState(prev => new)`)를 사용하는 것이 좋습니다 [14]. 예상치 못한 리렌더링이 발생한다면 타사 라이브러리가 React의 이벤트 시스템을 우회하고 있지 않은지 확인해야 하며, React DevTools Profiler를 통해 상호작용에 따른 렌더링 횟수와 업데이트 원인을 디버깅하고 모니터링할 수 있습니다 [15-17].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** `[[Virtual DOM]]`, `[[flushSync]]`, `[[startTransition]]`, `[[Concurrent Rendering]]`, `[[useMemo / useCallback]]`
|
||||
- **Projects/Contexts:** `[[데이터 집약적 대시보드 성능 최적화]]`, `[[React 18 애플리케이션 마이그레이션]]`
|
||||
- **Related Topics:** `[[Virtual DOM|Virtual DOM]]`, `[[flushSync|flushSync]]`, `[[startTransition|startTransition]]`, `[[Concurrent Rendering|Concurrent Rendering]]`, `useMemo / useCallback`
|
||||
- **Projects/Contexts:** `데이터 집약적 대시보드 성능 최적화`, `React 18 애플리케이션 마이그레이션`
|
||||
- **Contradictions/Notes:** 자동 배칭은 대부분의 경우 렌더링 성능을 개선하지만, 즉각적인 DOM 반영이 필요한 예외 상황에서는 방해가 될 수 있습니다. 이 경우 `flushSync`를 사용해 강제로 배칭을 해제할 수 있으나, 이를 남용할 경우 배칭으로 얻는 성능상 이점이 무효화될 수 있으므로 극히 제한적으로 사용해야 한다고 경고하고 있습니다 [11, 12, 14].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Building Reusable UI Components]]
|
||||
# [[Building Reusable UI Components|Building Reusable UI Components]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
재사용 가능한 UI 컴포넌트는 여러 프로젝트와 위치에서 코드를 크게 수정하지 않고도 사용할 수 있는 독립적이고 이식성(Portable)과 예측 가능성(Predictable)이 뛰어난 UI 구성 요소입니다 [1]. 이는 단일 책임을 가지며 명확한 API(Props)와 접근성(Accessibility)을 갖추어 확장 가능하고 일관성 있는 디자인 시스템을 구축하는 핵심 역할을 합니다 [2, 3]. 최신 React 생태계에서는 복잡성을 줄이기 위해 단순한 Prop 전달을 넘어서, 컴파운드 컴포넌트나 헤드리스 컴포넌트와 같은 고급 합성 패턴을 활용하여 재사용성을 극대화합니다 [4, 5].
|
||||
@@ -25,8 +25,8 @@
|
||||
* 구조를 캡슐화하면서도 클래스 이름이나 스타일 Prop을 주입할 수 있는 훅을 노출하여, 코드를 포크(Fork)하지 않고도 여러 제품 스킨이나 다크 모드 테마에 유연하게 대응하도록 설계해야 합니다 [17, 18].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Compound Components]], [[Headless Components]], [[Atomic Design]], [[Design Tokens]]
|
||||
- **Projects/Contexts:** [[Shopify Polaris]] (재사용 가능한 컴포넌트와 접근성을 제공하여 일관된 앱 UI를 구축하는 쇼피파이의 디자인 시스템 [19, 20]), [[Uber Base Web]] (다양한 요구사항에 대응하기 위해 모든 하위 요소의 스타일과 기능을 제어할 수 있는 'Overrides' 패턴을 구현한 React 컴포넌트 라이브러리 사례 [21, 22])
|
||||
- **Related Topics:** [[Compound Components|Compound Components]], [[Headless Components|Headless Components]], [[Atomic Design|Atomic Design]], [[Design Tokens|Design Tokens]]
|
||||
- **Projects/Contexts:** [[Shopify Polaris|Shopify Polaris]] (재사용 가능한 컴포넌트와 접근성을 제공하여 일관된 앱 UI를 구축하는 쇼피파이의 디자인 시스템 [19, 20]), [[Uber Base Web|Uber Base Web]] (다양한 요구사항에 대응하기 위해 모든 하위 요소의 스타일과 기능을 제어할 수 있는 'Overrides' 패턴을 구현한 React 컴포넌트 라이브러리 사례 [21, 22])
|
||||
- **Contradictions/Notes:** 컴파운드 컴포넌트는 뛰어난 레이아웃 구성의 자유도를 제공하지만 [10], 지나친 자유도는 UX 일관성을 해칠 수 있으며, 단순하고 구조가 고정된 컴포넌트(예: 버튼, 아이콘)에 사용할 경우 불필요한 추상화와 유지보수 비용만 증가시키게 되므로 상황에 맞게 적용해야 합니다 [23-25].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS Architecture]]
|
||||
# [[CSS Architecture|CSS Architecture]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 아키텍처는 과거의 단순한 시각적 장식 계층에서 벗어나, 대규모 프론트엔드 프로젝트의 확장성과 유지보수성을 보장하기 위한 엄격한 엔지니어링 시스템입니다 [1]. 애플리케이션이 복잡해짐에 따라 흔히 발생하는 전역(Global) 네임스페이스 충돌과 'CSS 비대화(Bloat)' 같은 기술적 부채를 방지하는 것을 핵심 목적으로 합니다 [1, 2]. 현대의 CSS 설계는 BEM과 같은 수동적인 네이밍 규칙에서 출발하여, CSS Modules, Tailwind CSS와 같이 스코프(Scope)를 격리하고 모듈화를 강제하는 자동화 및 유틸리티 기반 접근법으로 진화했습니다 [3-5].
|
||||
@@ -16,8 +16,8 @@ CSS 아키텍처는 과거의 단순한 시각적 장식 계층에서 벗어나,
|
||||
최근의 엔터프라이즈 팀들은 단일 기술에 얽매이지 않고, 레이아웃과 간격 배치 등 속도와 일관성이 중요한 부분에는 Tailwind CSS를 사용하고, 고도로 복잡한 컴포넌트 스타일링에는 CSS Modules나 SCSS를 결합하는 하이브리드 접근법을 취하기도 합니다 [21-23]. 또한, 폰트 크기나 색상 등을 플랫폼에 종속되지 않는 '디자인 토큰(Design Tokens)'으로 추상화하여 관리함으로써 디자인 시스템과 CSS 아키텍처를 하나로 통합합니다 [24, 25].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[BEM (Block Element Modifier)]], [[CSS Modules]], [[Tailwind CSS]], [[Design Tokens]], [[Feature-Sliced Design (FSD)]]
|
||||
- **Projects/Contexts:** [[대규모 엔터프라이즈 프론트엔드 프로젝트]], [[컴포넌트 기반 아키텍처 (React, Next.js)]], [[디자인 시스템 구축]]
|
||||
- **Related Topics:** [[BEM (Block Element Modifier)|BEM (Block Element Modifier)]], [[CSS Modules|CSS Modules]], [[Tailwind CSS|Tailwind CSS]], [[Design Tokens|Design Tokens]], [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD)]]
|
||||
- **Projects/Contexts:** 대규모 엔터프라이즈 프론트엔드 프로젝트, 컴포넌트 기반 아키텍처 (React, Next.js), [[디자인 시스템 구축|디자인 시스템 구축]]
|
||||
- **Contradictions/Notes:**
|
||||
- CSS 설계에서 BEM은 이름 충돌을 방지하는 훌륭한 수단으로 소개되지만 [3], 최근 모던 프론트엔드 생태계에서는 CSS Modules가 클래스 이름의 격리를 자동으로 해결해주기 때문에 BEM의 수동적인 네이밍 컨벤션은 더 이상 필수적이지 않다는 시각이 존재합니다 [17, 26, 27].
|
||||
- Tailwind CSS는 빠른 개발 속도와 일관된 디자인 시스템을 장점으로 내세우지만 [19], 동시에 HTML 마크업이 지나치게 길어지며 과거의 '인라인 스타일(Inline CSS)'로 퇴보하는 것 같아 추상화 방식에 동의하지 않는다는 개발자들의 비판적인 의견도 분명하게 대립하고 있습니다 [20, 28, 29].
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS Container Queries]]
|
||||
# [[CSS Container Queries|CSS Container Queries]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS Container Queries(컨테이너 쿼리)는 전체 뷰포트(브라우저 창)의 크기가 아닌, 컴포넌트가 속한 부모 컨테이너의 가용 공간을 기준으로 스타일과 레이아웃을 조정하는 강력한 CSS 기능입니다 [1-3]. 이는 좁은 사이드바에 위치한 카드와 넓은 메인 화면에 위치한 카드가 동일한 뷰포트 너비 환경에서도 각기 다른 형태를 가져야 하는 기존 미디어 쿼리(Media Queries)의 근본적인 한계를 해결해 줍니다 [1, 4]. 결과적으로 웹 디자인의 패러다임을 페이지 수준에서 컴포넌트 수준으로 전환시키며, 2026년 기준 모듈식 반응형 디자인 및 디자인 시스템 구축을 위한 필수적인 표준 기술로 자리 잡았습니다 [1, 5, 6].
|
||||
@@ -17,8 +17,8 @@ CSS Container Queries(컨테이너 쿼리)는 전체 뷰포트(브라우저 창)
|
||||
과거에는 실험적인 고급 기술이었으나 2024년 이후 모든 최신 브라우저에서 온전히 지원되며 프로덕션 환경에서 안전하게 사용할 수 있습니다 [1]. 2026년 현재, 이커머스의 다중 패널 레이아웃이나 공간 제약이 많은 SaaS 대시보드에서 데이터 테이블을 카드 스택으로 유연하게 변환하는 등, 자바스크립트에 의존하지 않고도 컴포넌트 수준의 복잡한 반응형 동작을 처리하는 기본 관행(Default practice)이 되었습니다 [5, 7, 13-15].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[미디어 쿼리 (Media Queries)]], [[반응형 웹 디자인 (Responsive Web Design)]], [[디자인 시스템 (Design Systems)]], [[모듈식 컴포넌트 (Modular Components)]]
|
||||
- **Projects/Contexts:** [[SaaS 대시보드 및 이커머스 레이아웃 구축]], [[가변 타이포그래피 (Fluid Typography)]]
|
||||
- **Related Topics:** [[미디어 쿼리 (Media Queries)|미디어 쿼리 (Media Queries)]], [[반응형 웹 디자인 (Responsive Web Design)|반응형 웹 디자인 (Responsive Web Design)]], [[디자인 시스템 (Design Systems)|디자인 시스템 (Design Systems)]], [[모듈식 컴포넌트 (Modular Components)|모듈식 컴포넌트 (Modular Components)]]
|
||||
- **Projects/Contexts:** [[SaaS 대시보드 및 이커머스 레이아웃 구축|SaaS 대시보드 및 이커머스 레이아웃 구축]], [[가변 타이포그래피 (Fluid Typography)|가변 타이포그래피 (Fluid Typography)]]
|
||||
- **Contradictions/Notes:** 컨테이너 쿼리는 미디어 쿼리를 완전히 대체하는 것이 아닙니다. 미디어 쿼리가 디바이스나 뷰포트 너비에 대응하는 전역적(페이지 수준) 레이아웃을 관리한다면, 컨테이너 쿼리는 "뷰포트 중심에서 컴포넌트 중심"으로 관점을 전환하여 개별 요소 내부의 지역적인 공간 적응을 전담함으로써 상호 보완적으로 작동합니다 [1, 3, 6].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS Grid 및 Flexbox]]
|
||||
# [[CSS Grid 및 Flexbox|CSS Grid 및 Flexbox]]
|
||||
|
||||
## 📌 Brief 신Summary
|
||||
CSS Flexbox와 CSS Grid는 웹 페이지의 요소들을 배치하고 정렬하기 위해 도입된 최신 CSS 레이아웃 모듈입니다 [1-3]. Flexbox는 행(Row)이나 열(Column) 중 하나의 방향으로 요소를 배치하는 1차원 레이아웃에 특화되어 있으며, CSS Grid는 행과 열을 동시에 제어하는 2차원 레이아웃 시스템입니다 [4-6]. 이 두 기술은 과거의 float이나 복잡한 위치 지정(positioning) 방식을 대체하여, 예측 가능하고 유지보수가 용이한 반응형 디자인을 구축하는 핵심 도구로 사용됩니다 [7-9].
|
||||
@@ -23,8 +23,8 @@ CSS Flexbox와 CSS Grid는 웹 페이지의 요소들을 배치하고 정렬하
|
||||
* 이러한 하이브리드 접근 방식은 불필요한 래퍼(Wrapper) 요소의 중첩을 줄여 DOM 구조를 가볍게 만들고, 브라우저 렌더링 성능과 코드의 유지보수성을 크게 향상시킵니다 [35, 37-39].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[반응형 디자인]], [[CSS 아키텍처]], [[BEM]]
|
||||
- **Projects/Contexts:** [[대규모 프론트엔드 아키텍처 최적화]], [[컴포넌트 기반 UI/UX 설계]]
|
||||
- **Related Topics:** [[반응형 디자인|반응형 디자인]], CSS 아키텍처, [[BEM|BEM]]
|
||||
- **Projects/Contexts:** 대규모 프론트엔드 아키텍처 최적화, 컴포넌트 기반 UI/UX 설계
|
||||
- **Contradictions/Notes:** Flexbox와 CSS Grid는 서로를 대체하는 기술이 아닙니다 [40, 41]. 오히려 Flexbox는 1차원 정렬(예: 한 줄 또는 한 열의 아이템 배치)에 직관적이고 적합하며, CSS Grid는 2차원의 복잡한 구조 배치에 강점을 지니므로 두 기술을 상호 보완적으로 함께 사용해야 완벽한 레이아웃 시스템을 설계할 수 있다고 여러 소스에서 강조합니다 [8, 36, 39, 40].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS Grid]]
|
||||
# [[CSS Grid|CSS Grid]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS Grid는 행(Row)과 열(Column)을 동시에 다루어 복잡하고 체계적인 웹 페이지 구조를 설계할 수 있도록 돕는 2차원 레이아웃 시스템입니다 [1, 2]. Flexbox와 달리 레이아웃 구조를 먼저 정의하고 요소를 배치하는 '레이아웃 우선(layout in)' 방식을 취하며, 대규모 페이지 레이아웃이나 대시보드, 갤러리 등 정밀한 배치가 필요한 곳에 가장 적합합니다 [3-5].
|
||||
@@ -21,8 +21,8 @@ CSS Grid는 행(Row)과 열(Column)을 동시에 다루어 복잡하고 체계
|
||||
* 전체 페이지의 구조(Major layout)나 대규모 뼈대는 2차원인 **CSS Grid**로 잡고, 해당 셀 내부에 들어가는 UI 컴포넌트들의 세부적인 정렬은 1차원인 **Flexbox**로 처리하는 것이 유지보수성 높은 코드를 작성하는 모범 사례입니다 [26-29].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Flexbox]], [[반응형 디자인]]
|
||||
- **Projects/Contexts:** [[유지보수 가능한 CSS 레이아웃 설계]], [[웹 페이지 및 대시보드 구조화]]
|
||||
- **Related Topics:** [[Flexbox|Flexbox]], [[반응형 디자인|반응형 디자인]]
|
||||
- **Projects/Contexts:** 유지보수 가능한 CSS 레이아웃 설계, 웹 페이지 및 대시보드 구조화
|
||||
- **Contradictions/Notes:** Flexbox는 콘텐츠의 크기를 기반으로 공간을 분배하는 '콘텐츠 우선(content out)' 방식으로 동작하지만, CSS Grid는 정의된 레이아웃의 형태에 요소를 끼워 맞추는 '레이아웃 우선(layout in)' 방식을 취합니다 [5, 30]. CSS Grid가 더 복잡한 기능을 제공하지만 단순한 1차원 정렬(행, 열 내에서의 아이템 정렬)에 사용하기에는 과도한 설정(overkill)이 될 수 있으므로 상황에 맞게 Flexbox와 구별해 사용해야 합니다 [6, 27, 31].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS Media Queries]]
|
||||
# [[CSS Media Queries|CSS Media Queries]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS Media Queries(미디어 쿼리)는 뷰포트 너비, 화면 해상도, 방향 등의 특정 조건에 따라 각기 다른 CSS 스타일을 적용할 수 있게 해주는 규칙이다 [1, 2]. 이는 반응형 웹 디자인의 논리적 토대를 형성하며, 다양한 디바이스에 맞춰 단일 코드베이스로 레이아웃을 유연하게 조정할 수 있도록 돕는다 [1-3]. 또한, 특정 조건에서만 필요한 스타일을 분리하여 브라우저의 초기 렌더링 차단 현상을 방지하는 등 웹 성능 최적화에도 필수적인 역할을 한다 [4, 5].
|
||||
@@ -11,8 +11,8 @@ CSS Media Queries(미디어 쿼리)는 뷰포트 너비, 화면 해상도, 방
|
||||
- **뷰포트 한계와 컴포넌트 중심 설계로의 진화:** 뷰포트 기반 미디어 쿼리는 화면 전체 크기에 반응할 뿐, 컴포넌트가 실제로 속해 있는 부모 컨테이너의 가용 공간을 인식하지 못하는 근본적인 한계를 지닌다 [12]. 따라서 디자인 시스템이나 모듈화된 설계를 위해, 2026년 현재는 부모 컨테이너의 크기에 맞춰 컴포넌트가 스스로 형태를 변경하는 컨테이너 쿼리(Container Queries)와 미디어 쿼리를 병행해서 사용하는 것이 표준으로 자리 잡았다 [12-14].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[반응형 디자인]], [[Container Queries]], [[Mobile-First Design]], [[CSS Performance Optimization]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법]], [[디자인 시스템 개념]]
|
||||
- **Related Topics:** [[반응형 디자인|반응형 디자인]], [[Container Queries|Container Queries]], [[Mobile-First Design|Mobile-First Design]], [[CSS Performance Optimization|CSS Performance Optimization]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]], [[디자인 시스템 개념|디자인 시스템 개념]]
|
||||
- **Contradictions/Notes:** 소스에서는 뷰포트 기반의 미디어 쿼리만으로는 완벽한 재사용 컴포넌트를 만드는 데 제약이 있다고 지적한다. 사이드바나 모달 등 다양한 컨텍스트(공간)에 독립적으로 반응해야 하는 컴포넌트를 설계할 때는 미디어 쿼리보다 컨테이너 쿼리를 사용하는 것이 더 적합하며, 이는 최근 반응형 디자인의 패러다임이 페이지 수준에서 컴포넌트 수준으로 이동했음을 보여준다 [12, 14-16].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS Performance Optimization]]
|
||||
# [[CSS Performance Optimization|CSS Performance Optimization]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 성능 최적화는 브라우저의 렌더링 경로에서 병목 현상을 유발하는 렌더링 차단 요소를 줄이고, 연산 비용이 높은 리플로우(Reflow)와 리페인트(Repaint)를 최소화하여 웹페이지의 반응성과 로딩 속도를 향상시키는 과정입니다 [1-4]. "예쁘게" 만드는 것을 넘어 "유지보수 가능하게" CSS를 설계하려면 불필요한 스타일 제거, 애니메이션의 GPU 가속 활용은 물론, CSS Modules나 Tailwind CSS처럼 런타임 오버헤드가 적은 도구를 선택하여 번들 크기와 아키텍처 성능을 동시에 관리하는 실무적 접근이 필수적입니다 [5-8].
|
||||
@@ -25,8 +25,8 @@ CSS 성능 최적화는 브라우저의 렌더링 경로에서 병목 현상을
|
||||
* **CSS Modules** 역시 빌드 시에 고유 클래스명을 정적으로 생성하므로 캡슐화(스코핑)를 보장하면서도 런타임 오버헤드가 없어 성능 친화적인 아키텍처를 구현할 수 있습니다 [5, 8, 32].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[CSS 구조 설계 방식]], [[BEM]], [[CSS Modules]], [[Tailwind vs 일반 CSS 비교]], [[애니메이션 (transition / keyframes)]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법]], [[대규모 프론트엔드 프로젝트 아키텍처]]
|
||||
- **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], [[BEM|BEM]], [[CSS Modules|CSS Modules]], [[Tailwind vs 일반 CSS 비교|Tailwind vs 일반 CSS 비교]], [[애니메이션 (transition - keyframes)|애니메이션 (transition / keyframes)]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]], [[대규모 프론트엔드 프로젝트 아키텍처|대규모 프론트엔드 프로젝트 아키텍처]]
|
||||
- **Contradictions/Notes:**
|
||||
- CSS-in-JS는 동적인 스타일링과 개발자 편의성을 제공하지만 성능(번들 크기 및 런타임 비용)에서는 CSS Modules나 Tailwind CSS에 비해 단점이 큽니다 [8, 27-29].
|
||||
- 모바일이나 저사양 기기에서 애니메이션을 구현할 때는 시각적인 '부드러움(Smoothness)'을 고집하기보다는 CPU 자원을 아끼기 위해 의도적으로 픽셀 이동 단위를 조정하여 '속도(Speed)'를 챙기는 형태의 타협도 성능 최적화 방법으로 제안됩니다 [33].
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS Variables]]
|
||||
# [[CSS Variables|CSS Variables]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS Variables(사용자 지정 속성, Custom Properties)은 JavaScript 없이도 동적인 스타일 제어를 가능하게 하는 모던 CSS의 표준 기능입니다. 과거 Sass와 같은 전처리기(Preprocessor)에 의존해야 했던 변수 기능을 CSS 자체에 내장하여, 런타임 오버헤드를 최소화하면서도 전역적인 테마(Theming) 관리 및 상태 기반 스타일링을 쉽게 만들어 줍니다. 특히 대규모 애플리케이션에서 디자인 토큰을 구현하고 유지보수하기 쉬운 아키텍처를 구축하는 데 핵심적인 역할을 수행합니다.
|
||||
@@ -19,8 +19,8 @@ CSS Variables(사용자 지정 속성, Custom Properties)은 JavaScript 없이
|
||||
또한 CSS Modules 단독으로는 JavaScript의 상태(State) 데이터를 스타일에 직접 주입하기 어렵다는 단점이 존재하는데, CSS 사용자 지정 속성을 인라인으로 전달함으로써 이 한계를 우회할 수 있습니다 [9]. 나아가 Linaria와 같은 Zero-Runtime CSS-in-JS 환경에서는 정적 CSS를 빌드 타임에 추출하고 동적 상태 제어는 CSS 변수에 위임하여 렌더링 성능을 최적화합니다 [10].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Design Tokens]], [[CSS Modules]], [[Zero-Runtime CSS-in-JS]]
|
||||
- **Projects/Contexts:** [[Design Systems]], [[Frontend Architecture]]
|
||||
- **Related Topics:** [[Design Tokens|Design Tokens]], [[CSS Modules|CSS Modules]], [[Zero-Runtime CSS-in-JS|Zero-Runtime CSS-in-JS]]
|
||||
- **Projects/Contexts:** [[Design Systems|Design Systems]], [[Frontend Architecture|Frontend Architecture]]
|
||||
- **Contradictions/Notes:** 소스에 따르면 CSS 사용자 지정 속성은 SCSS와 같은 기존 전처리기의 정적 변수나, 런타임 단계에서 스타일을 주입하는 기존 CSS-in-JS가 지닌 성능 저하 문제를 동시에 극복할 수 있는 이상적인 대안으로 평가받습니다 [1, 10].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS 구조 설계 방식]]
|
||||
# [[CSS 구조 설계 방식|CSS 구조 설계 방식]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 구조 설계 방식은 웹 프론트엔드 프로젝트가 대규모로 확장됨에 따라 발생하는 전역 네임스페이스 충돌, 특수성(specificity) 전쟁, 그리고 CSS 비대화(bloat) 문제를 해결하고 코드의 유지보수성을 확보하기 위한 방법론입니다 [1]. 전통적인 BEM과 같은 수동적인 네이밍 규칙부터, 빌드 시점에 자동으로 로컬 스코프(scope)를 분리하는 CSS Modules, 유틸리티 퍼스트(Utility-first) 접근을 취하는 Tailwind CSS 등 다양한 패러다임으로 진화해 왔습니다 [2], [3], [4]. 현대의 CSS 아키텍처는 단순한 시각적 장식을 넘어, 팀 협업 환경에서 예측 가능하고 확장 가능한 컴포넌트 기반 시스템을 구축하는 것을 핵심 목적으로 합니다 [5], [6], [7].
|
||||
@@ -16,8 +16,8 @@ CSS 구조 설계 방식은 웹 프론트엔드 프로젝트가 대규모로 확
|
||||
규모가 큰 엔지니어링 팀들은 단일 도구에 얽매이지 않고 각 방식의 장점을 결합하여 사용하기도 합니다 [30]. 예를 들어, 전반적인 레이아웃과 간격에는 개발 속도가 빠른 Tailwind CSS를 적용하고, 복잡한 애니메이션이나 정밀한 제어가 필요한 컴포넌트에는 CSS Modules나 SCSS를 결합하여 사용하는 하이브리드 전략을 채택함으로써 개발 생산성과 애플리케이션 성능을 동시에 최적화할 수 있습니다 [31], [32], [30], [33].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[BEM]], [[CSS Modules]], [[Tailwind CSS]], [[CSS-in-JS]], [[유틸리티 퍼스트(Utility-first)]]
|
||||
- **Projects/Contexts:** [[대규모 프론트엔드 프로젝트 아키텍처]], [[디자인 시스템 기반 컴포넌트 개발]], [[React Server Components(RSC) 환경의 스타일링 최적화]]
|
||||
- **Related Topics:** [[BEM|BEM]], [[CSS Modules|CSS Modules]], [[Tailwind CSS|Tailwind CSS]], [[CSS-in-JS|CSS-in-JS]], [[유틸리티 퍼스트(Utility-first)|유틸리티 퍼스트(Utility-first)]]
|
||||
- **Projects/Contexts:** [[대규모 프론트엔드 프로젝트 아키텍처|대규모 프론트엔드 프로젝트 아키텍처]], [[디자인 시스템 기반 컴포넌트 개발|디자인 시스템 기반 컴포넌트 개발]], [[React Server Components(RSC) 환경의 스타일링 최적화|React Server Components(RSC) 환경의 스타일링 최적화]]
|
||||
- **Contradictions/Notes:** Tailwind CSS는 클래스 네이밍에 대한 고민을 줄이고 빠른 프로토타이핑을 가능하게 하여 일관성과 CSS 번들 사이즈 최적화에 기여하지만 [19], [4], 개발자에 따라서는 인라인 스타일을 작성하는 것과 다름없어 HTML 마크업을 심각하게 어지럽히고 추상화 레이어를 불필요하게 추가한다는 강한 비판도 존재합니다 [34], [35], [19], [20]. 반면, CSS-in-JS는 컴포넌트 캡슐화에 매우 효과적이나 [22], 런타임 비용 및 서버 컴포넌트 호환성 이슈로 인해 2025년 기준 신규 아키텍처에서는 지양되고 CSS Modules가 더 안정적인 대안으로 추천되기도 합니다 [24], [36], [27], [37].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS 성능 최적화(CSS Performance Optimization)]]
|
||||
# [[CSS 성능 최적화(CSS Performance Optimization)|CSS 성능 최적화(CSS Performance Optimization)]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 성능 최적화는 웹 페이지의 렌더링을 차단하는 요소를 줄이고 불필요한 리플로우(Reflow)와 리페인트(Repaint) 연산을 최소화하여 빠르고 매끄러운 사용자 인터페이스를 제공하는 과정입니다 [1-3]. 선택자 단순화, CSS 파일 분할 및 에셋 로딩 최적화, 하드웨어 가속(GPU)을 활용한 애니메이션 최적화 등을 포함합니다 [4-7]. 궁극적으로 브라우저의 렌더링 파이프라인 부담을 줄여 사용자 경험과 유지보수성을 동시에 향상시키는 것을 목적으로 합니다 [1, 3, 8].
|
||||
@@ -14,8 +14,8 @@ CSS 성능 최적화는 웹 페이지의 렌더링을 차단하는 요소를 줄
|
||||
CSS Containment 모듈의 `contain`이나 `content-visibility` 속성을 사용하면, 브라우저가 페이지의 특정 컨테이너를 다른 DOM 요소와 분리하여 독립적으로 렌더링 최적화를 수행하도록 지시할 수 있습니다 [27, 28]. 화면에 보이기 전까지는 해당 컨테이너의 레이아웃과 렌더링을 생략할 수 있어 성능이 크게 향상됩니다 [28].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[애니메이션 (transition / keyframes)]], [[CSS 구조 설계 방식]], [[리플로우와 리페인트(Reflows & Repaints)]], [[CSS Modules]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법]]
|
||||
- **Related Topics:** [[애니메이션 (transition - keyframes)|애니메이션 (transition / keyframes)]], [[CSS 구조 설계 방식|CSS 구조 설계 방식]], 리플로우와 리페인트(Reflows & Repaints), [[CSS Modules|CSS Modules]]
|
||||
- **Projects/Contexts:** [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
|
||||
- **Contradictions/Notes:** 컴포넌트 기반 아키텍처에서 Styled-components와 같은 런타임 CSS-in-JS 방식은 동적 스타일링에 유리하지만, 브라우저 런타임에 CSS를 파싱하고 주입해야 하므로 성능 오버헤드와 렌더링 속도 저하를 유발할 수 있습니다 [29, 30]. 반면 성능이 중요한 환경에서는 정적 CSS를 생성하는 CSS Modules나 Tailwind CSS 같은 Zero-runtime 방식이 성능 상 더 권장됩니다 [31-34]. 또한 브라우저 최적화를 돕는 `will-change` 속성은 성능 문제를 미리 방지하고자 너무 많은 요소에 남용할 경우 오히려 브라우저의 리소스를 소모해 성능 저하를 일으킬 수 있으므로 최후의 수단으로만 사용해야 합니다 [24, 25].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS 애니메이션 성능(CSS Animation Performance)]]
|
||||
# [[CSS 애니메이션 성능(CSS Animation Performance)|CSS 애니메이션 성능(CSS Animation Performance)]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 애니메이션 성능(CSS Animation Performance) 최적화는 웹 애플리케이션에서 애니메이션이 브라우저의 렌더링 엔진에 미치는 부하를 줄여 끊김 없는(jank-free) 부드러운 사용자 경험을 제공하기 위한 기술적 접근입니다. 레이아웃 재계산(Reflow)과 화면 다시 그리기(Repaint)를 유발하는 속성의 애니메이션을 피하고 GPU 가속을 활용할 수 있는 속성으로 대체하는 것이 핵심입니다. 최적화되지 않은 애니메이션은 기기의 리소스를 낭비하고 렌더링 속도를 늦춰 전반적인 유지보수성과 UX를 크게 저해할 수 있습니다 [1-3].
|
||||
@@ -12,8 +12,8 @@ CSS 애니메이션 성능(CSS Animation Performance) 최적화는 웹 애플리
|
||||
* **타이밍 및 성능 테스트**: 부드럽고 자연스러운 느낌을 위해 애니메이션 지속 시간은 보통 200~500ms로 짧게 유지하고 선형적(Linear) 전환보다는 Easing 함수(`ease-in-out` 등)를 사용해야 합니다 [16]. 배포 전에는 Chrome DevTools의 Performance Panel과 Layer Profiler 등을 활용하여 프레임 드롭이나 렌더링 병목 현상을 검증해야 합니다 [6, 17].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Reflow와 Repaint(Reflows and Repaints)]], [[GPU 가속(GPU Acceleration)]], [[CSS 구조 설계 방식]], [[반응형 디자인]]
|
||||
- **Projects/Contexts:** [[대규모 프론트엔드 프로젝트의 CSS 최적화(Performance Optimization in CSS Architecture)]], [[UX 개선을 위한 애니메이션 통합(Integrating Animation in UX)]]
|
||||
- **Related Topics:** Reflow와 Repaint(Reflows and Repaints), [[GPU 가속(GPU Acceleration)|GPU 가속(GPU Acceleration)]], [[CSS 구조 설계 방식|CSS 구조 설계 방식]], [[반응형 디자인|반응형 디자인]]
|
||||
- **Projects/Contexts:** 대규모 프론트엔드 프로젝트의 CSS 최적화(Performance Optimization in CSS Architecture), UX 개선을 위한 애니메이션 통합(Integrating Animation in UX)
|
||||
- **Contradictions/Notes:** 소스 자료들은 UI에서 애니메이션이 사용자 경험(UX)을 향상하고 브랜드 개성을 살리는 중요한 소통 수단이라고 권장하지만, 동시에 목적 없는 과도한 애니메이션이나 성능을 고려하지 않은 구현은 사용자에게 인지적 과부하를 주거나 기기 성능을 떨어뜨려 오히려 심각한 경험 저하를 낳을 수 있다고 주의를 주고 있습니다 [2, 16, 18]. 따라서 "예쁘게" 만드는 것을 넘어 "유지보수 가능하고 최적화된(Performant)" 상태를 유지하는 것이 강조됩니다.
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS 애니메이션 최적화(CSS Animations Optimization)]]
|
||||
# [[CSS 애니메이션 최적화(CSS Animations Optimization)|CSS 애니메이션 최적화(CSS Animations Optimization)]]
|
||||
|
||||
## 📌 Brief만 Summary
|
||||
CSS 애니메이션 최적화는 웹 인터페이스의 애니메이션이 브라우저 성능을 저하시키거나 사용자 경험을 해치지 않도록 구현하는 기법입니다. 불필요한 레이아웃 재계산(Reflow)과 화면 다시 그리기(Repaint)를 유발하는 속성 사용을 피하고, GPU 가속 및 브라우저 최적화 힌트를 활용하여 화면의 버벅거림(Jank) 현상을 방지합니다. 이를 통해 모바일 및 저사양 기기에서도 부드럽고 응답성 높은 인터페이스를 유지보수 가능하게 설계할 수 있습니다.
|
||||
@@ -23,8 +23,8 @@ CSS 애니메이션 최적화는 웹 인터페이스의 애니메이션이 브
|
||||
* 과도한 움직임은 전정기관 장애가 있는 사용자 등에게 불편함이나 멀미를 유발할 수 있습니다 [20, 21]. 이를 방지하기 위해 `prefers-reduced-motion` 미디어 쿼리를 사용하여 사용자의 OS 설정에 따라 애니메이션을 줄이거나 끄도록 제어해야 합니다 [20-22].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Reflow와 Repaint(리플로우와 리페인트)]], [[GPU 가속 및 Compositing]], [[웹 접근성 및 prefers-reduced-motion]]
|
||||
- **Projects/Contexts:** [[실무에서의 프론트엔드 성능 최적화]], [[유지보수 가능하고 확장 가능한 CSS 아키텍처 설계]]
|
||||
- **Related Topics:** [[Reflow와 Repaint(리플로우와 리페인트)|Reflow와 Repaint(리플로우와 리페인트)]], [[GPU 가속 및 Compositing|GPU 가속 및 Compositing]], [[웹 접근성 및 prefers-reduced-motion|웹 접근성 및 prefers-reduced-motion]]
|
||||
- **Projects/Contexts:** [[실무에서의 프론트엔드 성능 최적화|실무에서의 프론트엔드 성능 최적화]], [[유지보수 가능하고 확장 가능한 CSS 아키텍처 설계|유지보수 가능하고 확장 가능한 CSS 아키텍처 설계]]
|
||||
- **Contradictions/Notes:** 브라우저의 성능을 끌어올리기 위해 `will-change` 속성을 사용할 수 있지만, 이 속성 자체도 자원을 소모하므로 불필요하게 많은 요소에 남용할 경우 오히려 브라우저를 과부하에 빠뜨려 성능 저하를 유발할 수 있습니다. 따라서 기존의 성능 문제를 해결하기 위한 '최후의 수단'으로만 엄격히 제한하여 사용해야 합니다 [10, 12, 18]. 또한 애니메이션을 부드럽게 하기 위해 1px 단위로 조작하는 것이 보기에는 좋을 수 있으나, 저사양 기기에서는 CPU를 과도하게 사용하게 되므로 차라리 3px 단위로 조작하여 매끄러움을 약간 타협하고 렌더링 속도를 확보하는 것이 실무적으로 좋은 해결책이 될 수 있습니다 [17].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[CSS 애니메이션 최적화(Optimizing CSS Animations)]]
|
||||
# [[CSS 애니메이션 최적화(Optimizing CSS Animations)|CSS 애니메이션 최적화(Optimizing CSS Animations)]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
CSS 애니메이션 최적화는 웹 페이지 내 애니메이션이 성능 저하나 끊김(Jank) 현상 없이 부드럽게 실행되도록 브라우저의 렌더링 과정을 개선하는 기법입니다 [1, 2]. 브라우저의 레이아웃 재계산(Reflow)과 화면 다시 그리기(Repaint)를 유발하는 속성 사용을 피하고, GPU 가속을 활용할 수 있는 속성을 중점적으로 사용하는 것이 핵심입니다 [3-5]. 이를 통해 사용자에게 쾌적하고 반응성 높은 인터페이스(UX)를 제공하는 동시에 디바이스의 리소스 소모를 최소화할 수 있습니다 [1, 6, 7].
|
||||
@@ -20,8 +20,8 @@ CSS 애니메이션 최적화는 웹 페이지 내 애니메이션이 성능 저
|
||||
모든 사용자나 기기가 애니메이션을 매끄럽게 소화할 수 있는 것은 아닙니다 [6, 20]. 전정기관 장애가 있는 사용자는 과도한 움직임으로 인해 어지러움을 느낄 수 있으며, 저사양 기기나 배터리가 부족한 모바일 기기 사용자에게는 애니메이션이 부담될 수 있습니다 [6, 20]. 이를 위해 `prefers-reduced-motion` 미디어 쿼리를 사용하여 운영체제 수준에서 애니메이션 감소를 설정한 사용자에게는 애니메이션을 제한하거나 제공하지 않는 방식의 최적화가 필요합니다 [6, 20].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Reflow & Repaint]], [[GPU 가속(GPU Acceleration)]], [[UX 애니메이션(UX Animation)]], [[will-change 속성]], [[prefers-reduced-motion]], [[접근성(Accessibility)]]
|
||||
- **Projects/Contexts:** [[대규모 프론트엔드 프로젝트의 UI/UX 성능 최적화]], [[디자인 시스템 기반의 인터페이스 애니메이션 적용 및 검증 과정]]
|
||||
- **Related Topics:** [[Reflow & Repaint|Reflow & Repaint]], [[GPU 가속(GPU Acceleration)|GPU 가속(GPU Acceleration)]], UX 애니메이션(UX Animation), will-change 속성, [[웹 접근성 및 prefers-reduced-motion|prefers-reduced-motion]], 접근성(Accessibility)
|
||||
- **Projects/Contexts:** 대규모 프론트엔드 프로젝트의 UI/UX 성능 최적화, 디자인 시스템 기반의 인터페이스 애니메이션 적용 및 검증 과정
|
||||
- **Contradictions/Notes:** 브라우저 성능 최적화를 돕는 `will-change` 속성은 잘 쓰면 반응성을 높이지만 무분별하게 남용될 경우 도리어 심각한 리소스 낭비 및 성능 저하를 일으키는 양면성이 있어 주의가 필요합니다 [14, 15]. 또한 화려한 애니메이션이 사용자 경험을 즐겁게 만들 수 있으나, 지나칠 경우 인지적 과부하를 일으키거나 성능 저하를 초래해 오히려 UX를 해칠 수 있습니다 [1-3].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Client Components]]
|
||||
# [[Client Components|Client Components]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
클라이언트 컴포넌트(Client Components)는 모던 React 아키텍처(예: Next.js 15 App Router)에서 `'use client'` 지시어로 정의되며 전통적인 React 컴포넌트처럼 동작하는 UI 요소이다 [1]. 서버 컴포넌트와 달리 클라이언트 측 자바스크립트를 실행하므로 상태(state) 관리, 이벤트 핸들러 등 상호작용이 필요하거나 브라우저 API를 사용해야 할 때 필수적으로 적용된다 [1, 2]. 확장 가능한 프론트엔드 환경에서는 자바스크립트 번들 크기를 최소화하고 성능을 극대화하기 위해 클라이언트 컴포넌트를 작고 기능적으로 집중된 형태로 유지하는 것이 핵심 원칙이다 [2, 3].
|
||||
@@ -14,9 +14,9 @@
|
||||
* **스타일링 파라다임 및 테마 적용(CSS-in-JS):** Next.js App Router 아키텍처에서 styled-components와 같은 런타임 CSS-in-JS 라이브러리를 사용하려면, 렌더링 중 CSS 규칙을 수집하기 위한 '스타일 레지스트리(Style Registry)'를 구성하고 이를 클라이언트 컴포넌트로 래핑해야 한다 [6]. 더 나아가, React Context 없이도 클라이언트 컴포넌트와 서버 컴포넌트 모두에서 테마가 작동하도록 CSS 사용자 지정 속성(CSS custom properties)을 기반으로 한 `createTheme` 등의 기능이 도입되어 렌더링 컨텍스트의 한계를 극복하고 있다 [7].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Server Components]], [[Hydration]], [[CSS-in-JS]], [[React Context]]
|
||||
- **Projects/Contexts:** [[Next.js App Router]], [[styled-components]]
|
||||
- **Contradictions/Notes:** 전통적인 런타임 CSS-in-JS 라이브러리(styled-components, Emotion)는 내부적으로 React Context에 의존하기 때문에 서버 컴포넌트에서는 작동하지 않고 클라이언트 컴포넌트 래핑이 필요하지만, 대규모 프로젝트의 성능(Core Web Vitals) 향상과 Next.js App Router와의 완벽한 호환을 위해서는 런타임 비용이 없는 [[Tailwind CSS]], CSS Modules 또는 vanilla-extract 등의 정적 CSS 생성 도구로의 전환이 2025년 기준 더욱 강력히 권장되고 있다 [6, 8-11].
|
||||
- **Related Topics:** [[Server Components|Server Components]], [[Hydration|Hydration]], [[CSS-in-JS|CSS-in-JS]], [[React Context|React Context]]
|
||||
- **Projects/Contexts:** [[Next.js App Router|Next.js App Router]], [[styled-components|styled-components]]
|
||||
- **Contradictions/Notes:** 전통적인 런타임 CSS-in-JS 라이브러리(styled-components, Emotion)는 내부적으로 React Context에 의존하기 때문에 서버 컴포넌트에서는 작동하지 않고 클라이언트 컴포넌트 래핑이 필요하지만, 대규모 프로젝트의 성능(Core Web Vitals) 향상과 Next.js App Router와의 완벽한 호환을 위해서는 런타임 비용이 없는 [[Tailwind CSS|Tailwind CSS]], CSS Modules 또는 vanilla-extract 등의 정적 CSS 생성 도구로의 전환이 2025년 기준 더욱 강력히 권장되고 있다 [6, 8-11].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Component API Design]]
|
||||
# [[Component API Design|Component API Design]]
|
||||
|
||||
## 📌 Brief 소목 Summary
|
||||
컴포넌트 API 디자인(Component API Design)은 개발자가 UI 컴포넌트를 사용하고 구성하는 방식에 대한 구조적 설계와 인터페이스 정의를 의미합니다[1-3]. 잘 설계된 컴포넌트 API는 과도한 Prop 설정에 의존하는 대신 합성(Composition)을 활용하여 소비자가 유연하게 UI를 조립할 수 있도록 돕습니다[2, 4]. 이는 확장 가능하고 유지보수가 쉬운 재사용 가능한 React 컴포넌트 라이브러리를 구축하는 데 핵심적인 역할을 합니다[1, 5, 6].
|
||||
@@ -14,8 +14,8 @@
|
||||
* **헤드리스 컴포넌트 (Headless Components) 및 슬롯 (Slots)**: UI 스타일링 없이 상태와 동작 로직만 제공하거나(Headless), 소비자가 자체 콘텐츠를 삽입할 수 있는 의도된 영역(Slots)을 제공하여 API의 복잡성을 낮추는 패턴입니다[8, 18].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Compound Components]], [[Headless Components]], [[Overrides Pattern]], [[Prop Drilling]], [[Atomic Design]]
|
||||
- **Projects/Contexts:** [[Uber Base Web]], [[Radix UI]], [[Shopify Polaris]]
|
||||
- **Related Topics:** [[Compound Components|Compound Components]], [[Headless Components|Headless Components]], [[Overrides Pattern|Overrides Pattern]], [[Prop Drilling|Prop Drilling]], [[Atomic Design|Atomic Design]]
|
||||
- **Projects/Contexts:** [[Uber Base Web|Uber Base Web]], [[Radix UI|Radix UI]], [[Shopify Polaris|Shopify Polaris]]
|
||||
- **Contradictions/Notes:** 복합 컴포넌트(Compound Components) 패턴은 강력한 구성의 자유도를 제공하지만, 지나친 자유로움으로 인해 사용자가 하위 컴포넌트의 순서를 임의로 변경하여 UX나 접근성의 일관성을 해칠 위험이 있습니다[19, 20]. 따라서 버튼이나 아이콘같이 단순하고 구조가 고정된 컴포넌트에서는 불필요한 추상화가 되므로 일반적인 Prop-Driven 방식이 더 안전하고 적합합니다[20, 21].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Component Library Architecture]]
|
||||
# [[Component Library Architecture|Component Library Architecture]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
컴포넌트 라이브러리 아키텍처는 확장 가능하고 유지보수가 용이한 프론트엔드 애플리케이션을 구축하기 위해 재사용 가능한 UI 컴포넌트를 설계하고 조직화하는 구조적 접근 방식입니다 [1, 2]. 이는 단순한 시각적 요소를 넘어, 컴포넌트 간의 상태 공유, 로직 분리, 아키텍처 패턴을 활용하여 일관성 있는 시스템을 구현하는 것을 목표로 합니다 [3-5]. 잘 설계된 아키텍처는 과도한 상태 전달(prop drilling)을 방지하고 높은 유연성을 제공하여 끊임없이 변화하는 제품 요구사항에 안전하게 대처할 수 있게 합니다 [1, 6-8].
|
||||
@@ -12,8 +12,8 @@
|
||||
* **디자인 토큰(Design Tokens) 계층화:** 색상, 타이포그래피, 간격 등의 원시 값을 추상화하여 기본 토큰(Primitives), 시맨틱 토큰(Semantic), 컴포넌트 토큰(Component Tokens)의 3단계 계층 구조로 관리합니다 [32-35]. 이는 테마(예: 다크 모드)의 동적 전환을 용이하게 하고 라이브러리 전반의 시각적 일관성과 안전한 리팩토링을 보장합니다 [5, 36-38].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Atomic Design]], [[Compound Components]], [[Headless Components]], [[Design Tokens]], [[Feature-Sliced Design]]
|
||||
- **Projects/Contexts:** [[Uber Base Web]], [[Shopify Polaris]], [[React Server Components (RSC)]], [[Tailwind CSS vs Styled Components]]
|
||||
- **Related Topics:** [[Atomic Design|Atomic Design]], [[Compound Components|Compound Components]], [[Headless Components|Headless Components]], [[Design Tokens|Design Tokens]], [[Feature-Sliced Design|Feature-Sliced Design]]
|
||||
- **Projects/Contexts:** [[Uber Base Web|Uber Base Web]], [[Shopify Polaris|Shopify Polaris]], [[React Server Components (RSC)|React Server Components (RSC)]], Tailwind CSS vs Styled Components
|
||||
- **Contradictions/Notes:** 복합 컴포넌트 패턴은 높은 유연성을 주지만 과용하면 소비자에게 너무 많은 통제권을 주어 UX나 접근성 등 구조적 일관성이 깨질 위험이 있습니다. 따라서 레이아웃이 고정되어 있는 단순한 버튼이나 배지 같은 컴포넌트에는 일반적인 Prop 기반 방식이 훨씬 적합합니다 [39-41]. 또한, 컴포넌트 스타일링 구현 시 Styled Components처럼 런타임에 스타일을 주입하는 방식은 동적 스타일링에 강력하나 Next.js 15의 App Router 및 RSC 환경에서는 Context 부재로 인한 구조적 제약과 번들 사이즈 등 성능 비용이 따릅니다 [42-45]. 이 때문에 최신 프론트엔드 아키텍처는 정적 CSS 생성이 가능한 Tailwind CSS 또는 Zero-runtime 방식(vanilla-extract 등)을 컴포넌트 라이브러리 구축에 더 권장하는 추세입니다 [46-49].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Component-Based Design]]
|
||||
# [[Component-Based Design|Component-Based Design]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
컴포넌트 기반 디자인(Component-Based Design)은 사용자 인터페이스를 재사용 가능하고 이식성이 뛰어나며 예측 가능한 모듈식 구성 요소로 구축하는 아키텍처 접근 방식입니다 [1, 2]. 이는 거대한 단일 컴포넌트를 구성하는 방식에서 벗어나, 조합(Composition)을 통해 레이아웃과 동작을 조립함으로써 '프롭 드릴링(prop drilling)'과 숨겨진 결합도를 줄입니다 [3-5]. 단일 책임 원칙과 명시적인 API 계약을 준수함으로써, 변화하는 요구사항에 유연하게 적응하고 확장할 수 있는 확장성 높은 UI 시스템을 구축하는 데 핵심적인 역할을 합니다 [6-8].
|
||||
@@ -15,8 +15,8 @@
|
||||
- **디자인 토큰(Design Tokens) 바인딩**: 컴포넌트는 하드코딩된 리터럴 값(예: `#dc2222`)을 피하고 디자인 토큰(예: `color.error`)을 참조하여 바인딩해야 합니다 [24, 25]. 이를 통해 간격, 색상, 타이포그래피 등의 디자인 요소가 변경될 때 시스템 전체에 일관된 업데이트가 자동으로 반영됩니다 [24].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Atomic Design]], [[Compound Components]], [[Headless Components]], [[Design Tokens]], [[Feature-Sliced Design]]
|
||||
- **Projects/Contexts:** [[Uber Base Web]], [[Shopify Polaris]], [[Radix UI]]
|
||||
- **Related Topics:** [[Atomic Design|Atomic Design]], [[Compound Components|Compound Components]], [[Headless Components|Headless Components]], [[Design Tokens|Design Tokens]], [[Feature-Sliced Design|Feature-Sliced Design]]
|
||||
- **Projects/Contexts:** [[Uber Base Web|Uber Base Web]], [[Shopify Polaris|Shopify Polaris]], [[Radix UI|Radix UI]]
|
||||
- **Contradictions/Notes:** 원자적 설계(Atomic Design)는 시각적 일관성을 유지하는 데 효과적이지만, 복잡한 비즈니스 로직을 포함하는 컴포넌트를 엄격한 범주에 억지로 맞출 때 구조적 한계에 부딪힐 수 있으므로 실무에서는 기능(Feature) 기반 구조와 결합하여 사용하는 것이 권장됩니다 [26, 27]. 또한, 복합 컴포넌트 패턴은 소비자에게 막강한 유연성을 제공하지만, 너무 많은 자유를 허용하면 일관된 UI나 접근성이 훼손될 수 있으므로 디자인 시스템 차원에서 안전한 구성 경계(composition boundaries)를 문서화하는 것이 필수적입니다 [28, 29].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Compound Components Pattern]]
|
||||
# [[Compound Components Pattern|Compound Components Pattern]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Compound Components 패턴은 암시적으로 상태를 공유하고 특정 부모 내에서만 작동하는 일련의 관련 컴포넌트들을 노출하여 선언적이고 가독성 높은 API를 구성하는 React 컴포넌트 설계 방식이다 [1]. 모든 기능을 수십 개의 prop으로 단일 컴포넌트에 쑤셔넣는 대신, 여러 협력 컴포넌트에 책임을 분산시켜 복잡한 요구사항을 처리한다 [2]. 이는 HTML의 `<select>`와 `<option>` 요소처럼 개별적인 책임을 유지하면서도 응집력 있는 단위로 함께 작동하여, 재사용 가능하고 유연한 UI를 구축하는 데 핵심적인 역할을 한다 [1, 3].
|
||||
@@ -15,8 +15,8 @@ Compound Components 패턴은 암시적으로 상태를 공유하고 특정 부
|
||||
* **적용 시기:** 레이아웃이 다양하게 변하거나, 소비자가 구성을 자유롭게 조합해야 할 때, 혹은 확장 가능한 공유 UI 라이브러리를 구축할 때 매우 적합하다 [15]. 하지만 Button, Icon, Badge처럼 단일하고 고정된 레이아웃을 가진 단순한 컴포넌트에는 불필요한 추상화를 초래하므로 피해야 한다 [16].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[React Context API]], [[Headless Components]], [[Render Props]], [[Atomic Design]]
|
||||
- **Projects/Contexts:** [[Radix UI]], [[Headless UI]], [[React Design Systems]]
|
||||
- **Related Topics:** [[React Context API|React Context API]], [[Headless Components|Headless Components]], [[Render Props|Render Props]], [[Atomic Design|Atomic Design]]
|
||||
- **Projects/Contexts:** [[Radix UI|Radix UI]], [[Headless UI|Headless UI]], [[React Design Systems|React Design Systems]]
|
||||
- **Contradictions/Notes:** Compound Components는 구성의 유연성을 제공하여 재사용성을 높이지만, 너무 많은 자유도를 제공하면 일관성을 해치고 접근성을 손상시킬 수 있으므로 디자인 시스템 차원에서 "안전한 구성 경계(safe composition boundaries)"를 명확히 정의하고 문서화해야 한다 [14, 15]. 또한 모든 컴포넌트에 이 패턴을 남용하는 것은 가장 흔한 실수이며, 레이아웃이 고정된 단순 컴포넌트는 일반적인 Prop 기반 접근이 더 안전하고 단순하다고 조언한다 [16].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Compound Components]]
|
||||
# [[Compound Components|Compound Components]]
|
||||
|
||||
## 📌 Brief 단기 요약
|
||||
합성 컴포넌트(Compound Components)는 여러 개의 연관된 하위 컴포넌트들이 암시적으로 상태를 공유하며 하나의 응집력 있는 단위로 동작하도록 설계하는 React 컴포넌트 패턴입니다 [1, 2]. 단일 컴포넌트에 수십 개의 Prop을 밀어 넣어 비대해지는 것을 방지하고, 기능과 책임을 여러 컴포넌트에 분산시킵니다 [3, 4]. 이는 HTML의 `<select>`와 `<option>` 태그처럼 직관적이고 선언적인 API를 형성하여 뛰어난 유연성과 재사용성을 제공합니다 [1, 4].
|
||||
@@ -26,8 +26,8 @@
|
||||
* 버튼, 배지, 아바타, 아이콘처럼 구조가 단일하고 레이아웃이 고정된 컴포넌트에는 불필요한 추상화(Overusing)가 될 수 있으므로 피해야 합니다 [15, 16]. 탭, 아코디언, 모달, 드롭다운과 같이 레이아웃과 조립 방식이 다양한 복잡한 UI에 가장 적합합니다 [17-19].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Render Props]], [[Headless Components]], [[Context API]], [[Atomic Design]]
|
||||
- **Projects/Contexts:** [[Radix UI]], [[Headless UI]], [[MUI]]
|
||||
- **Related Topics:** [[Render Props|Render Props]], [[Headless Components|Headless Components]], [[Context API|Context API]], [[Atomic Design|Atomic Design]]
|
||||
- **Projects/Contexts:** [[Radix UI|Radix UI]], [[Headless UI|Headless UI]], [[MUI|MUI]]
|
||||
- **Contradictions/Notes:** 합성 컴포넌트는 매우 유연하고 강력한 패턴이지만, 하위 컴포넌트의 구성을 소비자가 자유롭게 바꿀 수 있기 때문에 의도치 않게 접근성이나 일관된 UX를 해칠 수 있습니다. 따라서 디자인 시스템에서는 안전한 조합의 경계(Safe composition boundaries)를 정의하고 문서화하는 것이 필수적입니다 [15, 17]. 또한 단순하고 고정된 레이아웃을 가진 컴포넌트에서는 일반적인 Prop 기반 접근법이 훨씬 간단하고 안전합니다 [16].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Concurrent Rendering]]
|
||||
# [[Concurrent Rendering|Concurrent Rendering]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Concurrent Rendering(동시성 렌더링)은 메인 스레드를 블로킹하지 않고 UI의 여러 부분을 병렬로 렌더링할 수 있게 해주는 React의 핵심 아키텍처 기능입니다 [1]. 렌더링 작업을 'Time Slicing(시간 분할)'을 통해 작은 단위로 쪼개고 중요도에 따라 우선순위를 부여하여, 긴급한 사용자 입력에 반응하기 위해 렌더링을 일시 중지하거나 재개할 수 있습니다 [1, 2]. 이를 통해 무거운 연산 중에도 UI가 멈추지 않고 즉각적으로 반응하도록 하여 애플리케이션의 체감 성능을 극대화합니다 [3, 4].
|
||||
@@ -15,8 +15,8 @@ Concurrent Rendering(동시성 렌더링)은 메인 스레드를 블로킹하지
|
||||
Concurrent Rendering의 핵심은 코드의 실제 연산 속도를 물리적으로 가속하는 것이 아닙니다 [3]. 무거운 연산이 즉각적인 사용자 피드백을 방해하지 않도록 처리 순서를 최적화하여 앱이 **"더 빠르게 느껴지게(feel faster)"** 만드는 데 목적이 있습니다 [3]. 이러한 비차단형(Non-Blocking) 렌더링 방식은 사용자의 입력이 다음 화면 페인트로 이어지는 속도를 측정하는 핵심 웹 지표인 **INP(Interaction to Next Paint)**를 향상시키는 데 직접적으로 기여합니다 [21, 22].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** `[[Fiber Architecture]]`, `[[Time Slicing]]`, `[[Lane Model]]`, `[[useTransition]]`, `[[useDeferredValue]]`
|
||||
- **Projects/Contexts:** `[[React 18 & 19 Performance Optimization]]`
|
||||
- **Related Topics:** `[[Fiber Architecture|Fiber Architecture]]`, `[[Time Slicing|Time Slicing]]`, `[[Lane Model|Lane Model]]`, `[[useTransition|useTransition]]`, `[[useDeferredValue|useDeferredValue]]`
|
||||
- **Projects/Contexts:** `[[React 18 & 19 Performance Optimization|React 18 & 19 Performance Optimization]]`
|
||||
- **Contradictions/Notes:** 소스에 따르면 `useTransition` 및 `useDeferredValue`와 같은 동시성 훅은 코드 자체의 속도를 높여주지는 않지만, 무거운 연산이 사용자 피드백을 방해하지 않도록 스케줄링하여 앱의 "체감 성능"을 개선하는 방식으로 작동한다는 점을 명확히 하고 있습니다 [3].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Core Web Vitals Optimization (INP, LCP 개선)]]
|
||||
# [[Core Web Vitals Optimization (INP, LCP 개선)|Core Web Vitals Optimization (INP, LCP 개선)]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Core Web Vitals는 구글이 웹 페이지의 검색 순위와 사용자 경험을 평가하기 위해 정의한 핵심 성능 지표입니다 [1]. 여기에는 화면의 주요 콘텐츠가 로드되는 속도를 측정하는 LCP(Largest Contentful Paint)와 페이지 세션 내내 애플리케이션이 사용자 상호작용에 얼마나 빠르게 응답하는지 측정하는 INP(Interaction to Next Paint)가 포함됩니다 [1, 2]. 이 지표들의 기준치(LCP 2.5초 미만, INP 200 밀리초 미만)를 달성하면 사용자 이탈률을 낮추고 유기적 검색(SEO) 성과를 직접적으로 높일 수 있습니다 [1-3].
|
||||
@@ -23,8 +23,8 @@ Core Web Vitals는 구글이 웹 페이지의 검색 순위와 사용자 경험
|
||||
- 최적화를 적용하기 전에 항상 `React DevTools Profiler`나 `Lighthouse`를 사용하여 병목을 유발하는 컴포넌트를 찾고, 프로덕션 환경의 실측 데이터를 얻기 위해 `Web Vitals` 라이브러리로 필드 데이터를 모니터링해야 합니다 [22-26].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Largest Contentful Paint (LCP)]], [[Interaction to Next Paint (INP)]], [[Concurrent Rendering]], [[Server-Side Rendering (SSR)]], [[React Server Components (RSC)]]
|
||||
- **Projects/Contexts:** [[React Performance Optimization]], [[Search Engine Optimization (SEO) Strategy]]
|
||||
- **Related Topics:** [[Largest Contentful Paint (LCP)|Largest Contentful Paint (LCP)]], [[Interaction to Next Paint (INP)|Interaction to Next Paint (INP)]], [[Concurrent Rendering|Concurrent Rendering]], [[Server-Side Rendering (SSR)|Server-Side Rendering (SSR)]], [[React Server Components (RSC)|React Server Components (RSC)]]
|
||||
- **Projects/Contexts:** [[React Performance Optimization|React Performance Optimization]], Search Engine Optimization (SEO) Strategy
|
||||
- **Contradictions/Notes:** Lighthouse와 같은 도구로 측정한 연구실 데이터(Lab measurements)는 다양한 기기 성능과 네트워크 조건을 겪는 실제 사용자들의 경험(Field data)과 항상 일치하지는 않으므로 프로덕션 상의 Web Vitals 데이터를 함께 수집해야 합니다 [23, 24].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[Critical Rendering Path]]
|
||||
# [[Critical Rendering Path|Critical Rendering Path]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Critical Rendering Path (CRP)는 브라우저가 HTML, CSS, JavaScript를 수신하여 화면의 픽셀로 변환하기 위해 거치는 일련의 단계적 과정을 의미합니다[1]. 이 과정은 DOM 트리 및 CSSOM 트리 구축, Render Tree 합성, Layout(Reflow), 그리고 Paint(Repaint) 및 Compositing 단계로 진행됩니다[1, 2]. CRP를 이해하고 최적화하는 것은 렌더링 차단 요소를 줄이고 불필요한 Reflow 및 Repaint를 최소화하여 빠른 초기 렌더링과 매끄러운 사용자 상호작용을 보장하는 프론트엔드 성능 엔지니어링의 핵심입니다[3, 4].
|
||||
@@ -12,8 +12,8 @@ Critical Rendering Path (CRP)는 브라우저가 HTML, CSS, JavaScript를 수신
|
||||
* **React 도입과의 연관성:** 전통적으로 브라우저의 DOM을 직접 조작하는 것은 필연적으로 비용이 큰 Reflow와 Repaint 과정을 연쇄적으로 유발하여 속도 저하를 일으킵니다[26]. React는 이 한계를 극복하기 위해 메모리에 경량화된 Virtual DOM을 구축하고, 상태 변경 시 휴리스틱 Diffing 알고리즘(Reconciliation)을 통해 변경된 최소한의 노드만 실제 DOM에 반영하여 렌더링 경로의 비효율을 크게 줄입니다[3, 26, 27].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[브라우저 렌더링 과정 (HTML → CSSOM → Render Tree)]], [[Reflow / Repaint 최소화 방법]], [[DOM vs Virtual DOM]]
|
||||
- **Projects/Contexts:** [[렌더링 최적화 개념 설명 자료]], [[“React가 빠른 이유”]]
|
||||
- **Related Topics:** [[브라우저 렌더링 과정 (HTML → CSSOM → Render Tree)|브라우저 렌더링 과정 (HTML → CSSOM → Render Tree)]], [[Reflow - Repaint 최소화 방법|Reflow / Repaint 최소화 방법]], [[DOM vs Virtual DOM|DOM vs Virtual DOM]]
|
||||
- **Projects/Contexts:** [[렌더링 최적화 개념 설명 자료|렌더링 최적화 개념 설명 자료]], [[“React가 빠른 이유”|“React가 빠른 이유”]]
|
||||
- **Contradictions/Notes:** CSS 선택자(Selector)의 복잡도는 파싱 속도에 영향을 주지만, 최신 브라우저 엔진은 매우 빠르기 때문에 선택자 구체성을 최적화해서 얻는 성능적 이득은 마이크로초 단위에 불과합니다. 따라서 실질적인 최적화를 위해서는 선택자 구조 개선보다는 불필요한 렌더링 차단 리소스 크기를 줄이거나 로딩 순서를 제어하는 것이 성능 개선(CRP 최적화)에 훨씬 효과적입니다[28, 29].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[DOM (Document Object Model)]]
|
||||
# [[DOM (Document Object Model)|DOM (Document Object Model)]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
DOM(Document Object Model)은 브라우저가 수신한 HTML 문서 데이터를 파싱하여 생성하는 페이지 구조의 계층적 트리 표현입니다 [1-3]. 브라우저는 HTML 태그의 포함 관계를 바탕으로 부모 및 자식 노드의 트리를 형성하며, `<html>` 요소를 루트 노드로 갖습니다 [4, 5]. DOM은 페이지의 모든 콘텐츠 정보를 담고 있으며, 스타일 정보를 담은 CSSOM과 결합해 최종 화면 출력에 필요한 렌더 트리(Render Tree)를 형성하는 브라우저 렌더링 과정의 핵심 기반입니다 [6-8].
|
||||
@@ -17,7 +17,7 @@ DOM(Document Object Model)은 브라우저가 수신한 HTML 문서 데이터를
|
||||
JavaScript를 사용해 DOM을 직접 조작하고 크기나 위치 등을 변경하면, 브라우저는 문서 전체의 레이아웃(Reflow)과 페인트(Repaint) 과정을 다시 실행해야 하므로 처리 비용이 매우 높습니다 [16-18]. 이를 최적화하기 위해서는 사용된 DOM 노드나 속성값을 캐싱하고, DOM의 읽기 및 쓰기 작업을 분리하여 레이아웃 스래싱(Layout thrashing)을 방지해야 합니다 [16, 19, 20]. React와 같은 프레임워크는 실제 DOM을 직접 수정하는 비효율성을 피하고자 메모리 내에 가벼운 사본인 가상 DOM(Virtual DOM)을 생성하여 조작을 추상화합니다 [17, 21, 22].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[CSSOM (CSS Object Model)]], [[Render Tree]], [[Virtual DOM]], [[Critical Rendering Path (CRP)]], [[Reflow (Layout)]], [[Repaint]]
|
||||
- **Related Topics:** [[CSSOM(CSS Object Model)|CSSOM (CSS Object Model)]], [[Render Tree|Render Tree]], [[Virtual DOM|Virtual DOM]], [[Critical Rendering Path (CRP)|Critical Rendering Path (CRP)]], Reflow (Layout), [[리페인트(Repaint)|Repaint]]
|
||||
- **Projects/Contexts:** 프론트엔드 성능 최적화(DOM 접근 최소화 및 렌더링 파이프라인 관리), React의 렌더링 엔진 구조 및 재조정(Reconciliation) 과정 이해 [6, 17, 23, 24].
|
||||
- **Contradictions/Notes:** DOM 구축은 HTML을 파싱하면서 '점진적(incremental)'으로 이루어지지만, CSSOM 구축은 렌더링을 차단(render-blocking)하며 점진적으로 처리되지 않는다는 구조적 차이가 있습니다 [1, 7, 9].
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[DOM 및 CSSOM]]
|
||||
# [[DOM 및 CSSOM|DOM 및 CSSOM]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
DOM(문서 객체 모델)과 CSSOM(CSS 객체 모델)은 브라우저의 핵심 렌더링 경로(Critical Rendering Path)에서 웹 페이지를 화면에 그리기 위해 생성되는 두 가지 독립적인 트리 구조 데이터입니다 [1, 2]. DOM은 HTML 마크업을 점진적으로 파싱하여 문서의 구조와 내용을 나타냅니다 [3, 4]. 반면, CSSOM은 문서에 적용될 스타일 규칙을 정의하며, 렌더링 시 스타일이 적용되지 않은 콘텐츠가 깜빡이는 현상(FOUC)을 방지하기 위해 렌더링 차단(render-blocking) 방식으로 생성됩니다 [5, 6]. 이 두 트리가 결합하여 화면에 표시될 시각적 요소들만 포함하는 렌더 트리(Render Tree)를 최종적으로 형성합니다 [7, 8].
|
||||
@@ -23,8 +23,8 @@ DOM(문서 객체 모델)과 CSSOM(CSS 객체 모델)은 브라우저의 핵심
|
||||
- 하지만 `visibility: hidden`이 적용된 요소는 보이지 않더라도 레이아웃 상에서 공간을 차지하므로 렌더 트리에 포함됩니다 [15].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** `[[Critical Rendering Path]]`, `[[Render Tree]]`, `[[Reflow and Repaint]]`
|
||||
- **Projects/Contexts:** `[[프론트엔드 성능 최적화]]`, `[[브라우저 렌더링 파이프라인 이해]]`
|
||||
- **Related Topics:** `[[Critical Rendering Path|Critical Rendering Path]]`, `[[Render Tree|Render Tree]]`, `[[Reflow and Repaint|Reflow and Repaint]]`
|
||||
- **Projects/Contexts:** `[[프론트엔드 성능 최적화|프론트엔드 성능 최적화]]`, `브라우저 렌더링 파이프라인 이해`
|
||||
- **Contradictions/Notes:** CSS 선택자의 구체성이 CSSOM 생성 연산 속도에 영향을 미치지만, 최신 브라우저는 파싱 속도가 매우 빨라 이로 인한 지연은 마이크로초 단위에 불과합니다 [11, 13]. 따라서 과도하게 선택자 구체성 최적화에 집착하기보다는 미니파이(minification)나 렌더링 차단을 방지하는 다른 CSS 최적화 기법에 집중하는 것이 좋습니다 [13].
|
||||
|
||||
---
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# [[DOM(Document Object Model)]]
|
||||
# [[DOM(Document Object Model)|DOM(Document Object Model)]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
DOM(Document Object Model)은 브라우저가 HTML 마크업을 내부적으로 표현하기 위해 생성하는 계층적인 트리 구조의 객체 모델입니다 [1, 2]. 브라우저가 HTML 데이터를 수신하면서 점진적으로 생성하며, 웹 페이지의 모든 콘텐츠와 요소 간의 구조적 관계를 담고 있습니다 [1, 3, 4]. 자바스크립트(JavaScript) 내의 다양한 API를 통해 DOM에 접근하고 이를 동적으로 조작할 수 있습니다 [2].
|
||||
@@ -17,7 +17,7 @@ DOM(Document Object Model)은 브라우저가 HTML 마크업을 내부적으로
|
||||
자바스크립트 등을 통해 DOM을 직접 변경하는 작업은 브라우저의 레이아웃(Reflow)과 페인트 단계를 지속적으로 트리거하기 때문에 본질적으로 속도가 느리고 비용이 많이 듭니다 [10]. 애플리케이션이 복잡해질 경우 여러 노드를 개별적으로 업데이트하면 중복 연산이 발생하며, 이는 React와 같은 프레임워크가 가상 DOM(Virtual DOM)을 도입하게 된 핵심 배경이 되었습니다 [10].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[CSSOM(CSS Object Model)]], [[Critical Rendering Path(CRP)]], [[Render Tree]], [[Virtual DOM]], [[Reflow / Repaint]]
|
||||
- **Related Topics:** [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model)]], [[Critical Rendering Path (CRP)|Critical Rendering Path(CRP)]], [[Render Tree|Render Tree]], [[Virtual DOM|Virtual DOM]], [[Reflow & Repaint|Reflow / Repaint]]
|
||||
- **Projects/Contexts:** 브라우저 렌더링 과정 (Browser Rendering Process), 프론트엔드 성능 최적화 및 React의 Virtual DOM 도입 배경 이해 [7, 10, 11]
|
||||
- **Contradictions/Notes:** 소스 간의 모순된 정보는 없습니다. 참고로 DOM의 생성은 점진적(incremental)으로 진행되어 문서를 파싱하는 동안에도 화면을 그리기 시작할 수 있지만, CSSOM의 생성은 렌더링을 차단(render-blocking)한다는 점에서 두 모델의 구축 방식에 차이가 있습니다 [3, 9].
|
||||
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-03FE7E
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Mega Batch - Wikified AODA-Accessibility-for-Ontarians-with-Disabilities-Act"
|
||||
---
|
||||
|
||||
# [[AODA-Accessibility-for-Ontarians-with-Disabilities-Act]]
|
||||
# [[AODA-Accessibility-for-Ontarians-with-Disabilities-Act|AODA-Accessibility-for-Ontarians-with-Disabilities-Act]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 핵심 요약 작업 진행 중
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Mega Batch - Wikified AODA-Accessibility-for-Ontar
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/AODA-Accessibility-for-Ontarians-with-Disabilities-Act.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/AODA-Accessibility-for-Ontarians-with-Disabilities-Act.md
|
||||
---
|
||||
|
||||
+5
-5
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-09EEF3
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - API 응답 및 상태 모델링 (State Modeling and API Responses)"
|
||||
---
|
||||
|
||||
# [[API 응답 및 상태 모델링 (State Modeling and API Responses)]]
|
||||
# [[API 응답 및 상태 모델링 (State Modeling and API Responses)|API 응답 및 상태 모델링 (State Modeling and API Responses)]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> API 응답 및 상태 모델링은 애플리케이션에서 발생할 수 있는 네트워크 통신 결과나 UI의 변화 과정을 타입 시스템을 통해 안전하고 예측 가능하게 설계하는 기법이다 [1, 2]. 이 모델링은 주로 식별 가능한 유니온(Discriminated Unions)이나 명시적인 Result 객체를 활용하여 존재해서는 안 될 유효하지 않은 상태를 원천적으로 차단한다 [3, 4]. 궁극적으로 컴파일러가 모든 가능한 응답 상태를 검사(Exhaustiveness checking)하도록 강제함으로써, 런타임 버그를 줄이고 코드의 안정성과 가독성을 높여준다 [5-7].
|
||||
@@ -30,11 +30,11 @@ github_commit: "[P-Reinforce] Continuous Worker - API 응답 및 상태 모델
|
||||
- **정책 변화:** Design & Experience 분야의 자동 자산화 수행.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[식별 가능한 유니온 (Discriminated Unions)]], [[완전성 검사 (Exhaustiveness checking)]], [[Result 타입 (Result Type)]]
|
||||
- **Projects/Contexts:** [[상태 머신 (State Machine)]], [[오류 처리 아키텍처 (Error Handling Architecture)]]
|
||||
- **Related Topics:** [[식별 가능한 유니온 (Discriminated Unions)|식별 가능한 유니온 (Discriminated Unions)]], [[완전성 검사(Exhaustiveness Checking)|완전성 검사 (Exhaustiveness checking)]], Result 타입 (Result Type)
|
||||
- **Projects/Contexts:** 상태 머신 (State Machine), 오류 처리 아키텍처 (Error Handling Architecture)
|
||||
- **Contradictions/Notes:** API나 시스템의 에러 응답을 모델링할 때 'Result 타입'을 사용하는 방식에 대해 개발자 간의 이견이 존재한다. 예상된 실패를 Result로 강제 반환하면 실행 흐름이 예측 가능해진다는 찬성 측 주장이 있는 반면, 전역 예외 처리기(Global Exception Handler)를 사용하는 쪽이 예외를 단순히 위로 올려보낼 수 있어 불필요한 보일러플레이트 코드 및 과도한 제어 흐름 분기(`switch`문 등)를 줄이고 컨트롤러를 더 깔끔하게 유지할 수 있다는 반대 주장도 팽팽하게 맞선다 [7, 20, 26-31].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-18*
|
||||
- Raw Source: [[00_Raw/2026-04-20/API 응답 및 상태 모델링 (State Modeling and API Responses).md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/API 응답 및 상태 모델링 (State Modeling and API Responses).md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-7C91FA
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - AST-Manipulation-Techniques"
|
||||
---
|
||||
|
||||
# [[AST-Manipulation-Techniques]]
|
||||
# [[AST-Manipulation-Techniques|AST-Manipulation-Techniques]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - AST-Manipulation-Techniques"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/AST-Manipulation-Techniques.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/AST-Manipulation-Techniques.md
|
||||
---
|
||||
|
||||
+4
-4
@@ -1,12 +1,12 @@
|
||||
---
|
||||
id: P-REINFORCE-AST-TRANS
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.99
|
||||
tags: [AST, Abstract Syntax Tree, Transformation, Compiler, Babel]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
# [[Abstract-Syntax-Tree-Transformation]] (AST 변환)
|
||||
# [[Abstract-Syntax-Tree-Transformation|Abstract-Syntax-Tree-Transformation]] (AST 변환)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "코드를 조각하듯 변형하라." 소스 코드를 트리 구조로 분해한 뒤, 특정 노드를 추가, 삭제, 수정하여 완전히 새로운 기능이 담긴 코드로 재생산하는 현대 개발 도구의 핵심 마술이다.
|
||||
@@ -23,5 +23,5 @@ last_reinforced: 2026-04-20
|
||||
- 무분별한 AST 변환은 디버깅을 지옥으로 만든다. 실행되는 코드와 원본 소스 코드가 결합력을 잃기 때문이다. 따라서 `Source Map` 생성을 철저히 관리하여 변환 후에도 원본 위치를 추적할 수 있게 해야 한다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[Abstract-Syntax-Tree-Traversal]] , [[Custom-ESLint-Rules-Development]]
|
||||
- Foundation: [[Computational Theory & Math/Information Theory]]
|
||||
- Related: [[Abstract-Syntax-Tree-Traversal|Abstract-Syntax-Tree-Traversal]] , [[Custom-ESLint-Rules-Development|Custom-ESLint-Rules-Development]]
|
||||
- Foundation: Computational Theory & Math/Information Theory
|
||||
|
||||
+4
-4
@@ -1,12 +1,12 @@
|
||||
---
|
||||
id: P-REINFORCE-AST-TRAVERSAL
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.99
|
||||
tags: [AST, Abstract Syntax Tree, Traversal, Visitor Pattern, Static Analysis]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
# [[Abstract-Syntax-Tree-Traversal]] (AST 순회)
|
||||
# [[Abstract-Syntax-Tree-Traversal|Abstract-Syntax-Tree-Traversal]] (AST 순회)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "언어의 숲을 여행하는 지도 제작자." 코드의 나무(AST)를 뿌리부터 잎새까지 탐험하며, 특정 패턴(예: 변수 선언, 함수 호출)을 찾아내 분석하고 수집하는 행위다.
|
||||
@@ -23,5 +23,5 @@ last_reinforced: 2026-04-20
|
||||
- 트리가 너무 거대하면(수만 줄의 코드) 순회 성능이 급격히 저하된다. 이를 위해 필요한 노드만 선택적으로 방문하거나, 증분식(Incremental) 분석을 통해 변경된 부분만 다시 순회하는 최적화 전략이 실무 도구(ESLint 등)에 필수적이다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[Abstract-Syntax-Tree-Transformation]] , [[ESLint-Static-Analysis]]
|
||||
- Strategy: [[Reliability_Safety_First]]
|
||||
- Related: [[Abstract-Syntax-Tree-Transformation|Abstract-Syntax-Tree-Transformation]] , [[ESLint-Static-Analysis|ESLint-Static-Analysis]]
|
||||
- Strategy: [[Reliability_Safety_First|Reliability_Safety_First]]
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AI-99D2E0
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Batch 9 - Wikified Accessibility (A11y)"
|
||||
---
|
||||
|
||||
# [[Accessibility (A11y)]]
|
||||
# [[Accessibility (A11y)|Accessibility (A11y)]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
>
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Batch 9 - Wikified Accessibility (A11y)"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Accessibility (A11y).md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Accessibility (A11y).md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-2801A2
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Batch 10 - Wikified Accessibility-Compliance-WCAG"
|
||||
---
|
||||
|
||||
# [[Accessibility-Compliance-WCAG]]
|
||||
# [[Accessibility-Compliance-WCAG|Accessibility-Compliance-WCAG]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 핵심 내용 요약 예정
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Batch 10 - Wikified Accessibility-Compliance-WCAG"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Accessibility-Compliance-WCAG.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Accessibility-Compliance-WCAG.md
|
||||
---
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
id: P-REINFORCE-AI-ADDITIVE-TYPE
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.97
|
||||
tags: [Type Theory, Additive Type Logic, TypeScript, Category Theory]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
# [[Additive-Type-Logic]] (가법 타입 논리)
|
||||
# [[Additive-Type-Logic|Additive-Type-Logic]] (가법 타입 논리)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "타입은 집합이다." 서로 다른 타입 지식을 더하여 더 크고 정교한 타입을 형성하고, 이를 통해 런타임 오류 가능성을 원천 봉쇄하는 조합론적 타입 설계 철학이다.
|
||||
@@ -23,5 +23,5 @@ last_reinforced: 2026-04-20
|
||||
- 과도한 타입 덧셈(Intersection)은 타입 추론 속도를 늦추고 에러 메시지를 난해하게 만든다. 특히 무한 재귀적인 타입 결합은 컴파일러가 포기하게 만들 수 있으므로, `Interface Extension`을 통해 적절히 계층화하는 설계가 권장된다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[TypeScript-Advanced-Type-System-Design]] , [[Category_Theory]]
|
||||
- Foundation: [[Computational Theory & Math/Information Theory]]
|
||||
- Related: [[TypeScript-Advanced-Type-System-Design|TypeScript-Advanced-Type-System-Design]] , Category_Theory
|
||||
- Foundation: Computational Theory & Math/Information Theory
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-30D321
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Batch 10 - Wikified Affective User Interfaces (AUI)"
|
||||
---
|
||||
|
||||
# [[Affective User Interfaces (AUI)]]
|
||||
# [[Affective User Interfaces (AUI)|Affective User Interfaces (AUI)]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 핵심 내용 요약 예정
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Batch 10 - Wikified Affective User Interfaces (AUI
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Affective User Interfaces (AUI).md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Affective User Interfaces (AUI).md
|
||||
---
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
id: P-REINFORCE-AI-AGENCY
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.98
|
||||
tags: [Agency, Game Design, Player Choice, Narrative, Ludology]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
# [[Agency-in-Game-Design]] (게임 디자인에서의 에이전시)
|
||||
# [[Agency-in-Game-Design|Agency-in-Game-Design]] (게임 디자인에서의 에이전시)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "내가 한 행동이 세상을 바꿨다." 플레이어가 자신의 의지대로 선택을 내리고, 그 선택이 게임의 상태나 서사에 유의미한 변화를 일으킬 때 발생하는 강력한 몰입의 근원이다.
|
||||
@@ -23,5 +23,5 @@ last_reinforced: 2026-04-20
|
||||
- '에이전시의 환상'도 기술이다. 사실은 정해진 길을 가고 있어도, 마치 자신이 선택한 것처럼 느끼게 만드는 레벨 디자인의 기교(Invisible hand)가 플레이어의 스트레스를 줄이면서 만족감을 극대화한다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[BioShock (2007)]] , [[Ludo-Narrative-Dissonance]]
|
||||
- Context: [[Immersive-Sim-Genre]]
|
||||
- Related: [[BioShock (2007)|BioShock (2007)]] , [[Ludo-Narrative-Dissonance|Ludo-Narrative-Dissonance]]
|
||||
- Context: [[Immersive-Sim-Genre|Immersive-Sim-Genre]]
|
||||
|
||||
+4
-4
@@ -1,12 +1,12 @@
|
||||
---
|
||||
id: P-REINFORCE-AI-AGENT-COMMUNICATION
|
||||
category: "[[10_Wiki/💡 Topics/AI]]"
|
||||
category: "10_Wiki/💡 Topics/AI"
|
||||
confidence_score: 0.97
|
||||
tags: [AI, MultiAgent, Communication, Protocols]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
# [[Agent Communication Protocol (에이전트 통신 규약)]]
|
||||
# [[Agent Communication Protocol (에이전트 통신 규약)|Agent Communication Protocol (에이전트 통신 규약)]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "AI 에이전트들이 서로 협력하기 위한 공용어." 분산된 AI 개체들이 정보를 교수하고, 협상하며, 복잡한 임무를 공동으로 해결하기 위해 정의된 데이터 교환 및 행동 조율 표준이다.
|
||||
@@ -24,5 +24,5 @@ last_reinforced: 2026-04-20
|
||||
- 과거의 규약은 엄격한 기호 논리 기반이었으나, 현대 LLM 기반 에이전트들은 자연어(Natural Language)를 통신 수단으로 주로 사용한다. 이는 유연하지만 '모호함'의 문제를 야기하므로, 최근에는 JSON Schema 기반의 정형화된 통신 포맷을 강제하여 신뢰성을 확보하는 추세다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[AI 에이전트 (AI Agent)]] , [[Multi-Agent System (다중 에이전트 시스템)]]
|
||||
- Standard: [[Model Context Protocol (MCP)]]
|
||||
- Related: [[AI 에이전트 (AI Agent)|AI 에이전트 (AI Agent)]] , [[Multi-Agent System (다중 에이전트 시스템)|Multi-Agent System (다중 에이전트 시스템)]]
|
||||
- Standard: [[Model Context Protocol (MCP)|Model Context Protocol (MCP)]]
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-1363FF
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Batch 10 - Wikified Agile-UX-Integration"
|
||||
---
|
||||
|
||||
# [[Agile-UX-Integration]]
|
||||
# [[Agile-UX-Integration|Agile-UX-Integration]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 핵심 내용 요약 예정
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Batch 10 - Wikified Agile-UX-Integration"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Agile-UX-Integration.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Agile-UX-Integration.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-4B67E4
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Mega Batch - Wikified Americans-with-Disabilities-Act-ADA"
|
||||
---
|
||||
|
||||
# [[Americans-with-Disabilities-Act-ADA]]
|
||||
# [[Americans-with-Disabilities-Act-ADA|Americans-with-Disabilities-Act-ADA]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 핵심 요약 작업 진행 중
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Mega Batch - Wikified Americans-with-Disabilities-
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Americans-with-Disabilities-Act-ADA.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Americans-with-Disabilities-Act-ADA.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-35F340
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Mega Batch - Wikified Apple Human Interface Guidelines"
|
||||
---
|
||||
|
||||
# [[Apple Human Interface Guidelines]]
|
||||
# [[Apple Human Interface Guidelines|Apple Human Interface Guidelines]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 핵심 요약 작업 진행 중
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Mega Batch - Wikified Apple Human Interface Guidel
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Apple Human Interface Guidelines.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Apple Human Interface Guidelines.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-1A4850
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Arkane-Studios"
|
||||
---
|
||||
|
||||
# [[Arkane-Studios]]
|
||||
# [[Arkane-Studios|Arkane-Studios]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Arkane-Studios"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Arkane-Studios.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Arkane-Studios.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-DF407B
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Assignability-Rules"
|
||||
---
|
||||
|
||||
# [[Assignability-Rules]]
|
||||
# [[Assignability-Rules|Assignability-Rules]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Assignability-Rules"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Assignability-Rules.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Assignability-Rules.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-6974BC
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Assistive-Technology-Interoperability"
|
||||
---
|
||||
|
||||
# [[Assistive-Technology-Interoperability]]
|
||||
# [[Assistive-Technology-Interoperability|Assistive-Technology-Interoperability]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Assistive-Technology-Interoper
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Assistive-Technology-Interoperability.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Assistive-Technology-Interoperability.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-E24948
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Mega Batch 2 - Wikified Atomic Design Pattern"
|
||||
---
|
||||
|
||||
# [[Atomic Design Pattern]]
|
||||
# [[Atomic Design Pattern|Atomic Design Pattern]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> Atomic Design Pattern은 UI 컴포넌트의 역할과 계층을 분명하게 만들어 관심사를 분리하기 위해 도입된 계층 구조화 방법론입니다 [1]. 이는 단순히 컴포넌트의 이름이나 분리 그 자체보다, 복잡하게 얽혀 있던 컴포넌트들을 세밀한 기준에 따라 역할과 범주별로 쉽게 정돈할 수 있도록 돕는 역할을 합니다 [1].
|
||||
@@ -23,11 +23,11 @@ github_commit: "[P-Reinforce] Mega Batch 2 - Wikified Atomic Design Pattern"
|
||||
- **정책 변화:** Design & Experience 카테고리의 전문성 확보 및 링크 밀도 최적화.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[UI 컴포넌트]], [[관심사의 분리]]
|
||||
- **Projects/Contexts:** [[프론트엔드 개발]]
|
||||
- **Related Topics:** UI 컴포넌트, 관심사의 분리
|
||||
- **Projects/Contexts:** 프론트엔드 개발
|
||||
- **Contradictions/Notes:** 소스에서는 Atomic Design Pattern을 도입할 때 atoms, molecules, organisms 같은 이름과 단순한 구조적 분리에 집착하기보다는, 컴포넌트를 세밀하게 나눌 수 있는 '기준'을 마련하여 복잡성을 정돈하는 것이 이 패턴의 주요한 역할이라고 강조합니다 [1].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-18*
|
||||
- Raw Source: [[00_Raw/2026-04-20/Atomic Design Pattern.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Atomic Design Pattern.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-50A53E
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Auction-Theory"
|
||||
---
|
||||
|
||||
# [[Auction-Theory]]
|
||||
# [[Auction-Theory|Auction-Theory]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Auction-Theory"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Auction-Theory.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Auction-Theory.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-0213E9
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.95
|
||||
tags: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Mega Batch 2 - Wikified Augmented Reality (AR) Interfaces"
|
||||
---
|
||||
|
||||
# [[Augmented Reality (AR) Interfaces]]
|
||||
# [[Augmented Reality (AR) Interfaces|Augmented Reality (AR) Interfaces]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 작업 중
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Mega Batch 2 - Wikified Augmented Reality (AR) Int
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Augmented Reality (AR) Interfaces.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Augmented Reality (AR) Interfaces.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-D03F74
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Automated-Client-Generation"
|
||||
---
|
||||
|
||||
# [[Automated-Client-Generation]]
|
||||
# [[Automated-Client-Generation|Automated-Client-Generation]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Automated-Client-Generation"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Automated-Client-Generation.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Automated-Client-Generation.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-F3ADB5
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Bay 12 Games"
|
||||
---
|
||||
|
||||
# [[Bay 12 Games]]
|
||||
# [[Bay 12 Games|Bay 12 Games]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Bay 12 Games"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Bay 12 Games.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Bay 12 Games.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-C6F58A
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Bazel"
|
||||
---
|
||||
|
||||
# [[Bazel]]
|
||||
# [[Bazel|Bazel]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Bazel"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Bazel.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Bazel.md
|
||||
---
|
||||
|
||||
+4
-4
@@ -1,12 +1,12 @@
|
||||
---
|
||||
id: P-REINFORCE-AI-BDD
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.98
|
||||
tags: [BDD, Behavior Driven Development, TDD, Agile, Gherkin]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
# [[Behavior-Driven-Development-(BDD)]] (행동 중심 개발)
|
||||
# [[Behavior-Driven-Development (BDD)|Behavior-Driven-Development-(BDD)]] (행동 중심 개발)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "코딩하기 전에 대화부터 하라." 기획자, 디자이너, 개발자가 모여 사용자의 행동 시나리오(Given/When/Then)를 명확히 정의하고, 이를 검증하는 테스트 코드를 먼저 작성하며 개발하는 협업 중심 방법론이다.
|
||||
@@ -23,5 +23,5 @@ last_reinforced: 2026-04-20
|
||||
- BDD는 초기 시나리오 작성에 시간이 많이 든다. 하지만 개발 중반 이후 발생하는 '기획 번복'과 '커뮤니케이션 미스'로 인한 손실을 생각하면, 장기적으로는 반드시 이득이 남는 고수익 투자다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[Test-Driven-Development-(TDD)]] , [[Agile-Software-Development]]
|
||||
- Strategy: [[User-Experience-Design]]
|
||||
- Related: Test-Driven-Development-(TDD) , Agile-Software-Development
|
||||
- Strategy: [[User-Experience-Design|User-Experience-Design]]
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-395B33
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - BioShock (Rapture)] [Dark Souls (Environmental Lore)] [Gone Home (Domestic Narrative Architecture)"
|
||||
---
|
||||
|
||||
# [[BioShock (Rapture)] [Dark Souls (Environmental Lore)] [Gone Home (Domestic Narrative Architecture)]]
|
||||
# [[BioShock (Rapture)] [Dark Souls (Environmental Lore)] [Gone Home (Domestic Narrative Architecture)|BioShock (Rapture)] [Dark Souls (Environmental Lore)] [Gone Home (Domestic Narrative Architecture)]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - BioShock (Rapture)] [Dark Soul
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/BioShock (Rapture)], [Dark Souls (Environmental Lore)], [Gone Home (Domestic Narrative Architecture).md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/BioShock (Rapture)], [Dark Souls (Environmental Lore)], [Gone Home (Domestic Narrative Architecture).md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-37BB2D
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Borderlands-Art-Direction"
|
||||
---
|
||||
|
||||
# [[Borderlands-Art-Direction]]
|
||||
# [[Borderlands-Art-Direction|Borderlands-Art-Direction]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Borderlands-Art-Direction"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Borderlands-Art-Direction.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Borderlands-Art-Direction.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-F8764E
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Boundary-Layer-Validation"
|
||||
---
|
||||
|
||||
# [[Boundary-Layer-Validation]]
|
||||
# [[Boundary-Layer-Validation|Boundary-Layer-Validation]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Boundary-Layer-Validation"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Boundary-Layer-Validation.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Boundary-Layer-Validation.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-3CA58B
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Branded Types in TypeScript"
|
||||
---
|
||||
|
||||
# [[Branded Types in TypeScript]]
|
||||
# [[Branded Types in TypeScript|Branded Types in TypeScript]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Branded Types in TypeScript"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Branded Types in TypeScript.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Branded Types in TypeScript.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-849CEC
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Buck2"
|
||||
---
|
||||
|
||||
# [[Buck2]]
|
||||
# [[Buck2|Buck2]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Buck2"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Buck2.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Buck2.md
|
||||
---
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
id: P-REINFORCE-BIZ-STRATEGY
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.98
|
||||
tags: [Business Strategy, Market Analysis, Competitive Advantage, Innovation]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
# [[Business-Strategy]] (비즈니스 전략)
|
||||
# [[Business-Strategy|Business-Strategy]] (비즈니스 전략)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "어디서 싸울 것인가보다, 어떻게 이길 것인가를 결정하는 것." 한정된 자원을 집중하여 지속 가능한 경쟁 우위를 창출하고, 고객에게 독보적인 가치를 전달하는 의사결정의 지도다.
|
||||
@@ -23,5 +23,5 @@ last_reinforced: 2026-04-20
|
||||
- 현대의 전략은 '고정된 계획'이 아니라 '유연한 적응'이다. AI 시대에는 데이터 피드백 루프를 통해 전략을 실시간으로 수정하는 'Agile Strategy'가 전통적인 5개년 계획을 대체하고 있다.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- Related: [[Business-Driven-Security]] , [[Innovation-Management]]
|
||||
- Strategy: [[User-Experience-Design]]
|
||||
- Related: Business-Driven-Security , Innovation-Management
|
||||
- Strategy: [[User-Experience-Design|User-Experience-Design]]
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-658665
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Causal Loop Diagramming"
|
||||
---
|
||||
|
||||
# [[Causal Loop Diagramming]]
|
||||
# [[Causal Loop Diagramming|Causal Loop Diagramming]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Causal Loop Diagramming"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Causal Loop Diagramming.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Causal Loop Diagramming.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-BE3FDC
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Choice Architecture in Digital UX"
|
||||
---
|
||||
|
||||
# [[Choice Architecture in Digital UX]]
|
||||
# [[Choice Architecture in Digital UX|Choice Architecture in Digital UX]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Choice Architecture in Digital
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Choice Architecture in Digital UX.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Choice Architecture in Digital UX.md
|
||||
---
|
||||
|
||||
+5
-5
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-C2220F
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Chrome User Experience Report (CrUX)"
|
||||
---
|
||||
|
||||
# [[Chrome User Experience Report (CrUX)]]
|
||||
# [[Chrome User Experience Report (CrUX)|Chrome User Experience Report (CrUX)]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -30,11 +30,11 @@ github_commit: "[P-Reinforce] Continuous Worker - Chrome User Experience Report
|
||||
- **정책 변화:** Design & Experience 분야의 자동 자산화 수행.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[Interaction to Next Paint (INP)]], [[Real User Monitoring (RUM)]]
|
||||
- **Projects/Contexts:** [[PageSpeed Insights]], [[BigQuery]], [[Chrome DevTools]]
|
||||
- **Related Topics:** [[Core Web Vitals|Core Web Vitals]], [[Largest Contentful Paint (LCP)|Largest Contentful Paint (LCP)]], [[Interaction to Next Paint (INP)|Interaction to Next Paint (INP)]], [[Real User Monitoring (RUM)|Real User Monitoring (RUM)]]
|
||||
- **Projects/Contexts:** [[PageSpeed Insights|PageSpeed Insights]], BigQuery, [[Chrome DevTools|Chrome DevTools]]
|
||||
- **Contradictions/Notes:** 소스에 따르면 CrUX는 실제 사용자 성능을 파악하는 데 매우 유용한 지표지만, 최소 트래픽 기준을 충족하지 못하는 페이지는 데이터가 수집/표시되지 않는다는 한계가 명확히 존재합니다 [6, 8]. 또한 특정 세부 데이터(LCP 하위 요소)는 PageSpeed Insights가 아닌 별도의 서드파티 도구에서만 조회 가능하다는 점을 유의해야 합니다 [9].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-19*
|
||||
- Raw Source: [[00_Raw/2026-04-20/Chrome User Experience Report (CrUX).md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Chrome User Experience Report (CrUX).md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-E4F919
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Code Formatting"
|
||||
---
|
||||
|
||||
# [[Code Formatting]]
|
||||
# [[Code Formatting|Code Formatting]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 코드 포맷팅(Code Formatting)은 들여쓰기, 공백, 줄 바꿈, 따옴표 등 소스 코드의 시각적 스타일과 레이아웃을 일관된 규칙에 맞게 정리하는 과정입니다. 이는 코드의 런타임 논리나 실행 의미를 변경하지 않고 코드의 구조적 형태만 변환하며, 일반적으로 Prettier나 Black과 같은 자동화 도구(Formatter)를 통해 수행됩니다. 일관된 코드 포맷팅은 가독성을 향상시키고 협업 시 개발자 간의 미적 선호도 차이로 인한 마찰과 인지적 부하를 줄여주는 핵심적인 역할을 합니다.
|
||||
@@ -30,11 +30,11 @@ github_commit: "[P-Reinforce] Continuous Worker - Code Formatting"
|
||||
- **정책 변화:** Design & Experience 분야의 자동 자산화 수행.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[Linter]], [[Prettier]], [[Code Stylometry]], [[Code Readability]]
|
||||
- **Projects/Contexts:** [[Automated Code Governance]], [[CI/CD Pipeline]]
|
||||
- **Related Topics:** [[린터 (Linter)|Linter]], [[Prettier|Prettier]], [[Code Stylometry (코드 문체론)|Code Stylometry]], Code Readability
|
||||
- **Projects/Contexts:** Automated Code Governance, [[CI-CD Pipeline (지속적 통합 및 배포)|CI/CD Pipeline]]
|
||||
- **Contradictions/Notes:** ESLint와 같은 Linter 도구 내에도 자체적인 포맷팅 규칙이 존재하여 Prettier와 동시 사용 시 규칙 충돌(Infinite feedback loop)이 일어날 수 있습니다. 따라서 Linter의 포맷팅 기능을 끄고 이를 Prettier에 전담시키는 구성 최적화가 필수적입니다 [12, 18].
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-19*
|
||||
- Raw Source: [[00_Raw/2026-04-20/Code Formatting.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Code Formatting.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-8C858F
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Cognitive Aging Research"
|
||||
---
|
||||
|
||||
# [[Cognitive Aging Research]]
|
||||
# [[Cognitive Aging Research|Cognitive Aging Research]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Cognitive Aging Research"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Cognitive Aging Research.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Cognitive Aging Research.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-0C898E
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Cognitive Dissonance"
|
||||
---
|
||||
|
||||
# [[Cognitive Dissonance]]
|
||||
# [[Cognitive Dissonance|Cognitive Dissonance]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Cognitive Dissonance"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Cognitive Dissonance.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Cognitive Dissonance.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-634AD5
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Cognitive-Flexibility"
|
||||
---
|
||||
|
||||
# [[Cognitive-Flexibility]]
|
||||
# [[Cognitive-Flexibility|Cognitive-Flexibility]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Cognitive-Flexibility"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Cognitive-Flexibility.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Cognitive-Flexibility.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-7EA6B8
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Cognitive-Psychology"
|
||||
---
|
||||
|
||||
# [[Cognitive-Psychology]]
|
||||
# [[Cognitive-Psychology|Cognitive-Psychology]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Cognitive-Psychology"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Cognitive-Psychology.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Cognitive-Psychology.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-527F62
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Complexity Science in Economics"
|
||||
---
|
||||
|
||||
# [[Complexity Science in Economics]]
|
||||
# [[Complexity Science in Economics|Complexity Science in Economics]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Complexity Science in Economic
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Complexity Science in Economics.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Complexity Science in Economics.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-802544
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Computation-Caching-Strategies"
|
||||
---
|
||||
|
||||
# [[Computation-Caching-Strategies]]
|
||||
# [[Computation-Caching-Strategies|Computation-Caching-Strategies]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Computation-Caching-Strategies
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Computation-Caching-Strategies.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Computation-Caching-Strategies.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-45C605
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Computational Thinking"
|
||||
---
|
||||
|
||||
# [[Computational Thinking]]
|
||||
# [[Computational Thinking|Computational Thinking]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Computational Thinking"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Computational Thinking.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Computational Thinking.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-668FCE
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Computational-Fluid-Dynamics"
|
||||
---
|
||||
|
||||
# [[Computational-Fluid-Dynamics]]
|
||||
# [[Computational-Fluid-Dynamics|Computational-Fluid-Dynamics]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Computational-Fluid-Dynamics"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Computational-Fluid-Dynamics.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Computational-Fluid-Dynamics.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-F3246D
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Conditional-Types"
|
||||
---
|
||||
|
||||
# [[Conditional-Types]]
|
||||
# [[Conditional-Types|Conditional-Types]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Conditional-Types"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Conditional-Types.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Conditional-Types.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-ED632C
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Content-Strategy"
|
||||
---
|
||||
|
||||
# [[Content-Strategy]]
|
||||
# [[Content-Strategy|Content-Strategy]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Content-Strategy"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Content-Strategy.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Content-Strategy.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-1F7EE7
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Contract-Driven-Development"
|
||||
---
|
||||
|
||||
# [[Contract-Driven-Development]]
|
||||
# [[Contract-Driven-Development|Contract-Driven-Development]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Contract-Driven-Development"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Contract-Driven-Development.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Contract-Driven-Development.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-B0C45D
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Contract-First-Development"
|
||||
---
|
||||
|
||||
# [[Contract-First-Development]]
|
||||
# [[Contract-First-Development|Contract-First-Development]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Contract-First-Development"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Contract-First-Development.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Contract-First-Development.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-7A6306
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Contract-Testing"
|
||||
---
|
||||
|
||||
# [[Contract-Testing]]
|
||||
# [[Contract-Testing|Contract-Testing]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Contract-Testing"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Contract-Testing.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Contract-Testing.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-62A6A2
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Contravariance-and-Covariance"
|
||||
---
|
||||
|
||||
# [[Contravariance-and-Covariance]]
|
||||
# [[Contravariance-and-Covariance|Contravariance-and-Covariance]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Contravariance-and-Covariance"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Contravariance-and-Covariance.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Contravariance-and-Covariance.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-091CD8
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Creativity-and-Cognitive-Complexity"
|
||||
---
|
||||
|
||||
# [[Creativity-and-Cognitive-Complexity]]
|
||||
# [[Creativity-and-Cognitive-Complexity|Creativity-and-Cognitive-Complexity]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Creativity-and-Cognitive-Compl
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Creativity-and-Cognitive-Complexity.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Creativity-and-Cognitive-Complexity.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-A653EF
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Critical Design"
|
||||
---
|
||||
|
||||
# [[Critical Design]]
|
||||
# [[Critical Design|Critical Design]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Critical Design"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Critical Design.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Critical Design.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-5B4AE2
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Cryptoeconomics"
|
||||
---
|
||||
|
||||
# [[Cryptoeconomics]]
|
||||
# [[Cryptoeconomics|Cryptoeconomics]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Cryptoeconomics"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Cryptoeconomics.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Cryptoeconomics.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-938B32
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Dark Souls (Environmental Storytelling)"
|
||||
---
|
||||
|
||||
# [[Dark Souls (Environmental Storytelling)]]
|
||||
# [[Dark Souls (Environmental Storytelling)|Dark Souls (Environmental Storytelling)]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Dark Souls (Environmental Stor
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Dark Souls (Environmental Storytelling).md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Dark Souls (Environmental Storytelling).md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-476815
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Data-Sanitization"
|
||||
---
|
||||
|
||||
# [[Data-Sanitization]]
|
||||
# [[Data-Sanitization|Data-Sanitization]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Data-Sanitization"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Data-Sanitization.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Data-Sanitization.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-164A4F
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Declaration Merging"
|
||||
---
|
||||
|
||||
# [[Declaration Merging]]
|
||||
# [[Declaration Merging|Declaration Merging]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Declaration Merging"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Declaration Merging.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Declaration Merging.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-6586E8
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Declaration-Merging"
|
||||
---
|
||||
|
||||
# [[Declaration-Merging]]
|
||||
# [[Declaration-Merging|Declaration-Merging]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Declaration-Merging"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Declaration-Merging.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Declaration-Merging.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-408E53
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Depth-Subtyping"
|
||||
---
|
||||
|
||||
# [[Depth-Subtyping]]
|
||||
# [[Depth-Subtyping|Depth-Subtyping]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Depth-Subtyping"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Depth-Subtyping.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Depth-Subtyping.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-F6D12C
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Design-Thinking"
|
||||
---
|
||||
|
||||
# [[Design-Thinking]]
|
||||
# [[Design-Thinking|Design-Thinking]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Design-Thinking"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Design-Thinking.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Design-Thinking.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-2C4230
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Design-Tokens"
|
||||
---
|
||||
|
||||
# [[Design-Tokens]]
|
||||
# [[Design-Tokens|Design-Tokens]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Design-Tokens"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Design-Tokens.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Design-Tokens.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-FE01D2
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Diegetic UI"
|
||||
---
|
||||
|
||||
# [[Diegetic UI]]
|
||||
# [[Diegetic UI|Diegetic UI]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Diegetic UI"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Diegetic UI.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Diegetic UI.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-9F62F4
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Diegetic-Interface"
|
||||
---
|
||||
|
||||
# [[Diegetic-Interface]]
|
||||
# [[Diegetic-Interface|Diegetic-Interface]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Diegetic-Interface"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Diegetic-Interface.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Diegetic-Interface.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-1CBB5B
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Digital Humanities"
|
||||
---
|
||||
|
||||
# [[Digital Humanities]]
|
||||
# [[Digital Humanities|Digital Humanities]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Digital Humanities"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Digital Humanities.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Digital Humanities.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-6DF617
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Digital Twin Interfaces"
|
||||
---
|
||||
|
||||
# [[Digital Twin Interfaces]]
|
||||
# [[Digital Twin Interfaces|Digital Twin Interfaces]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Digital Twin Interfaces"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Digital Twin Interfaces.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Digital Twin Interfaces.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-C13BDE
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Digital-Heritage-Preservation"
|
||||
---
|
||||
|
||||
# [[Digital-Heritage-Preservation]]
|
||||
# [[Digital-Heritage-Preservation|Digital-Heritage-Preservation]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Digital-Heritage-Preservation"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Digital-Heritage-Preservation.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Digital-Heritage-Preservation.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-B1AF91
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Digital-Humanities"
|
||||
---
|
||||
|
||||
# [[Digital-Humanities]]
|
||||
# [[Digital-Humanities|Digital-Humanities]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Digital-Humanities"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Digital-Humanities.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Digital-Humanities.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-5767B8
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Digital-Transformation-Strategy"
|
||||
---
|
||||
|
||||
# [[Digital-Transformation-Strategy]]
|
||||
# [[Digital-Transformation-Strategy|Digital-Transformation-Strategy]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Digital-Transformation-Strateg
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Digital-Transformation-Strategy.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Digital-Transformation-Strategy.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-52E973
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Divergent-Thinking"
|
||||
---
|
||||
|
||||
# [[Divergent-Thinking]]
|
||||
# [[Divergent-Thinking|Divergent-Thinking]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Divergent-Thinking"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Divergent-Thinking.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Divergent-Thinking.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-31CA9B
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Duck-Typing"
|
||||
---
|
||||
|
||||
# [[Duck-Typing]]
|
||||
# [[Duck-Typing|Duck-Typing]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Duck-Typing"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Duck-Typing.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Duck-Typing.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-8B5736
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Dwarf Fortress"
|
||||
---
|
||||
|
||||
# [[Dwarf Fortress]]
|
||||
# [[Dwarf Fortress|Dwarf Fortress]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Dwarf Fortress"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Dwarf Fortress.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Dwarf Fortress.md
|
||||
---
|
||||
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-E7164D
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - E-commerce-Conversion-Optimization"
|
||||
---
|
||||
|
||||
# [[E-commerce-Conversion-Optimization]]
|
||||
# [[E-commerce-Conversion-Optimization|E-commerce-Conversion-Optimization]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - E-commerce-Conversion-Optimiza
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/E-commerce-Conversion-Optimization.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/E-commerce-Conversion-Optimization.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-6D8C66
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - ESL Pro Tour"
|
||||
---
|
||||
|
||||
# [[ESL Pro Tour]]
|
||||
# [[ESL Pro Tour|ESL Pro Tour]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - ESL Pro Tour"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/ESL Pro Tour.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/ESL Pro Tour.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-787585
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - ESLint-Plugin-TypeScript"
|
||||
---
|
||||
|
||||
# [[ESLint-Plugin-TypeScript]]
|
||||
# [[ESLint-Plugin-TypeScript|ESLint-Plugin-TypeScript]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - ESLint-Plugin-TypeScript"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/ESLint-Plugin-TypeScript.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/ESLint-Plugin-TypeScript.md
|
||||
---
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-D5E910
|
||||
category: "[[10_Wiki/💡 Topics/Design & Experience]]"
|
||||
category: "10_Wiki/💡 Topics/Design & Experience"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - Edge-Detection-Algorithms"
|
||||
---
|
||||
|
||||
# [[Edge-Detection-Algorithms]]
|
||||
# [[Edge-Detection-Algorithms|Edge-Detection-Algorithms]]
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> 지식 요약 정보 추출 중...
|
||||
@@ -21,5 +21,5 @@ github_commit: "[P-Reinforce] Continuous Worker - Edge-Detection-Algorithms"
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
|
||||
- Raw Source: [[00_Raw/2026-04-20/Edge-Detection-Algorithms.md]]
|
||||
- Raw Source: 00_Raw/2026-04-20/Edge-Detection-Algorithms.md
|
||||
---
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user