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/SaaS 대시보드 및 이커머스 레이아웃 구축.md
+2 -2
View File
@@ -20,8 +20,8 @@ SaaS 대시보드 및 이커머스 레이아웃 구축은 방대한 데이터와
* **애니메이션 성능 최적화:** 대시보드나 이커머스와 같이 렌더링할 컴포넌트가 많은 곳에서 너비(width), 높이(height), 여백(margin) 등 레이아웃에 영향을 주는 속성을 애니메이션화하면 값비싼 리플로우(Reflow)와 리페인트(Repaint)가 발생하여 성능이 저하됩니다 [13, 14]. 따라서 렌더링 성능을 최적화하기 위해서는 GPU 가속을 활용할 수 있는 `transform`이나 `opacity` 위주로 애니메이션을 설계해야 합니다 [14-16].
## 🔗 Knowledge Connections
- **Related Topics:** [[CSS Grid]], [[Flexbox]], [[컨테이너 쿼리 (Container Queries)]], [[모바일 중심 설계 (Mobile-First Design)]], [[마이크로 인터랙션 (Micro-interactions)]]
- **Projects/Contexts:** [[데이터 중심 대시보드 (Data-heavy Dashboards)]], [[반응형 이커머스 웹사이트 (Responsive E-commerce Websites)]]
- **Related Topics:** [[CSS Grid]], [[Flexbox]], [[컨테이너 쿼리 (Container Queries)]], 모바일 중심 설계 (Mobile-First Design), 마이크로 인터랙션 (Micro-interactions)
- **Projects/Contexts:** 데이터 중심 대시보드 (Data-heavy Dashboards), 반응형 이커머스 웹사이트 (Responsive E-commerce Websites)
- **Contradictions/Notes:** 뷰포트 기반의 일반적인 미디어 쿼리(Media Queries)는 사이드바나 영웅 영역 등 컴포넌트가 배치된 개별 컨텍스트의 가용 공간을 파악하지 못하는 근본적인 한계가 있습니다. 따라서 대시보드나 이커머스처럼 복잡하고 모듈화된 레이아웃에서는 화면 크기가 아닌 컴포넌트 부모 크기에 반응하는 컨테이너 쿼리가 2026년의 새로운 표준으로 권장됩니다 [3].
---