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
를 해주면 프로젝트가 돌아가는걸 확인할 수 있다!
'FrontEnd > React' 카테고리의 다른 글
| [React] Vite에 Tailwind CSS와 Next UI 세팅하기 (0) | 2024.03.12 |
|---|---|
| [React] 파일 업로드 버튼 만들기(+ typescript) (0) | 2024.03.12 |
| [React] JWT 인증키 저장하기 (0) | 2024.02.04 |
| [React] Vue와 React의 차이점 (0) | 2024.01.15 |
| [React] 리액트란? (1) | 2023.12.16 |