docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# [[React Design Tokens]]
|
||||
# [[React Design Tokens|React Design Tokens]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
React 프로젝트에서 디자인 토큰(Design Tokens)은 색상, 타이포그래피, 간격, 그림자 등 인터페이스의 핵심 시각적 속성을 중앙 집중화하여 관리하는 원천 데이터(Single Source of Truth)입니다. 하드코딩된 값을 배제하고 JSON이나 YAML과 같은 기계 판독 가능한 형식으로 저장되며, Style Dictionary 등의 도구를 통해 CSS 변수나 테마 객체로 변환되어 React 컴포넌트에 적용됩니다. 이를 통해 디자인의 일관성을 유지하고, 라이트/다크 모드와 같은 동적 테마(Dynamic Theming) 구현 및 확장 가능한 프론트엔드 UI 시스템 구축을 가능하게 합니다.
|
||||
@@ -24,8 +24,8 @@ React 프로젝트에서 디자인 토큰(Design Tokens)은 색상, 타이포그
|
||||
* 이 접근법은 디자인 토큰을 네이티브 CSS 변수로 직접 노출시키며, Tailwind는 이 변수들을 바탕으로 유틸리티 클래스(예: `--color-primary-500` 선언 시 `bg-primary-500` 자동 생성)를 생성하여 런타임 오버헤드 없이 빠른 성능을 제공합니다 [21, 23].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Tailwind CSS]], [[styled-components]], [[Dynamic Theming]], [[Atomic Design]], [[CSS-in-JS]]
|
||||
- **Projects/Contexts:** [[Style Dictionary]], [[Figma Tokens Studio]], [[React Server Components]]
|
||||
- **Related Topics:** [[Tailwind CSS|Tailwind CSS]], [[styled-components|styled-components]], [[Dynamic Theming|Dynamic Theming]], [[Atomic Design|Atomic Design]], [[CSS-in-JS|CSS-in-JS]]
|
||||
- **Projects/Contexts:** [[Style Dictionary|Style Dictionary]], [[Figma Tokens Studio|Figma Tokens Studio]], [[React Server Components|React Server Components]]
|
||||
- **Contradictions/Notes:** 소스 [15]와 [19]은 디자인 토큰을 기반으로 생성된 CSS 변수를 styled-components와 같은 런타임 CSS-in-JS 라이브러리에 묶어서 사용하는 방식을 설명하지만, 소스 [24-27]와 [28-30]은 React Server Components(RSC) 환경에서는 런타임 CSS-in-JS의 성능 및 호환성 문제로 인해 Tailwind CSS나 CSS Modules처럼 빌드 타임에 정적 CSS를 생성하는 방식(Zero-runtime)으로 전환하는 것을 강력히 권장합니다.
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user