Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
Tags
- Javascript
- TypeScript
- 머신러닝종류
- Django
- PWA
- js
- 셀프넘버
- pwa적용하기
- QuerySetAPI
- db
- 싸피
- vitepwa
- SQL
- 14658
- sqld
- queryset
- 리액트
- git
- unionfind
- 알고리즘
- VITE
- react
- 싸피셜
- 플로이드워셜
- 백준
- 데코레이터
- Python
- 싸피10기
- SSAFYcial
- SSAFY
Archives
- Today
- Total
Meme's IT
[React] Vite로 React 프로젝트 만들기 본문
React 프로젝트는 Vite를 이용해서 만들어보자
Vite는 저번에 Vue를 했을 때 정리해 둔 것이 있으니 그걸 참고해서 설치하면 된다.
2023.11.07 - [Vue] - [Vue] SFC build tool (Vite)
# 왜 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] 리액트란? (0) | 2023.12.16 |