bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

Browse Source
This commit is contained in:
yesung
2026-04-27 18:58:22 +09:00
parent 3424166ea2
commit 6b86b0da4c
2706 changed files with 9074 additions and 7273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend_Mastery/Style Registry Pattern.md
+2 -2
View File
@@ -15,8 +15,8 @@
스타일 레지스트리 패턴을 사용하면 Styled Components를 App Router에서 기능하게 할 수 있으나, 서버와 클라이언트가 각각 렌더링될 때 서로 다른 CSS 클래스 이름을 생성할 경우 하이드레이션 불일치 문제가 발생할 위험이 있습니다. 이를 방지하기 위해 개발자는 반드시 `next.config.js` 설정 파일에서 `styledComponents` 컴파일러 옵션을 활성화하여, 서버와 클라이언트 경계에 걸쳐 일관된 클래스 이름이 생성되도록 처리해야 합니다.
## 🔗 Knowledge Connections
- **Related Topics:** [[React Server Components (RSC)]], [[CSS-in-JS]], [[Next.js App Router]], [[Hydration Mismatch]], [[Styled Components]]
- **Projects/Contexts:** [[Next.js 15]], [[Modern Frontend Engineering Architecture]]
- **Related Topics:** [[React Server Components (RSC)]], [[CSS-in-JS]], [[Next.js App Router]], Hydration Mismatch, [[Styled Components]]
- **Projects/Contexts:** [[Next.js 15]], Modern Frontend Engineering Architecture
- **Contradictions/Notes:** 소스에 따르면 스타일 레지스트리 패턴이 Styled Components를 RSC 환경에서 작동하게 해주는 훌륭한 해결책이긴 하지만, 완전한 RSC 패러다임을 추구하는 아키텍처에서는 직렬화 오버헤드와 자바스크립트 런타임 비용(Runtime Tax)을 피하기 위해 동적 CSS-in-JS 보다는 정적 스타일(Tailwind CSS) 또는 Zero-runtime CSS-in-JS(vanilla-extract) 방식을 권장하기도 합니다.
---