docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
@@ -1,4 +1,4 @@
# [[Next.js App Router 환경의 컴포넌트 스타일링]]
# [[Next.js App Router 환경의 컴포넌트 스타일링|Next.js App Router 환경의 컴포넌트 스타일링]]
## 📌 Brief Summary
Next.js App Router 환경에서는 React Server Components(RSC)와의 호환성 문제로 인해 기존의 런타임 CSS-in-JS(예: styled-components, Emotion) 사용이 부적합합니다 [1, 2]. 대신 확장성과 유지보수성을 위해 런타임 오버헤드가 없는 Tailwind CSS, CSS Modules, 또는 vanilla-extract와 같은 Zero-runtime CSS-in-JS의 사용이 권장됩니다 [2, 3]. 더불어 성공적인 컴포넌트 스타일링과 관리를 위해서는 라우팅 구조와 비즈니스 로직 및 UI 컴포넌트를 분리하는 기능 기반(Feature-Driven) 아키텍처의 도입이 필수적입니다 [4].
@@ -17,8 +17,8 @@ Next.js App Router 환경에서는 React Server Components(RSC)와의 호환성
App Router 환경에서 컴포넌트와 스타일을 유지보수 가능하게 관리하려면, `app/` 디렉토리에 라우트, 컴포넌트, 훅(hooks), 로직을 모두 섞어 넣는 실수를 피해야 합니다 [4]. `app/` 폴더는 라우팅과 레이아웃 관리에만 엄격히 사용하고, 실제 스타일이 적용된 UI 컴포넌트와 비즈니스 로직은 `src/features/`와 같은 디렉토리에 도메인별(Feature-Driven)로 분리하여 캡슐화하는 것이 장기적인 확장성에 유리합니다 [4, 6, 7].
## 🔗 Knowledge Connections
- **Related Topics:** [[CSS Modules]], [[Tailwind CSS]], [[CSS-in-JS]], [[React Server Components]]
- **Projects/Contexts:** [[신규 Next.js App Router 프로젝트 환경 설정]], [[기존 React 프로젝트의 App Router 마이그레이션 전략]], [[기능 기반 아키텍처(Feature-Driven Architecture)]]
- **Related Topics:** [[CSS Modules|CSS Modules]], [[Tailwind CSS|Tailwind CSS]], [[CSS-in-JS|CSS-in-JS]], [[React Server Components|React Server Components]]
- **Projects/Contexts:** 신규 Next.js App Router 프로젝트 환경 설정, 기존 React 프로젝트의 App Router 마이그레이션 전략, 기능 기반 아키텍처(Feature-Driven Architecture)
- **Contradictions/Notes:** 컴포넌트 상태와 프롭스(props)에 기반한 동적 스타일링에 매우 유용하게 쓰이던 styled-components와 Emotion 같은 런타임 CSS-in-JS 기술들이 과거에는 훌륭한 개발자 경험을 제공했지만, Next.js App Router라는 최신 패러다임 하에서는 RSC와의 비호환성 및 런타임 성능 비용으로 인해 권장되지 않는 기술로 전환되었다는 점이 가장 큰 대조를 이룹니다 [1, 3, 8].
---