Structure

Boilerplate-React 폴더 구조 설명.

본 프로젝트는 모던 React 애플리케이션의 모범사례를 따르는 Boilerplate 로, SPA(Single Page Application) 방식으로 구현되어 있습니다. 주요 기능들이 모듈화되어 있고, 확장 가능한 구조로 설계되어 있습니다.

최상의 구조

confy-app/apps/boilerplate-react/   # React SPA 애플리케이션
├── node_modules/                   # 의존성 패키지
├── public/                         # 정적 파일 디렉토리
├── src/                            # 소스 코드
│   ├── api/                        # API 관련 코드
│   ├── assets/                     # 이미지, 폰트 등 자산
│   ├── components/                 # 컴포넌트
│   ├── pages/                      # 페이지 컴포넌트
│   ├── shared/                     # 공유 리소스 및 유틸리티
│   ├── types/                      # 타입 정의
│   ├── main.tsx                    # 앱 진입점
│   └── vite-env.d.ts               # Vite 타입 선언
├── package.json                    # 프로젝트 메타데이터 및 의존성
├── vite.config.ts                  # Vite 설정
├── tsconfig.json                   # TypeScript 설정
└── ...                             # 기타 설정 파일들

src 폴더 세부 구조

src/
├── api/                           # API 관련 코드
│   ├── endpoints/                 # API 엔드포인트 정의
│   └── services/                  # API 서비스 로직
│
├── assets/                        # 정적 자산 (이미지, 폰트 등)
│
├── components/                    # 컴포넌트
│   ├── global/                    # 전역 공통 컴포넌트
│   └── pages/                     # 페이지별 컴포넌트
│
├── pages/                         # 페이지 구성 요소 (사용 예시)
│   ├── _layouts/                  # 레이아웃 컴포넌트
│   ├── member/                    # 회원 관련 페이지
│   ├── menu1/                     # 메뉴1 관련 페이지
│   ├── menu2/                     # 메뉴2 관련 페이지
│   ├── menu3/                     # 메뉴3 관련 페이지
│   ├── error.tsx                  # 에러 페이지
│   ├── index.tsx                  # 홈 페이지
│   ├── print.tsx                  # 인쇄 페이지
│   └── siteMap.tsx                # 사이트맵 페이지
│
├── shared/                        # 공유 리소스
│   ├── hooks/                     # 커스텀 훅
│   ├── i18n/                      # 국제화(i18n) 설정
│   ├── provider/                  # 프로바이더 컴포넌트
│   ├── router/                    # 라우터 설정
│   │   ├── routes/                # 라우트 정의
│   │   │   ├── member.route.tsx   # 회원 관련 라우트
│   │   │   ├── menu1.route.tsx    # 메뉴1 라우트
│   │   │   ├── menu2.route.tsx    # 메뉴2 라우트
│   │   │   └── menu3.route.tsx    # 메뉴3 라우트
│   │   ├── defaultRouter.provider.tsx # 기본 라우터 프로바이더
│   │   └── protectedRoute.tsx     # 보호된 라우트 설정
│   ├── stores/                    # 상태 관리 (Zustand)
│   ├── theme/                     # 테마 설정
│   └── utils/                     # 유틸리티 함수
│
├── types/                         # 타입 정의
│
├── main.tsx                       # 앱 진입점
└── vite-env.d.ts                  # Vite 환경 타입 정의

api/

: API 통신 관련 모듈

endpoints/

• 백엔드 API 엔드포인트 URL과 파라미터를 정의합니다.
• global.endpoint.ts: 공통 API 엔드포인트(로그인, 회원가입 등) 정의
• post.endpoint.ts: 게시물 관련 API 엔드포인트 정의
• 각 서비스 도메인별로 엔드포인트를 분리하여 관리합니다.

services/

• API 호출 로직과 관련 비즈니스 로직을 구현합니다.
• global.service.ts: 인증, 공통 API 호출 서비스 구현
• post.service.ts: 게시물 관련 데이터 처리 서비스 구현
• API 호출 결과 가공, 에러 처리 등의 로직이 포함됩니다.

assets/

:정적 자원 관리

• 이미지, 아이콘, 폰트 등 정적 자산을 저장하는 디렉토리입니다.
• 이미지 최적화, 아이콘 시스템, 폰트 파일 등이 포함될 수 있습니다.

components/

: UI 컴포넌트

global/

• 전체 애플리케이션에서 공통으로 사용되는 재사용 가능한 컴포넌트들입니다.
• 레이아웃, 상단 메뉴, 하단 메뉴 등의 요소를 포함합니다.

pages/

• 특정 페이지에서만 사용되는 컴포넌트들을 관리합니다.
• 페이지별로 분리되어 해당 페이지에서만 사용되는 특수 컴포넌트가 정의됩니다.
• 각 페이지의 구성 요소를 모듈화하여 페이지 컴포넌트의 복잡성을 줄입니다.

pages/

: 페이지 컴포넌트

_layouts/:

• 페이지의 레이아웃 구조를 정의하는 컴포넌트입니다.
• 헤더, 푸터, 사이드바, 메인 콘텐츠 영역 등 페이지 구조를 정의합니다.
• components/global 내의 요소를 조합하여 완성합니다.
• 여러 페이지에서 재사용되는 레이아웃 패턴을 제공합니다.

member/: (예제 페이지)

• 회원 관련 페이지 (로그인, 회원가입, 프로필 등)를 관리합니다.
• 사용자 인증과 관련된 모든 화면이 포함됩니다.

menu1/, menu2/, menu3/: (예제 페이지)

• 각 주요 메뉴 섹션에 해당하는 페이지 컴포넌트입니다.
• 각 메뉴별로 분리되어 관련 페이지들을 그룹화합니다.
• 특정 기능 도메인에 속하는 페이지들을 논리적으로 구분합니다.

error.tsx, index.tsx, print.tsx, siteMap.tsx:

• 특수 목적의 독립 페이지 컴포넌트들입니다.
• index.tsx: 홈페이지
• error.tsx: 전역 에러 페이지
• print.tsx: 인쇄 전용 페이지
• siteMap.tsx: 사이트맵 페이지

shared/

: 공유 유틸리티 및 설정

hooks/:

• 재사용 가능한 커스텀 React 훅을 제공합니다.
• useAuth.ts: 인증 관련 기능을 제공하는 훅
• useGlobalData.ts: 전역 데이터 접근을 위한 훅
• navigationGuardHook.tsx: 라우팅 전환 시 가드 로직 훅
• 복잡한 로직을 추상화하여 여러 컴포넌트에서 재사용합니다.

i18n/:

• 다국어 지원을 위한 설정과 번역 파일들을 관리합니다.
• i18next 라이브러리 설정과 언어별 리소스 파일이 포함됩니다.
• 다양한 언어로 UI 텍스트를 전환할 수 있는 기능을 제공합니다.

provider/:

• React Context API를 활용한 프로바이더 컴포넌트들을 관리합니다.
• customQueryProvider: React Query 설정과 캐시 관리
• versionCheckProvider: 앱 버전 체크 로직
• 전역 상태와 설정을 애플리케이션 전체에 제공합니다.

router/:

• 애플리케이션의 라우팅 구성을 관리합니다.
• routes/: 각 섹션별 라우트 정의 파일
• defaultRouter.provider.tsx: 기본 라우터 설정 및 초기화
• protectedRoute.tsx: 인증이 필요한 보호된 라우트 로직
• 페이지 간 이동과 접근 제어를 담당합니다.

stores/:

• Zustand를 사용한 상태 관리 스토어를 정의합니다.
• siteinfo.store.ts: 사이트 정보 관련 상태 관리
• userinfo.store.ts: 사용자 정보 관련 상태 관리
• global.store.ts_: 전역 상태 관리
• 컴포넌트 트리와 독립적으로 상태를 관리하여 상태 공유와 변경을 용이하게 합니다.

theme/:

• 애플리케이션의 테마 설정을 관리합니다.
• 색상, 타이포그래피, 스페이싱 등 디자인 토큰을 정의합니다.
• 다크 모드/라이트 모드 전환 등 테마 관련 기능을 제공합니다.

utils/:

• 순수 함수 기반의 유틸리티 함수들을 제공합니다.
• 포맷팅, 유효성 검사, 데이터 변환 등 재사용 가능한 유틸리티 함수들이 포함됩니다.
• 비즈니스 로직 없이 순수 기능만 담당하는 헬퍼 함수들입니다.

types/

: 타입 정의

• TypeScript 인터페이스, 타입, 열거형 등 타입 정의를 관리합니다.
• 도메인 모델, API 응답 타입, 상태 타입 등이 정의됩니다.
• 타입 안전성을 제공하여 개발 과정에서 오류를 방지합니다.

주요 파일

main.tsx:

• 애플리케이션의 진입점입니다.
• 전역 프로바이더들을 설정하고 앱을 초기화합니다.
• React 컴포넌트 트리의 최상위 요소를 렌더링합니다.

vite-env.d.ts:

• Vite 관련 환경 변수와 타입 선언을 제공합니다.
• 빌드 도구와 관련된 타입 정의를 포함합니다.