TS) Vite로 React + TypeScript 템플릿 생성

 

1. 프로젝트 폴더 생성 및 초기화

1. 터미널에서 새로운 프로젝트 폴더를 생성하고 해당 폴더로 이동.
2. mkdir ts-app cd ts-app
3. Vite로 React + TypeScript 템플릿 생성 (권장)
   Vite는 빠르고 효율적인 빌드 시스템을 제공. 최신 React 환경에 적합함.
4. npm create vite@latest  --template react-ts
5. 필요한 패키지 설치
   1. Select a framework: React  선택
   2. Select a variant: TypeScript  선택
6. npm install

 

 

2. 설정 확인 및 수정 - 선택사항

1. package.json 파일 수정
   필요한 의존성들만 포함되도록 package.json을 다음과 같이 수정.

{
  "name": "ts-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "web-vitals": "^4.2.4"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.14",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.18",
    "vite": "^4.0.0"
  }
}

📌 주요 수정사항:

• Vite 사용을 위해 react-scripts 제거하고 vite를 추가
• @testing-library/react 버전 14로 업데이트
• @types/react와 @types/react-dom을 최신 버전으로 업데이트

1. vite.config.ts 파일 설정 (필요한 경우)
   Vite 설정은 보통 기본값으로 잘 동작하지만, 커스텀 설정이 필요할 경우 vite.config.ts 파일을 수정할 수 있음.

3. 프로젝트 실행

1. 프로젝트 실행 (개발 서버 시작)
   Vite로 실행할 수 있습니다.
2. npm run dev
3. 빌드 및 배포 준비
   프로젝트가 정상적으로 동작하면, 빌드해서 배포할 준비를 할 수 있음.
4. npm run build

4. 추가 작업 (선택 사항)

• Web Vitals 설정: src/reportWebVitals.ts 파일을 생성하고 웹 퍼포먼스 모니터링을 설정.

import { reportWebVitals } from './reportWebVitals';

reportWebVitals();

• web-vitals에서 필요한 메트릭을 직접 불러와서 퍼포먼스 지표를 기록할 수 있음.

---

프로젝트 구성 정리

1. 프로젝트 폴더 생성 및 이동
2. mkdir ts-app cd ts-app
3. Vite로 프로젝트 생성
4. npm create vite@latest . --template react-ts
5. 필요한 패키지 설치
6. npm install
7. package.json 수정
   위와 같은 의존성 및 설정을 적용
8. 프로젝트 실행
9. npm run dev
10. 크롬에서 localhost:5173 

이렇게 하면 React + TypeScript 프로젝트가 Vite로 깔끔하게 설정된 상태로 실행🎉🎊✨😊

 

 

만약 react, reac-dom을 특정 버전으로 설치하고 싶다면?

npm install react@18 react-dom@18