if(재능이 없으면 시간으로 극복하라){return 성공;}

React - Vite란 무엇인가

Vite란 무엇인가

기존에 React를 사용하는 사람들은 Create React App(CRA)을 이용하여 웹 어플리케이션을 만들곤 했다.

CRA를 패키징 하기 위해선 Wegpack을 사용했는데, 처리해야 할 코드들이 많아 질수록 좀 더 빠른 빌드 도구가 필요함이 생긴 것이다.

그렇게 나온게 Esbuild 기반으로 만들어진 Vite이다.

Esbuild는 Go 언어로 작성된 javasScript 빌드 툴이라고 알고 넘어가자

그렇다면 Vite는 어떻게 설치하고 사용할까?

1. 개발 환경 구축

과거에 멈춰 있던 나의 PC는 .. Intelli J를 편집기로 사용하고 약 1년전 버전의 Node를 사용하고 있었다.

이러한 Node의 npm으로 Vite를 사용해보려니 버전이 안맞다 어쩐다 하는 오류를 뱉어내더라..

그래서 최신의 node를 설치해주고 npm을 업데이트 해줬다.

뭐 node는 홈페이지에서 설치하면 되고 npm은 명령어를 통해서 업데이트 해줬다!

npm install -g npm@latest

npm을 업데이트 해주고, vite를 설치한다.

npm create vite@latest

템플릿이랑 framework 뭐 쓸지 정하라해서 나는 이번 경우는 React로 진행할 것이기 때문에 Javascript랑 React로 정했다.

근데 React는 UI 라이브러리지 Framework는 아닌데..?

다 정하고 설치한 후에 실행

npm run dev

image 기본 포트가 5173으로 설정된 Vite+React 웹페이지 띄우기 성공~!