yoosangwook
0bcb0f58e5
- Introduced a new markdown file detailing the root layout structure used across the application. - Included a mermaid diagram to illustrate the component hierarchy and data flow. - Documented key components such as providers, layout components, and session management details. - Emphasized server-side session management and performance optimization strategies.
1.8 KiB
1.8 KiB
루트 레이아웃 구조
이 문서는 애플리케이션의 모든 페이지에서 공통으로 사용되는 루트 레이아웃(src/app/layout.tsx)의 구조를 설명합니다.
컴포넌트 계층 구조
graph TD
A[RootLayout] --> B[ReactQueryProviders]
B --> C[EdgeProvider]
C --> D[HTML Structure]
D --> E[Header]
D --> F[Children/Main Content]
D --> G[Footer]
D --> H[Float Button]
D --> I[PopupController]
J[Session Management] --> |Session Data| C
subgraph Providers
B
C
end
subgraph Layout Components
E
F
G
H
I
end
subgraph Session
J
end
주요 컴포넌트
프로바이더
- ReactQueryProviders: React Query 상태 관리를 위한 최상위 프로바이더
- EdgeProvider: 세션 데이터를 관리하고 애플리케이션에 제공
레이아웃 컴포넌트
- Header: 공통 헤더 컴포넌트
- Children: 메인 콘텐츠 영역 (페이지별 콘텐츠)
- Footer: 공통 푸터 컴포넌트
- Float Button: 플로팅 액션 버튼
- PopupController: 팝업/모달 상태 관리
세션 관리
iron-session을 사용한 서버 사이드 세션 관리- 세션 데이터는 EdgeProvider를 통해 전역적으로 접근 가능
데이터 흐름
- 세션 데이터는 서버 사이드에서 관리됨
- 세션 데이터는 EdgeProvider로 전달됨
- 모든 레이아웃 컴포넌트는 세션 컨텍스트에 접근 가능
- React Query는 데이터 페칭과 캐싱 기능을 제공
구현 세부사항
- 서버 컴포넌트로 구현
- Next.js App Router 구조 사용
- 서버 사이드 렌더링 지원
- 하이드레이션 억제를 통한 성능 최적화