docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
@@ -1,4 +1,4 @@
|
||||
# [[Scalable Frontend Systems]]
|
||||
# [[Scalable Frontend Systems|Scalable Frontend Systems]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
대규모 프론트엔드 시스템(Scalable Frontend Systems)은 높은 유지보수성, 고성능, 확장성을 보장하기 위해 기존의 단순한 스크립트 실행을 넘어 정교하게 분산된 소프트웨어 아키텍처를 도입한 시스템입니다 [1]. 기능별 또는 도메인 중심의 모듈형 폴더 구조를 사용하며, SOLID와 같은 클린 코드 원칙을 준수하고 애플리케이션 상태와 서버 상태를 분리하여 관리합니다 [2-4]. 더불어 자동화된 빌드 최적화, 예측 가능한 렌더링 최적화, 정교한 에러 처리 및 협업 워크플로우를 결합하여 애플리케이션이 안정적으로 성장할 수 있도록 지원합니다 [1, 5].
|
||||
@@ -16,23 +16,23 @@
|
||||
|
||||
### Related Concepts
|
||||
|
||||
- [[Feature-Sliced Design (FSD)]]
|
||||
- [[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD)]]
|
||||
- 연결 이유: 확장 가능한 프론트엔드 아키텍처에서 빈번하게 발생하는 '비즈니스 로직 얽힘' 문제를 해결하기 위해 도입된 핵심적인 컴포넌트/디렉토리 분할 방법론입니다 [33, 34].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 단방향 의존성 흐름, 계층별(Layered) 분할, 캡슐화를 통한 Public API 인터페이스 설계 원리 [7, 9].
|
||||
|
||||
- [[State Management Fragmentation (상태 관리 파편화)]]
|
||||
- State Management Fragmentation (상태 관리 파편화)
|
||||
- 연결 이유: 대규모 애플리케이션에서 단일 스토어나 Context API만으로는 리렌더링 성능 최적화가 불가능해짐에 따라, 전역 상태(Zustand), 서버 상태(React Query), 로컬 상태로 역할을 분리하여 관리하는 트렌드입니다 [4, 13, 35].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 불필요한 렌더링 방지 원리(Zustand의 선택자 패턴)와 서버/클라이언트 데이터 간의 캐싱 및 동기화 전략 [4, 14].
|
||||
|
||||
- [[React Compiler]]
|
||||
- [[React Compiler|React Compiler]]
|
||||
- 연결 이유: 개발자가 수동으로 수행하던 `useMemo`, `useCallback`, `React.memo` 등의 메모이제이션을 빌드 타임에 자동으로 처리해 주어, 깔끔한 코드를 유지하면서 성능 확장을 가능케 하는 최신 도구입니다 [19, 36].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: React의 렌더링 최적화 한계 및 Rules of React 준수 중요성, 써드파티 라이브러리와의 호환성 문제 [37, 38].
|
||||
|
||||
- [[Error Boundaries]]
|
||||
- [[Error Boundaries|Error Boundaries]]
|
||||
- 연결 이유: 시스템의 크기가 커질 때 단일 컴포넌트의 오류가 전체 앱의 '화이트 스크린' 크래시로 이어지지 않게 UI의 일부분만 대체(Fallback)하여 시스템 복원력(Resilience)을 보장하는 장치입니다 [23, 24, 39].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 클래스형 컴포넌트 생명주기를 활용한 런타임 에러 포착 원리 및 대규모 UI 보호 전략 [40, 41].
|
||||
|
||||
- [[Code Splitting & Lazy Loading (코드 분할과 지연 로딩)]]
|
||||
- Code Splitting & Lazy Loading (코드 분할과 지연 로딩)
|
||||
- 연결 이유: 프론트엔드 코드가 비대해지면서 초기 로딩 속도(TTI, LCP)를 최적화하기 위해 필수적으로 요구되는 기술로, Vite나 React.lazy를 통해 필요한 시점에만 모듈을 다운로드하게 합니다 [15, 17, 42].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 모듈 번들러의 청크(Chunk) 분리 원리 및 브라우저 성능 최적화(Core Web Vitals)와 번들 사이즈의 상관관계 [43, 44].
|
||||
|
||||
@@ -54,11 +54,11 @@
|
||||
|
||||
### Adjacent Topics
|
||||
|
||||
- [[Frontend Cloud Logging Tools (프론트엔드 클라우드 로깅 도구)]]
|
||||
- Frontend Cloud Logging Tools (프론트엔드 클라우드 로깅 도구)
|
||||
- 확장 방향: 확장 가능한 시스템이 프로덕션 단계에 들어갔을 때, Sentry나 Datadog, SigNoz 같은 모니터링 툴을 활용해 사용자 세션과 에러 로그를 연동하여 가시성(Observability)을 확보하는 방향으로 확장할 수 있습니다 [58-60].
|
||||
- [[Storybook Visual Regression Testing (Storybook 시각적 회귀 테스트)]]
|
||||
- Storybook Visual Regression Testing (Storybook 시각적 회귀 테스트)
|
||||
- 확장 방향: 대규모 팀에서 UI 컴포넌트를 변경할 때, 기존 화면(baseline)의 레이아웃이나 픽셀이 의도치 않게 깨지는 것을 방지하기 위한 자동화된 시각적 회귀 검증(Happo, Chromatic) 및 CI 파이프라인 연동 방향으로 확장할 수 있습니다 [61-63].
|
||||
- [[Git Branching Strategies & Workflows (Git 브랜치 전략 및 워크플로우)]]
|
||||
- Git Branching Strategies & Workflows (Git 브랜치 전략 및 워크플로우)
|
||||
- 확장 방향: 어플리케이션 확장뿐만 아니라 참여하는 개발자 수가 많아질 때, Trunk-based 개발이나 GitHub Flow 등을 도입하여 충돌을 줄이고 티켓 기반 추적성을 확보하는 형상관리 방향으로 확장할 수 있습니다 [31, 64].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user