React

Entry Point

main.tsx 내용을 설명합니다.

도식도

┌───────────────────────────────────────┐
│ main.tsx │
└───────────────────┬───────────────────┘
┌──────────────────────────────────────┐
│ │
┌─────────▼───────────┐ ┌────────────▼─────────┐
│ Import Declarations│ │ DOM Setup │
(i18n, providers, │ │ rootElement selection│
│ router, React etc) │ │ createRoot call │
└─────────────────────┘ └────────────┬─────────┘
┌────────────▼──────────┐
│ initializeApp Function│
(Async Execution)
└────────────┬──────────┘
┌───────────────────────────────────────────────┐
│ │
┌─────────▼───────────┐ ┌─────────────▼────────────┐
│ i18n Initialization│ │ Component Tree Rendering│
(Async Process) │ │ │
└─────────────────────┘ └─────────────┬────────────┘
┌─────────────▼────────────┐
<StrictMode>
└─────────────┬────────────┘
┌─────────────▼────────────┐
<CustomQueryProvider>
└─────────────┬────────────┘
┌─────────────▼────────────┐
<VersionCheckProvider>
└─────────────┬────────────┘
┌─────────────▼────────────┐
<I18nextProvider>
└─────────────┬────────────┘
┌─────────────▼────────────┐
<ThemeProviders>
└─────────────┬────────────┘
┌─────────────▼────────────┐
<DefaultRouterProvider>
└──────────────────────────┘

주요 구성 요소

Import Declarations

  • i18n 관련 모듈
  • 커스텀 프로바이더 컴포넌트들
  • 라우터 프로바이더
  • 테마 프로바이더
  • React 핵심 기능 (StrictMode, createRoot)

DOM Setup

const rootElement = document.getElementById('root')!
const root = createRoot(rootElement)

initializeApp Function

  • 비동기 함수로 설계
  • i18n 초기화 후 컴포넌트 트리 렌더링. 글로벌 메시지 취득 후 앱 시작

Provider 계층 통과

StrictMode
└── CustomQueryProvider
└── VersionCheckProvider
└── I18nextProvider
└── ThemeProviders
└── DefaultRouterProvider

Provider 구성 분석

Provider 구성 이점

  • 관심사 분리: 각 프로바이더가 특정 기능에 집중
  • 코드 모듈화: 각 기능이 독립적인 모듈로 분리되어 유지보수성 향상
  • 컨텍스트 종속성 관리: 상위 프로바이더의 기능을 하위 프로바이더에서 활용 가능
  • 전역 상태 및 기능 공유: 애플리케이션 전체에서 일관된 환경 제공
  • 테스트 용이성: 각 기능을 독립적으로 테스트 가능

이 구조를 통해 애플리케이션은 확장성이 높고, 유지보수가 용이하며, 다양한 기능을 체계적으로 제공할 수 있습니다.

각 Provider 설명

StrictMode

  • 역할: 애플리케이션의 잠재적인 문제를 개발 단계에서 식별하는 도구
  • 기능:
    • 안전하지 않은 생명주기 메서드 사용 감지
    • 레거시 API 사용 경고
    • 의도하지 않은 부작용 감지를 위한 이중 렌더링 수행
    • 최신 React 기능과의 호환성 확인

CustomQueryProvider

  • 역할: 데이터 페칭 및 상태 관리 기능 제공
  • 기능:
    • React Query 데이터 패칭 라이브러리 구성
    • 글로벌 쿼리 상태 및 에러 처리 설정

VersionCheckProvider

  • 역할: 애플리케이션 버전 확인 및 관리
  • 기능:
    • 클라이언트 버전과 서버 버전 비교
    • 새 버전 출시 시 업데이트 알림 / 강제 업데이트 로직

I18nextProvider

  • 역할: 다국어 지원(국제화) 기능 제공
  • 기능:
    • i18n 인스턴스를 애플리케이션 전체에 제공
    • 언어 전환, 번역 텍스트 로드 기능 지원

ThemeProviders

  • 역할: 애플리케이션 테마 및 스타일 관리
  • 기능:
    • 전역 스타일 테마 컨텍스트 제공
    • 디자인 시스템 일관성 유지

DefaultRouterProvider

  • 역할: 애플리케이션의 라우팅 시스템 설정
  • 기능:
    • 라우트 정의 및 네비게이션 로직 제공
    • 인증/권한 기반 라우트 보호 기능