Modern Web Frameworks & State

1. Overview

모던 웹 프레임워크 및 상태(Modern Web Frameworks & State, MWS)는 브라우저라는 범용 플랫폼 위에서 복잡한 UI를 효율적으로 선언하고, 데이터의 상태 변화를 화면에 수리적으로 매핑하는 고수준 추상화 아키텍처를 다룹니다.

과거의 직접적인 DOM 조작 방식은 어플리케이션의 규모가 커짐에 따라 물리적 복잡도가 기하급수적으로 증가하는 임계점에 도달했습니다. 학습자는 React의 Virtual DOM Diffing, 최신 프레임워크의 Signals 기반 세밀한 상태 전파, 그리고 서버와 클라이언트 간의 렌더링 경계를 결정하는 SSR/SSG의 실행 위치 물리 구조를 배웁니다. 이를 통해 단순히 도구를 사용하는 것을 넘어, 성능 수치를 예측하고 유지보수 가능한 대규모 웹 시스템을 설계하는 거버넌스 역량을 확보합니다.

2. Scope & Boundaries

In-Scope

• Component Mechanics: 컴포넌트 생명 주기와 가상 트리의 수리적 재구성(Reconciliation) 역학
• State Governance: 전역 상태 저장소(Store)와 지역 상태(Signals)의 데이터 흐름 물리
• Rendering Strategies: SSR, SSG, ISR 및 Server Components의 물리적 실행 시점 제어
• Data Hydration: 서버에서 생성된 정적 수치가 클라이언트 동적 객체로 전이되는 물리 수순
• Developer Experience (DX): 타입 안정성(TypeScript)과 컴포넌트 기반 합성(Composition) 모델

Out-of-Scope

• 순수 브라우저 API 및 이벤트 루프 기초 (14-01 BEP로 위임)
• CSS 스타일링 미학 및 애니메이션 (12. VDS로 위임)

Boundaries

• MWS vs. Core Browser: BEP가 '엔진의 물리적 한계'라면, MWS는 그 한계 안에서 '개발자의 생산성과 수리적 정확성'을 극대화하는 솔루션 레이어입니다.

3. Counterexample

• 단순히 "React Hook의 사용법을 외우는 것"은 MWS 학습이 아닙니다. 왜 부모 컴포넌트의 상태 수치가 변할 때 자식 컴포넌트들이 물리적으로 재렌더링되는지 그 전파 경로를 입증할 수 있어야 하며, Next.js의 서버 컴포넌트가 왜 클라이언트 자바스크립트 번들 수치를 물리적으로 감소시키는지 그 트리 분리 기제를 논증해야 합니다.

4. Prerequisites

• 브라우저 핵심 및 신 플랫폼 (Basic): DOM 트리 및 JS 런타임 기초 이해가 필수입니다. (14-01 BEP)
• 프로그래밍 언어의 이해 (Recommended): 1급 객체로서의 함수 및 클로저(Closure) 기초가 권합됩니다. (05. PLC)

5. Learning Map

1. Declarative UI: 명령형 조작을 탈피해 '상태의 투영'으로서 UI를 설계하는 수순을 이해합니다. [P2, Industry]
2. State Calculus: 수치 데이터의 변화가 어떻게 최소한의 경로로 UI를 갱신하는지 배웁니다. [P1]
3. Cross-Boundary Rendering: 서버와 클라이언트의 물리적 경계를 넘나드는 데이터 수취 역학을 익힙니다. [P5, Industry]
4. Architectural Patterns: 대규모 시스템에서 컴포넌트를 합성하고 의존성을 관리하는 전술을 탐구합니다. [P2]

6. Learning Topics

Basic

Core: 컴포넌트 아키텍처와 선언적 UI (Component Physics)

• Why to Learn: 복잡한 화면을 재사용 가능한 물리적 단위로 쪼개어 수리적 복잡도를 낮추기 위함입니다.
• What to Learn:
  • One-way Data Flow: 수치가 위에서 아래로 흐르는 물리적 제약의 이점
  • Virtual DOM Mechanics: 메모리 상의 트리 비교(Diffing) 및 실제 반영(Patch) 물리
  • Composition API: 믹스인(Mixin)의 한계를 넘는 고수준 로직 합성 수순
• How to Learn:
  • 간단한 To-do 리스트를 만들며, 상태 변화가 일어날 때 어떤 UI 조각이 물리적으로 교체되는지 추적
  • 템플릿 기반 프레임워크와 JSX 기반 프레임워크의 결과 바이너리 크기 수치 비교
• Implement: 자체적으로 Diffing 알고리즘이 적용된 경량 컴포넌트 엔진 프로토타입

Recommended

Core: 상태 관리와 세밀한 전파 시스템 (State Dynamics)

• Why to Learn: 수천 개의 상태 수치가 얽힌 환경에서도 '예측 가능한' 데이터 업데이트를 보장하기 위함입니다.
• What to Learn:
  • Centralized Store Physics: 단일 진실 공급원(SSOT)의 수치 동기화 물리
  • Signals & Observables: 수치 변화를 구독자에게 직접 투사하여 재렌더링 부하를 줄이는 역학
  • Immutable Data: 데이터의 물리적 주소를 변경하여 변화를 즉각 감지하는 수리적 기법
• How to Learn:
  • Redux와 Zustand 등 서로 다른 물리 모델을 가진 라이브러리의 수치 전파 성능 벤치마크
  • 복잡한 폼(Form) 입력 시, 관찰자 패턴(Signals)이 과도한 전체 재렌더링을 어떻게 물리 방어하는지 실습
• Implement: 데이터 불변성이 보장되는 대규모 전역 상태 관리 모듈

Practical

Core: 서버 사이드 렌더링과 하이드레이션 (Rendering Physics)

• Why to Learn: 초기 로딩 속도 수치를 개선하고 검색 엔진 최적화(SEO)를 물리 보장하기 위함입니다.
• What to Learn:
  • SSR vs Static Export: HTML 생성의 물리적 시점(요청 시 vs 빌드 시) 차이
  • Hydration Logic: 서버의 정적 결과와 클라이언트 JS를 물리 결합하는 수순
  • Data Prefetching: 다음 페이지로 전이 전 수치를 미리 수취하는 물리적 가속 기법
• How to Learn:
  • Next.js 사이트 로드 시, 수치 데이터가 클라이언트로 전달되는 'JSON 윈도우'의 실제 크기 분석
  • ISR(Incremental Static Regeneration)을 적용해 실시간 수치와 정적 파일의 물리적 조화 구현
• Implement: 핵심 웹 지표(LCP) 수치가 최적화된 하이드레이션 기반 웹 서비스

Advanced

Core: 서버 컴포넌트와 현대적 번들링 (Bundle Physics)

• Why to Learn: 클라이언트로 전송되는 JS 파일 수치를 최소화하여 하드웨어 부하를 제거하기 위함입니다.
• What to Learn:
  • Server Components Mechanics: 클라이언트로 절대 전송되지 않는 서버 전용 모듈 물리
  • Tree-shaking Evolution: 사용되지 않는 수리 로직을 번들에서 자동 제거하는 컴파일 물리
  • Micro-Frontends: 여러 어플리케이션을 하나의 물리적 화면에 합성하는 거버넌스
• How to Learn:
  • 번들 분석기를 통해 리액트 서버 컴포넌트 도입 전후의 JS 페이로드 수치 감소량 검증
  • 모듈 페더레이션(Module Federation)을 이용해 런타임에 다른 서버의 공유 객체를 물리 주입하는 실습
• Implement: 서버 컴포넌트와 클라이언트 컴포넌트의 물리 배치가 최적화된 하이엔드 아키텍처

7. Terminology

8. References

Primary References

• [P2] SWEBOK v4.0 - Software Construction - Component-Based Construction — Structural foundations.
• [P5] SFIA v9 - Systems Development - Programming / Device Software — Frontend skills.

Secondary References

• [React Project Standards] — The official component mechanics.
• [Understanding Single Page Apps] — Physical state routing.

Industry References

• [Next.js Documentation - Rendering Strategies] — Real-world rendering standards.
• [Lighthouse Web Performance Review] — Quantitative measurement models.

9. Final Checklist

Primary Checklist

• 컴포넌트 상태 변화가 Virtual DOM의 'Diffing'을 거쳐 실제 화면에 물리 반영되는 수리적 수순을 설명 가능한가? (P2)
• SSR 환경에서 '데이터 일관성'이 서버와 클라이언트 간에 물리 보장되지 않을 때 발생하는 하이드레이션 오류를 해결할 수 있는 가? (P1)

Secondary Checklist

• Signals 모델이 Hooks 모델 대비 메인 스레드의 재렌더링 연산 수치를 어떻게 물리적으로 감소시키는지 이해하는가?
• 대규모 전역 상태 관리 시 '상태 정규화'가 메모리 점유 및 필터링 수치 효율에 미치는 영향력을 분석 가능한가?

Industry Checklist

• 실무 엔지니어링 시 번들 분석 도구를 사용하여 외부 라이브러리가 차지하는 물리적 크기 수치를 제어하고 최적화할 수 있는 가? (SFIA)
• 서버 컴포넌트를 활용하여 민감한 수리 로직을 서버에 은닉하고 클라이언트 성능 수치를 극대화하는 아키텍처를 설계 가능한가?