[React] Vite로 React 시작하기

React를 시작하기 앞서 node.js를 설치해야한다.

버전은 LTS로 설치하는것을 추천.

 

* LTS란 

Long Term Support의 약자이며 2년간 지원 한다라는 뜻이다.

여기서 지원이란 해당 버전에 대한 안정성과 신뢰도를 보장한다는 뜻이다.

 

설치 후 node -v 명령어로 설치 및 버전 확인

 

 

* node 설치 후 vscode로 리액트 실행시 vscode를 재부팅하여 사용해야한다. 재부팅 안할시 명령어를 인식하지 못한다.

 

 

react 설치 방법에는 next.js, CRA 등이 있다.next.js는 프레임워크 이기 때문에 next.js 문법을 배워야한다.CRA 경우 프로젝트 build시 웹팩으로 설정해야하고 Vite는 config에 설정하는 이점이 있다.Vite는 build tool이자 초기 세팅형태로 빠르고 간결하게 생성할 수 있어 Vite를 사용하였다.

 

 

프로젝트 생성하기

설치를 원하는 폴더로 이동한 후 아래의 명령어를 입력한다.

# npm v7 이상에서는 `--` 를 반드시 붙이기
npm create vite@latest {프로젝트 명} --template react

 

node 모듈 설치

Vite는 자동으로 node 모듈을 설치해주지 않기때문에 아래 명령어를 통해 모듈을 설치해준다

npm istall
# 또는
npm i

 

프로젝트 실행

npm run dev

명령어 실행 후 나오는 Local 주소를 클릭하면 프로젝트가 실행된다.

 

 

---

node.js 내부에 express가 포함 되어있어 코드 수정시 웹페이지를 새로고침해야 할 필요없이 파일 저장만 하면 화면에 수정된 코드가 적용된다.