DevCra Vite Template

프론트 개발용 템플릿

• Vite 6
• React 19
• TypeScript 5
• React Router 7
• Tailwind 4
• React Query 5
• framer-motion
• react-error-boundary
• zustand, axios, clsx, date-fns, ts-pattern, msw, react-hook-form
• uuid, usehooks-ts, headlessui
• Tanstack Table
• react-device-detect, web-vitals
• react-toastify
• prettier, eslint

Getting Started

필수 조건

• Node.js 20.14.0 (fnm 사용)
• yarn

설치

• fnm 설치 (아직 설치하지 않은 경우)

Copy .env.sample to .env

$ cp .env.sample .env

npm module 설치를 진행합니다.

yarn

개발 서버를 실행합니다.

yarn dev

브라우저에서 http://localhost:3000에 접속하여 결과를 확인합니다.

기본 폰트는 PretendardStd 를 사용합니다. (https://cactus.tistory.com/306)

깃헙 컨벤션

• feat: 기능 추가
• fix: 버그 수정
• refactor: 코드 리팩토링
• update: 기능 수정
• style: 스타일 변경
• test: 테스트 코드 추가
• chore: 기타 등등

Contact

템플릿은 누구든지 개선 하셔도 됩니다.

P/R 환영

#b_client_dev 로 오셔서 의견주셔도 됩니다.

• github 레포
• 여러 프로젝트에서 활용했던 코드 스니펫, 폴더 구조, 셋팅 등 모음
• UI는 tailwind로 구성되어 있음