feat: batch wikification of Skybound balance pass and scalable frontend architectures

Processed 80+ files including Skybound playtest feedback, Monorepo strategies, and Modern Component Patterns.

10_Wiki/Topics/Frontend_Mastery/React Server Components.md

@@ -1,23 +1,18 @@
 # [[React Server Components]]
 
 ## 📌 Brief Summary
-React Server Components(RSC)는 브라우저가 아닌 서버에서 실행되어 HTML을 스트리밍하는 방식의 컴포넌트입니다 [1]. 서버 컴포넌트 내에는 React 컨텍스트(Context)가 존재하지 않기 때문에, 런타임에 의존하는 기존의 CSS-in-JS 라이브러리(예: styled-components, Emotion)와 근본적으로 호환되지 않습니다 [1, 2]. 이러한 특성은 현대 프론트엔드 실무에서 유지보수성과 성능을 고려할 때 Tailwind CSS나 CSS Modules와 같은 Zero-runtime 스타일링 방식이 선호되도록 만드는 주요 원인이 되었습니다 [1, 3].
+React Server Components(RSC)는 브라우저가 아닌 서버에서만 독점적으로 렌더링되어 클라이언트로 JavaScript 번들을 전송하지 않는 React의 혁신적인 렌더링 아키텍처입니다 [1]. 이 환경에서는 React Context에 대한 접근이 불가능하기 때문에 기존의 런타임 기반 스타일링 도구와의 호환성 문제를 야기했으며, 프론트엔드의 스타일링 패러다임에 큰 변화를 가져왔습니다 [2, 3]. 결과적으로 확장 가능한 프론트엔드 아키텍처를 구축하려면 서버와 클라이언트 컴포넌트의 역할을 명확히 분리하고 RSC 환경에 최적화된 스타일링 전략을 채택하는 것이 필수적입니다 [4, 5].
 
 ## 📖 Core Content
-* **동작 원리 및 CSS-in-JS와의 호환성 문제:**
-  React Server Components는 브라우저 환경이 아닌 서버에서 실행되므로 React Context를 사용할 수 없습니다 [1]. 따라서 styled-components나 Emotion처럼 React Context에 의존하여 런타임 시점에 CSS 문자열을 생성하고 주입하는 전통적인 CSS-in-JS 라이브러리들은 RSC와 근본적으로 호환되지 않거나 부분적인 호환성만 가집니다 [1, 2, 4].
-* **Next.js App Router 환경에서의 영향:**
-  Next.js의 App Router와 같은 환경에서는 확장성과 성능 지향적인 관행에 따라 Server Components의 사용이 우선시됩니다 [2, 5]. 이로 인해 RSC를 사용하는 최신 프로젝트에서는 런타임 기반 CSS-in-JS를 사용하는 것이 성능 병목 및 아키텍처 상의 큰 문제가 됩니다 [2].
-* **RSC 도입에 따른 실무 CSS 구조 설계 변화:**
-  이러한 RSC의 제약은 대규모 프론트엔드 프로젝트의 CSS 아키텍처 전략을 런타임 오버헤드가 없는(Zero-runtime) 방향으로 전환시켰습니다 [1].
-  * **Tailwind CSS:** 런타임이 전혀 없어 RSC와 완벽하게 호환되며 [1, 3], 최신 Next.js App Router 프로젝트에서 가장 권장되는 접근 방식 중 하나입니다 [6].
-  * **CSS Modules:** 빌드 타임에 정적 CSS를 생성하여 런타임 비용이 없으며 RSC와 완벽히 호환됩니다 [1, 3]. 복잡한 CSS를 직접 다뤄야 하는 팀에게 선호됩니다 [6].
-  * **vanilla-extract:** RSC 호환성 문제를 해결하기 위해 등장한 대안적 CSS-in-JS 솔루션으로, 빌드 타임에 정적 CSS를 생성하여 타입 안정성을 유지하면서도 RSC와 호환됩니다 [1, 3]. 
+* **RSC의 동작 원리와 컴포넌트 구성**: 서버 컴포넌트는 완전히 서버에서 실행되어 데이터베이스에 직접 접근할 수 있으며, 렌더링된 정적 HTML만을 클라이언트에 전달하므로 성능 최적화와 보안 유지에 탁월합니다 [1]. 반면, 컴포넌트에 상태(state)나 이벤트 핸들러 같은 브라우저 상호작용이 필요한 경우에 한해 `'use client'` 지시어를 명시하여 클라이언트 컴포넌트로 분리해야 합니다 [6]. 모범적인 아키텍처 구성을 위해서는 데이터 패칭을 서버 컴포넌트에서 처리하고 상호작용이 필요한 최소한의 영역만 클라이언트 컴포넌트로 유지해야 합니다 [5, 7].
+* **기존 CSS-in-JS 아키텍처와의 마찰**: RSC의 서버 전용 렌더링 환경은 기존 프론트엔드 생태계에 큰 영향을 미쳤습니다. 특히 `styled-components`나 `Emotion`과 같은 런타임 CSS-in-JS 라이브러리는 테마 주입을 위해 내부적으로 React Context에 크게 의존하는데, RSC 환경에는 React Context가 존재하지 않으므로 구조적인 비호환성(incompatibility)이 발생합니다 [2, 3, 8].
+* **현대적인 스타일링 및 렌더링 전략**: 위와 같은 호환성 문제로 인해 현재 Next.js App Router를 비롯한 RSC 환경에서는 런타임 오버헤드가 없는 빌드 타임 스타일링 방식이 강력히 권장됩니다 [2, 9]. 정적 CSS를 생성하는 `Tailwind CSS`, `CSS Modules` 또는 Zero-runtime CSS-in-JS인 `vanilla-extract`를 도입하는 것이 성능을 향상시키고 복잡성을 줄이는 핵심 전략입니다 [3, 4, 9]. RSC 환경에서는 수많은 고유 클래스를 런타임에 동적으로 생성하기보다, 정적인 스타일을 유지하되 데이터 속성(`data-*` attributes)을 변경하여 상태 변형을 제어하는 방식이 성능 최적화에 유리합니다 [10].
+* **Styled-components의 RSC 지원 및 우회 방식**: 완전한 대안으로 전환하지 못하는 프로젝트를 위해 `styled-components`는 v6.3.0부터 RSC 환경을 자동 감지하는 패치를 적용했습니다 [11]. RSC 환경에서는 `ThemeProvider`가 아무 동작도 하지 않는 패스스루(no-op)로 변하기 때문에, 이를 대체할 수 있도록 CSS Custom Properties(변수) 기반의 테마를 생성하는 `createTheme` 헬퍼 함수를 사용할 것을 권장합니다 [12, 13]. 또한 SSR 시 스타일이 유실되지 않도록 서버에서 렌더링 중 CSS를 수집하여 삽입하는 `Style Registry` 패턴을 구성해야 하며, 인라인 스타일 태그 삽입으로 인해 깨질 수 있는 자식 인덱스 선택자 문제(`:first-child` 등)를 방지하기 위한 `stylisPluginRSC` 플러그인도 함께 제공됩니다 [14, 15].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[CSS-in-JS]], [[Tailwind CSS]], [[CSS Modules]]
+- **Related Topics:** [[Tailwind CSS]], [[Styled-components]], [[CSS-in-JS]], [[Zero-runtime CSS]]
 - **Projects/Contexts:** [[Next.js App Router]]
-- **Contradictions/Notes:** 실무 CSS 설계에서 styled-components와 같은 런타임 CSS-in-JS는 동적 스타일링에 강력한 이점을 제공하지만, React Server Components가 도입된 아키텍처에서는 호환성 및 성능(SSR 복잡성) 문제로 인해 사용이 지양되며 CSS Modules나 Tailwind CSS로 대체되고 있습니다 [1, 2, 6].
+- **Contradictions/Notes:** 소스 [2, 3, 8]에서는 `styled-components` 등 런타임 CSS-in-JS가 React Context 부재로 인해 RSC와 근본적으로 호환되지 않으므로 Next.js App Router 환경에서 피해야 한다고 설명합니다. 하지만 소스 [11-14]에 따르면, `styled-components`는 최신 업데이트를 통해 RSC 환경을 스스로 감지하고 Context 의존을 탈피하여 CSS Custom Properties를 사용하는 새로운 API 및 자동 스타일 인라인 주입 기능으로 RSC 환경에서의 사용을 계속해서 지원하고 있습니다.
 
 ---
 *Last updated: 2026-04-26*