Vite로 리액트 실행하기

변화와 늘 새로운 공부가 당연한 프로그래밍 세계라지만, 프론트엔드 영역은 유독 더 변화가 빠른 것 같다고 느낀다.

자바 등을 사용하고 프론트 단은 JSP 파일 등에서 스크립트를 선언해서 백과 프론트의 영역이 뚜렷하게 분리되지 않고 사용되던 J-QUERY가 대다수였던 환경에서,

현재는 백과 프론트가 사용하는 기술이 확연하게 분리되어 REACT 나 VUE 등을 주로 사용한다.

 

그 중 REACT는 몇년 전만 하더라도 node를 사용한 npx create-react-app 명령어로 React를 설치, 실행하였지만, 요즘에는 vite를 활용하여 react를 실행한다.

 

그렇다면 왜 Vite를 사용하게 됐을까?

 

Vite란?

vite 공식 문서에 들어가면 이름의 어원부터 프랑스어로 빠르다라는 의미라고 쓰여있고, 이것이 vite의 가장 도드라지는 부분이다.

특히 create-react-app(CRA)보다 매우 빠른 서버 시작을 지원한다.

또한 React 공식 문서에서도 권장되고 있으며, 우리가 리액트 앱을 실행하기에 필요한 기본 설정등을 쉽게 선택하고 사용할 수 있도록 지원한다.

 

Vite로 리액트 앱 실행하기

1. 제일 먼저 IDE(VSC)를 실행시킨 후, 터미널에 프로젝트가 위치할 폴더를 연다.

2. 터미널에 아래와 같이 입력한다.

 

NPM

npm create vite@latest

 

Yarn

yarn create vite

 

- 공식 문서에는 가장 흔한 두 방법 외에도 PNPM, Bun으로 실행하는 방법도 쓰여있다.

 

3. 터미널에서 프로젝트의 이름을 입력하라고 뜨며, 원하는 프로젝트 명을 입력한다.

4. 원하는 프레임 워크를 방향키로 조절하여 선택한다. (react 앱을 생성할거니 React를 선택해준다.)

5. 원하는 버전을 선택한다. (타입스크립트와 자바스크립트의 선택지 외에도 SWC 유무도 선택할 수 있다.)

6. 터미널에서 cd를 이용하여 생성한 프로젝트명이 쓰여진 프로젝트로 이동한다.

cd 프로젝트명

7. 옮겨진 터미널에 npm i를 입력하여 npm을 다운로드한다.

npm i

 

8. 터미널에 npm run dev를 입력하여 프로젝트를 실행시킨다.

npm run dev

 

8-1. 터미널에 h를 입력하면 도움말을 볼 수 있다. (터미널에 o 입력시 웹 브라우저에 바로 리액트 페이지가 실행됨 등의 기능 사용 가능)

h

 

9. 터미널에 o를 입력한다.

o

 

10. 웹브라우저에 react 페이지가 실행된다.

 

 

 

 

 

출처: Vite 가이드( https://ko.vitejs.dev/guide/)