2025년 vite로 리액트 설치하는 방법!(npm사용)

 

리액트는 메타에서 개발한 오픈소스 라이브러리로 현 시점 웹에서 많이 사용하는 라이브러리입니다

spa(single page application)방식으로 작동하며 당연히 사전에 노드가 설치 되있어야 사용가능하다

기존의 create-react-app 방식은 지원이 종료 됬다는 이야기도 있다보니 vite로 설치 하겠다

vite란? 빠르고 간결하게 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고 한다

 

-설치방법

 

npm create vite@latest

위에 명령어를 입력하고 실행 해주면 여러 설정이 나오는데요 

project name은 현재폴더에 만들 프로젝트 네임입니다 적어주신대로 폴더 내부에 리액트 환경이 만들어집니다

select a framework는 vite로 사용할 프레임 워크를 선택 해야됩니다 리액트 말고도 vue,svelt등 다양하게 설치 할수 있습니다

저희는 리액트설치 할거니까 리액트를 눌러줍니다 그리고 select a variant는 자바스크립트를 사용할지 타입스크립트를 사용할지 

정해주면 됩니다

 

프로젝트 네임 정해준곳으로 cd를 사용하여 경로를 이동해줍니다 그리고 npm install 해줍니다

npm install

 

-시작방법 

 

npm run dev

npm run dev하면 리액트가 실행 된다 

src 폴더 내부에 App.jsx에서 실행하면된다