[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/Next.js App Router Styling Strategies.md

@@ -1,16 +1,16 @@
 # [[Next.js App Router Styling Strategies]]
 
-## 📌 Brief Summary
-Next.js App Router의 도입과 React Server Components(RSC)의 사용은 프론트엔드 스타일링 전략에 큰 변화를 가져왔습니다 [1, 2]. 기존의 런타임 기반 CSS-in-JS 라이브러리는 RSC와의 비호환성 문제로 인해 새로운 표준에서 사용이 권장되지 않습니다 [1, 3]. 그 대신 Tailwind CSS, CSS Modules, 그리고 `vanilla-extract`와 같은 제로 런타임(Zero-runtime) 솔루션들이 유지보수성과 성능을 확보할 수 있는 핵심 전략으로 자리 잡았습니다 [3, 4].
+## 📌[[ brief]] Summary
+[[Next.js App Router]]의 도입과 [[React Server Components]](RSC)의 사용은 프론트엔드 스타일링 전략에 큰 변화를 가져왔습니다 [1, 2]. 기존의 런타임 기반 [[CSS-in-JS]] 라이브러리는 RSC와의 비호환성 문제로 인해 새로운 표준에서 사용이 권장되지 않습니다 [1, 3]. 그 대신 [[Tailwind CSS]], [[CSS Modules]], 그리고 `[[vanilla-extract]]`와 같은 제로 런타임(Zero-runtime) 솔루션들이 유지보수성과 성능을 확보할 수 있는 핵심 전략으로 자리 잡았습니다 [3, 4].
 
 ## 📖 Core Content
-- **React Server Components(RSC)와의 호환성 문제**
-  Next.js App Router의 서버 컴포넌트는 브라우저가 아닌 서버에서 실행되며 HTML을 스트리밍하는 방식으로 동작합니다 [2]. 따라서 React Context에 의존하여 런타임에 CSS를 생성하고 주입하는 `styled-components`나 `Emotion` 같은 CSS-in-JS 라이브러리는 서버 컴포넌트 환경에서 근본적으로 호환되지 않는 문제가 발생합니다 [1, 2]. 이로 인해 런타임 CSS-in-JS는 App Router 프로젝트에서 성능 병목 현상을 유발할 수 있습니다 [1].
+- **React [[Server Components]](RSC)와의 호환성 문제**
+  [[Next.js]] App Router의 서버 컴포넌트는 브라우저가 아닌 서버에서 실행되며 HTML을 스트리밍하는 방식으로 동작합니다 [2]. 따라서 [[React Context]]에 의존하여 런타임에 CSS를 생성하고 주입하는 `[[styled-components]]`나 `Emotion` 같은 CSS-in-JS 라이브러리는 서버 컴포넌트 환경에서 근본적으로 호환되지 않는 문제가 발생합니다 [1, 2]. 이로 인해 런타임 CSS-in-JS는 App Router 프로젝트에서 성능 병목 현상을 유발할 수 있습니다 [1].
 
 - **App Router에 권장되는 스타일링 솔루션**
   2025년 기준 Next.js App Router를 사용하는 신규 프로젝트에서는 다음과 같은 제로 런타임 방식들이 강력하게 권장됩니다 [3].
   - **Tailwind CSS & CSS Modules**: 중소규모 앱 또는 복잡한 애니메이션/스타일 제어가 필요한 경우 각각 가장 적합한 선택지이며, 런타임 오버헤드 없이 RSC와 100% 호환됩니다 [3, 4].
-  - **Zero-runtime CSS-in-JS**: 다수의 테마를 적용해야 하는 대규모 디자인 시스템에서는 `vanilla-extract`가 좋은 대안입니다 [3]. 이는 TypeScript 기반의 타입 안전성을 제공하면서도 빌드 타임에 정적 CSS를 생성하여 RSC 환경과 완벽히 호환됩니다 [3, 4].
+  - **[[Zero-Runtime CSS-in-JS]]**: 다수의 테마를 적용해야 하는 대규모 디자인 시스템에서는 `vanilla-extract`가 좋은 대안입니다 [3]. 이는 TypeScript 기반의 타입 안전성을 제공하면서도 빌드 타임에 정적 CSS를 생성하여 RSC 환경과 완벽히 호환됩니다 [3, 4].
 
 - **유지보수 가능한 확장적(Scalable) 프로젝트 구조 설계**
   App Router를 사용할 때 규모가 커짐에 따라 스타일과 컴포넌트 관리가 어려워지는 것을 막기 위해서는 기능 주도형(Feature-Driven) 아키텍처를 채택해야 합니다 [5]. 
@@ -20,7 +20,7 @@ Next.js App Router의 도입과 React Server Components(RSC)의 사용은 프론
 
 ## 🔗 Knowledge Connections
 - **Related Topics:** [[React Server Components]], [[Tailwind CSS]], [[CSS Modules]], [[Zero-runtime CSS-in-JS]], [[Feature-Driven Architecture]]
-- **Projects/Contexts:** Next.js Scalable Architecture, App Router Migration
+- **Projects/Contexts:** Next.js Scalable [[Architecture]], App Router Migration
 - **Contradictions/Notes:** 기존 Next.js Pages Router 환경에서는 `styled-components`나 `Emotion` 기반의 CSS-in-JS가 문제없이 작동하고 마이그레이션할 필요가 없지만, App Router 환경으로 전환할 때에는 구조적 한계로 인해 Tailwind CSS, CSS Modules 또는 `vanilla-extract` 중 하나로 스타일링 방식을 전환할 것을 반드시 계획해야 합니다 [3].
 
 ---