Meme's IT

[React] Vite로 React 프로젝트 만들기 본문

FrontEnd/React

[React] Vite로 React 프로젝트 만들기

Memez 2024. 1. 18. 09:26

React 프로젝트는 Vite를 이용해서 만들어보자

Vite는 저번에 Vue를 했을 때 정리해 둔 것이 있으니 그걸 참고해서 설치하면 된다.

 

2023.11.07 - [Vue] - [Vue] SFC build tool (Vite)

 

[Vue] SFC build tool (Vite)

# Vite 프론트엔드 개발 도구 공식 문서 참고, Vue 공식문구에서 설치 방법 확인 npm create vue@latest 뜨는 옵션들은 No로 우선 통일 cd vue-project/ npm install 자동으로 생긴 vue-project 위치로 가서 설치 npm run

memezz.tistory.com

 

# 왜 Vite를 사용해서 만들까?

궁금해서 물어보니까 뤼튼님이 이렇게 말하신다...

즉, 빠르고 최신 JS를 쓸 수 있고, 내장 빌드가 있는 등등의 장점으로 vite를 이용한다고 한다..

 

vite를 쓰지 않고 만든다면, 이런 문제가 생길 수 있다고 한다..

 


그럼, 프로젝트를 한 번 만들어보자

# Vite로 React 프로젝트 만들기

이전 vue랑 거의 비슷하다..

npm create vite@latest react-project

react-project 부분에는 내가 원하는 프로젝트 제목을 써주면 됨

이렇게 터미널에 입력하면, 

어떤 프레임워크를 쓸 건지 물어보는데 당연히 React를 선택하고

여기서  "SWC"는 'Speedy Web Compiler'의 약자로, JavaScript와 TypeScript를 빠르게 컴파일해주는 도구입니다. Babel과 유사한 역할을 하지만, Rust로 작성되어 있어 더 빠른 성능을 제공한다는 장점이 있습니다.

라고 한다...

여튼 여기서 3 또는 4번 선택지를 골라주자


이후에는 Vue와 동일하게 

cd react-project
npm install
npm run dev

를 해주면 프로젝트가 돌아가는걸 확인할 수 있다!