Vite 로 React + ts 설치

Vite로 React + TS 프로젝트 시작하기

1. Vite 프로젝트 생성

npm create vite@latest . -- --template react-ts

• . 는 현재 디렉토리에 프로젝트를 생성하겠다는 의미입니다.
• -template react-ts 는 Vite의 템플릿 중 React + TypeScript 환경을 선택한다는 뜻입니다.

주의: npm create vite 명령은 npm init vite 의 최신 형태입니다. 실행 중 이름, 프레임워크, 변형을 고를 수도 있지만 위처럼 옵션을 주면 자동으로 설정됩니다.

---

2. 의존성 설치

npm install

방금 설치한 프로젝트 템플릿에는 package.json 파일이 생성되어 있으며, 이 명령어로 관련된 모든 패키지를 설치할 수 있습니다.

---

3. 개발 서버 실행

npm run dev

브라우저가 자동으로 열리지 않으면 주소창에 다음 주소를 직접 입력합니다:

<http://localhost:5173>

---

4. 폴더 구조 확인

생성된 기본 폴더 구조는 다음과 같습니다:

todo-list/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ App.css
│  ├─ App.tsx
│  ├─ main.tsx
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts

• src/ 안에서 대부분의 코드를 작성하게 됩니다.
• App.tsx 파일은 React의 루트 컴포넌트입니다.
• main.tsx 는 이 컴포넌트를 브라우저 DOM에 렌더링하는 역할을 합니다.

---

5. Git 초기화 (선택)

원한다면 바로 Git도 설정할 수 있습니다.

git init
git add .
git commit -m "Vite + React + TypeScript 프로젝트 초기화"

---

마무리

이제 todo-list 폴더 안에 React + TypeScript 환경이 성공적으로 구성되었습니다. 이후에는 컴포넌트를 만들고, 라우팅, 상태관리 등을 추가하며 프로젝트를 발전시켜 나가면 됩니다. 필요 시 ESLint, Prettier, Tailwind CSS 등도 추가로 설정할 수 있습니다.