vite 로 리액트 웹앱 만들기

가연·2023년 7월 2일

Create-react-app 대신 vite 사용하는 이유

Create React App
->클라이언트 사이드 앱을 생성.
-> 즉, 생성된 모든 앱에는 빈 HTML 파일과 리액트 앱 번들과 함께
script 태그가 포함되어 있다. 빈 HTML 파일이 로드되면 브라우저는 리액트 코드와 전체 앱 번들이 다운로드될 때까지 기다린다.
-> 이 작업이 진행되는 동안 사용자의 화면에는 아무것도 표시되지 않는다. 그런 다음 앱 코드가 로드된다.
->성능이 낮은 장치에서는 속도가 느려질 수 있다.
-> SSR 지원 여부가 중요한 리액트 앱을 빌드하는 경우에는 이런 지원이 부족한 CRA 보다는 vite 를 사용하는 것을 권장한다.

vite 앱 생성하기

pnpm create vite

해당 코드를 터미널에 입력하면 아래 사진처럼 프로젝트 이름을 쓸 수 있고, 프레임워크를 고를 수 있다.

pnpm run dev

프로젝트를 개발 서버에 띄워보고 싶으면 해당 코드를 터미널에 입력하면 된다.
( pnpm 은 사전에 미리 다운받아야 한다.

npm install -g pnpm

)


레퍼런스

vite 공식 링크

0개의 댓글