[Vite] React + TypeScript 기반 프로젝트 생성하기

 

Vite (비트) 란 간략하게 말하자면, '진짜 빠른 번들링 툴'

실무 초반엔 Vue-CLI를 활용한 빌드를 진행했었다. (Vite의 필요성을 크게 느끼지 못했기 때문)
그런데 프로젝트 규모가 커지면서, 빌드하는데 시간이 오래걸리기 시작했다.

프론트엔드 개발은 코드를 계속 갱신하면서 테스트를 진행하기 때문에, 핫로딩/빌딩이 빠르게 이뤄져야 개발효율성이 높아진다. 그래서 Vue-CLI에서 Vite로 전환을 하게 되었고, 빠른 빌드 속도로 업무 효율성이 크게 증가했다.

Vite는 비록, Vue.js의 창시자인 Evan You가 Vue3과 함께 개발한 번들링 툴이긴 하지만, Vue에만 국한되진 않는다.
그래서 React 프로젝트에도 요즘 많이 사용된다고 들었다.

---

💎 Vite 템플릿으로 프로젝트 생성하는 방법

1. create vite

npm create vite {project_name}

나같은 경우에는 create-vite가 설치되어있지 않아서, install 할 것인지 물어보고 진행됐다

 

2. Package 이름 적기

? Package name: >> project_name

원하는 프로젝트 이름을 입력하고 `Enter`

3. Framework 선택하기

? Select a framework: >> - Use arrow-keys. Return to submit.
  Vanilla
  Vue
> React
  Preact
  Lit
  Svelte
  Solid
  Qwik
  Angular
  Others

`React`를 선택하고 `Enter`

 

4.  variant 선택하기

? Select a variant: >> - Use arrow-keys. Return to submit.
> TypeScript
  TypeScript + SWC
  JavaScript
  JavaScript + SWC
  React Router v7

`TypeScript`를 선택하고 `Enter`

 

5. 프로젝트 생성! ✨

 

 

---

💍 프로젝트 구조

• public: 정적 파일 저장 directory
• src: React Application 소스코드 저장 directory
• src/assets
• src/main.tsx: React Application 진입하기 위해 제일 먼저 실행되는 ts파일
• src/vite-env.d.ts: Vite 환경에서 사용하는 TypeScript 설정 파일
• index.html : React Application 정적 진입점
• tsconfig.json: TypeScript 설정 파일
• tsconfig.node.json: Node.js 환경에서 사용하는 TypeScript 설정 파일
• vite.config.ts: Vite 설정 파일

 

🔥 프로젝트 실행

npm run dev // 프로젝트 개발모드 실행
npm run build // 프로젝트 빌드
npm run lint // 프로젝트 코드 검사
npm run preview // 빌드된 프로젝트 미리 보기

npm run dev를 실행하면 이렇게 vite가 개발 서버를 실행해준다!

Local 옆에 적어져있는 링크를 브라우저에서 열어보면 ▼

✨ 따란 ✨

프로젝트 서버가 잘 실행 되었다!

 

이제 이것저것 만들어보면 되겠다 ㅎㅅㅎ 🤍

 

참고
https://deku.posstree.com/ko/react/vite/react-typescript/start/