Programing/React

Vite 기반 React Project 생성하기

리커니 2022. 11. 8.
반응형

Vite의 장단점 등에 대한 소개는 아래의 링크를 참조하세요!

 

1.Vite 소개

Link : https://vitejs-kr.github.io/

 

Vite

Vite, 차세대 프런트엔드 개발 툴

vitejs-kr.github.io

 

2. Node.js 설치

시작하기를 보시면 Vite는 Node.js가 설치 되어 있어야 합니다.

아래의 링크로 이동하여 Node.js를 설치해주세요.

 

Link : https://nodejs.org/ko/download/

 

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

3.프로젝트 생성

command 창을 열어 프로젝트를 생성할 폴더로 이동 후 아래와 같이 입력해주세요.

[project-name] 은 자신의 프로젝트명을 입력.

 

npm create vite@latest [project-name] --template react

 

패키지명을 입력하면 프레임워크를 선택할 수 있고, 방향키로 이동하여 React를 선택합니다.

 

다음은 Javascript, typescript 중 원하는 선택합니다. 

그럼 폴더에 프로젝트가 생성된 것을 확인하실 수 있습니다.

 

이제 생성한 프로젝트를 IDE로 열어줍니다. (VS Code 사용)

터미널을 열어 아래와 같이 입력합니다.

 

npm install

 

install이 완료되면 아래와 같이 입력하여 프로젝트를 실행합니다.

 

npm run dev

 

 

이제 로컬 주소를 입력하면 아래와 같은 페이지를 확인하실 수 있습니다.

 

반응형

'Programing > React' 카테고리의 다른 글

React useEffect Hook 알짜만 빼먹기!  (0) 2022.12.14
React useState Hook 알짜만 빼먹기!  (0) 2022.12.08

댓글

💲 추천 글