Overview

boilerplate-react 을 소개합니다.

목적

boilerplate-react 은 @confy-ui 라이브러리를 이용하여 빠르게 Boilerplate 를 생성하는 것을 목표로 제작되었습니다.

소스코드 사항은 git.dosystem.kr/confy/confy-app 링크로 이동해 주세요.

주요 기술 스택

• 프레임워크: React 19
• 빌드 도구: Vite 6
• 언어: TypeScript
• 스타일링: SCSS
• 상태 관리: Zustand
• 폼 관리: React Hook Form + Zod
• API 통신: Axios
• 라우팅: React Router 7
• 국제화: i18next
• 데이터 페칭: TanStack Query (React Query)

폴더 구조

src/
├── api/ # API 관련 로직
├── assets/ # 정적 리소스
├── components/ # 재사용 가능한 컴포넌트
├── pages/ # 페이지 컴포넌트
├── shared/ # 공유 유틸리티
├── types/ # 타입 정의
└── main.tsx # 애플리케이션 진입점

주요 특징

• 모던 개발 환경
  • Vite를 사용한 빠른 개발 서버
  • TypeScript 기반의 타입 안전성
  • ESLint + Prettier로 코드 품질 관리
• 상태 관리
  • Zustand를 사용한 간단하고 효율적인 상태 관리
  • React Query를 통한 서버 상태 관리
• 폼 처리
  • React Hook Form과 Zod를 통한 강력한 폼 검증
  • 타입 안전한 폼 처리
• 국제화 지원
  • i18next를 통한 다국어 지원
  • 브라우저 언어 감지 기능
• 에러 처리
  • React Error Boundary를 통한 에러 처리
  • React Router Prompt로 네비게이션 제어
• 브라우저 지원
  • 최신 2개 버전의 브라우저
  • 시장 점유율 0.5% 이상의 브라우저
  • 지원 중단되지 않은 브라우저

보안 및 성능

• 환경 변수 관리 (.env, .env.development)
• 코드 스플리팅 및 최적화
• 타입 안전성 강화
• 이 프로젝트는 현대적인 React 애플리케이션 개발에 필요한 모든 기본적인 기능을 포함한 보일러플레이트입니다. 특히 타입 안전성, 상태 관리, 폼 처리, 국제화 등 실무에서 자주 사용되는 기능들이 잘 통합되어 있습니다.