[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/Next.js 환경에서의 UI 컴포넌트 스타일링 및 렌더링 최적화.md

@@ -1,19 +1,19 @@
 # [[Next.js 환경에서의 UI 컴포넌트 스타일링 및 렌더링 최적화]]
 
-## 📌 Brief Summary
-Next.js 환경(특히 App Router 및 React Server Components)에서의 UI 컴포넌트 스타일링은 런타임 오버헤드를 최소화하고 렌더링 성능을 최적화하는 방향으로 진화하고 있습니다 [1]. 과거 널리 쓰이던 런타임 CSS-in-JS는 서버 컴포넌트(RSC) 호환성 문제로 인해 새로운 접근법이 요구되며, 런타임 비용이 없는 Tailwind CSS나 정적 CSS 추출 방식이 대안으로 권장됩니다 [2-4]. 성공적인 렌더링 최적화를 위해서는 서버 컴포넌트를 기본으로 활용하고 동적 스타일링이나 상호작용이 필요한 곳에만 클라이언트 컴포넌트를 제한적으로 배치해야 합니다 [5].
+## 📌[[ brief]] Summary
+[[Next.js]] 환경(특히 App Router 및 [[React Server Components]])에서의 UI 컴포넌트 스타일링은 런타임 오버헤드를 최소화하고 렌더링 성능을 최적화하는 방향으로 진화하고 있습니다 [1]. 과거 널리 쓰이던 런타임 [[CSS-in-JS]]는 서버 컴포넌트(RSC) 호환성 문제로 인해 새로운 접근법이 요구되며, 런타임 비용이 없는 [[Tailwind CSS]]나 정적 CSS 추출 방식이 대안으로 권장됩니다 [2-4]. 성공적인 렌더링 최적화를 위해서는 서버 컴포넌트를 기본으로 활용하고 동적 스타일링이나 상호작용이 필요한 곳에만 클라이언트 컴포넌트를 제한적으로 배치해야 합니다 [5].
 
 ## 📖 Core Content
-* **React Server Components (RSC) 패러다임과 렌더링 최적화:** 
-  Next.js 15의 App Router는 RSC를 핵심 구조로 채택하여, 자바스크립트 번들을 클라이언트에 전송하지 않고 서버에서 HTML을 직접 렌더링합니다 [6, 7]. 성능 최적화를 위해서는 상호작용(상태, 이벤트 핸들러)이 필요한 경우에만 'use client' 디렉티브를 사용하여 클라이언트 컴포넌트를 만들고, 기본적으로는 서버 컴포넌트를 활용하여 자바스크립트 번들 크기를 최소화해야 합니다 [5, 8].
+* **[[React [[Server Components]] (RSC)]] 패러다임과 렌더링 최적화:** 
+  [[Next.js 15]]의 App Router는 RSC를 핵심 구조로 채택하여, 자바스크립트 번들을 클라이언트에 전송하지 않고 서버에서 HTML을 직접 렌더링합니다 [6, 7]. 성능 최적화를 위해서는 상호작용(상태, 이벤트 핸들러)이 필요한 경우에만 'use client' 디렉티브를 사용하여 클라이언트 컴포넌트를 만들고, 기본적으로는 서버 컴포넌트를 활용하여 자바스크립트 번들 크기를 최소화해야 합니다 [5, 8].
 
-* **런타임 CSS-in-JS의 한계 및 호환성 대응 (Styled-components):** 
-  Styled-components나 Emotion 같이 React Context에 의존하는 런타임 CSS-in-JS 라이브러리는 컨텍스트(Context)를 사용할 수 없는 서버 컴포넌트 환경과 근본적으로 호환되지 않는 문제가 있었습니다 [2, 4, 9]. 이를 해결하기 위해 Next.js 15에서는 `useServerInsertedHTML` 훅을 사용하는 'Style Registry' 패턴을 도입하여 서버 렌더링 시 CSS 규칙을 수집해 HTML 헤드에 주입할 수 있게 하였습니다 [10]. 나아가 Styled-components v6.3.0 이상부터는 RSC 환경을 자동 감지하여 인라인 `<style>` 태그를 방출함으로써 별도의 설정 없이 서버 컴포넌트를 지원합니다 [11]. 단, RSC 환경에서는 `ThemeProvider`가 작동하지 않으므로 React Context 대신 CSS 커스텀 속성(CSS variables)을 생성하는 `createTheme` 등을 활용한 정적 테마 적용이 권장됩니다 [11-13].
+* **런타임 CSS-in-JS의 한계 및 호환성 대응 ([[styled-components]]):** 
+  Styled-components나 Emotion 같이 [[React Context]]에 의존하는 런타임 CSS-in-JS 라이브러리는 컨텍스트(Context)를 사용할 수 없는 서버 컴포넌트 환경과 근본적으로 호환되지 않는 문제가 있었습니다 [2, 4, 9]. 이를 해결하기 위해 Next.js 15에서는 `useServerInsertedHTML` 훅을 사용하는 '[[Style Registry]]' 패턴을 도입하여 서버 렌더링 시 CSS 규칙을 수집해 HTML 헤드에 주입할 수 있게 하였습니다 [10]. 나아가 Styled-components v6.3.0 이상부터는 RSC 환경을 자동 감지하여 인라인 `<style>` 태그를 방출함으로써 별도의 설정 없이 서버 컴포넌트를 지원합니다 [11]. 단, RSC 환경에서는 `ThemeProvider`가 작동하지 않으므로 React Context 대신 CSS 커스텀 속성([[CSS Variables]])을 생성하는 `createTheme` 등을 활용한 정적 테마 적용이 권장됩니다 [11-13].
 
 * **Zero-runtime 스타일링 및 Tailwind CSS 도입:** 
-  런타임 자바스크립트 실행 비용을 없애기 위해 Tailwind CSS, CSS Modules, vanilla-extract와 같은 빌드 타임(Build-time) 기반의 Zero-runtime 도구가 App Router 환경에서 적극적으로 권장됩니다 [2, 3, 14]. 특히 Tailwind CSS v4는 자바스크립트 설정 파일 대신 CSS-first 아키텍처(`@theme` 디렉티브)를 채택하여, 브라우저가 자바스크립트 주입 오버헤드 없이 기본적으로 파싱할 수 있는 정적 CSS를 생성합니다 [4, 15, 16].
+  런타임 자바스크립트 실행 비용을 없애기 위해 Tailwind CSS, [[CSS Modules]], [[vanilla-extract]]와 같은 빌드 타임(Build-time) 기반의 Zero-runtime 도구가 App Router 환경에서 적극적으로 권장됩니다 [2, 3, 14]. 특히 [[Tailwind CSS v4]]는 자바스크립트 설정 파일 대신 CSS-first 아키텍처(`@theme` 디렉티브)를 채택하여, 브라우저가 자바스크립트 주입 오버헤드 없이 기본적으로 파싱할 수 있는 정적 CSS를 생성합니다 [4, 15, 16].
 
-* **Core Web Vitals 및 렌더링 성능 지표 영향:** 
+* **[[Core Web Vitals]] 및 렌더링 성능 지표 영향:** 
   스타일링 방식의 선택은 최대 콘텐츠 풀 페인트(LCP) 및 다음 페인트에 대한 상호작용(INP)과 같은 Core Web Vitals에 직접적인 영향을 미칩니다 [17, 18]. 런타임에 동적으로 CSS를 주입하는 방식을 정적 CSS(예: Tailwind CSS)로 전환할 경우, 서버 CPU 처리 시간이 크게 감소하여 첫 바이트 도달 시간(TTFB)과 모바일 기기에서의 반응 속도를 유의미하게 개선할 수 있습니다 [18, 19]. 또한 서버 컴포넌트에서는 프로퍼티 변경에 따른 수많은 동적 스타일 클래스를 생성하는 것보다 데이터 속성(data attributes) 기반의 정적 스타일링을 사용하는 것이 캐싱 및 직렬화 오버헤드 방지에 유리합니다 [11, 20].
 
 ## 🔗 Knowledge Connections