Vite+React+TypeScript 프로젝트 생성

ramong2·2025년 3월 24일

Vite 프로젝트 생성

npm create vite@latest {Project Name}

프롬프트 입력

Project name: MyNewName-Front
Select a framework: › React
Select a variant: › TypeScript

의존성 설치

cd {Project Name}
npm install

서버 실행

npm run dev

세팅	왜 필요할까?	주요 기능	추천 상황
ESLint + Prettier	코드 스타일을 통일하고, 잠재적인 버그를 예방합니다.	✨ 코드 품질 향상 ✨ 자동 포맷팅	팀 협업 시 필수 개인 프로젝트도 강력 추천
React Router	SPA에서 페이지 이동(라우팅)을 구현할 수 있습니다.	✨ URL 기반 페이지 이동 ✨ 중첩 라우팅 지원	여러 페이지가 있는 앱 로그인/게시판/상세페이지가 필요한 경우
Zustand / Redux	전역 상태를 관리하고 props drilling을 방지합니다.	✨ 전역 상태 관리 ✨ 상태 흐름 예측 가능	상태가 많거나 컴포넌트가 깊을 때 Zustand는 가볍고, Redux는 확장성 좋음
Axios	서버와의 통신을 쉽게 처리할 수 있습니다.	✨ HTTP 요청 ✨ 응답 데이터 핸들링 ✨ 인터셉터 기능	REST API를 사용하는 모든 앱에서 기본
React Query	서버 상태 데이터를 효율적으로 관리합니다.	✨ 데이터 캐싱 ✨ 자동 리패칭 ✨ 상태 관리	페이징, 무한 스크롤 서버에서 자주 데이터를 불러올 때
TailwindCSS	빠르고 직관적인 유틸리티 기반 스타일링이 가능합니다.	✨ 빠른 UI 개발 ✨ 반응형 지원 ✨ 디자인 시스템 구축	빠른 스타일링 필요할 때 CSS 작성이 귀찮을 때