[React] vite 프로젝트 만들기

노드 패키지 매니저(npm)를 사용한 방법이다.

 

시작하기

호환성

Vite는 버전 14.18+ 또는 16+ 의 Node.js를 요구한다. 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있다.

//이미 설치되어 있는 Node.js의 버전을 확인하고 싶다면
node -v

 

프로젝트 생성

1. 기본 명령어

npm create vite@latest

위 명령어로 vite 최신 버전을 설치하면서 프로젝트 이름, 프레임워크, 템플릿을 순서대로 고르면 프로젝트가 생성된다.

2. 옵션 추가

npm create vite@latest project-name -- --template react-ts
// npm 7 이상의 버전에서는 꼭 '--'를 붙여줘야한다.
// JS를 사용하는 리엑트라면 끝에 react, TS를 사용하는 리엑트면 react-ts를 붙여주면 된다.

프로젝트를 생성하면서 옵션으로 이름과 템플릿을 붙여주면 한 번에 생성할 수 있다.

 

프로젝트 실행

npm run dev

 

명령어 실행 후 Local에 떠있는 주소를 클릭하거나 브라우저 주소창에 http://127.0.0.1:5173 혹은 localhost:5173 을 입력하면 프로젝트를 실행시킬 수 있다.

 

npm run dev -- --host

만약 모바일이나 태블릿 같은 다른 기기에서도 실행화면을 보고 싶다면 위 명령어로 실행 후 Network 주소로 접속하면 된다.

이때 접속하려는 기기에서 서버를 킨 기기와 동일한 네트워크(와이파이, LAN)를 사용하고 있어야 한다.

 

호스트 변경

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
});

호스트를 변경하고 싶다면 프로젝트의 vite.config 을 열어 server  객체를 생성하고 port에 원하는 숫자를 할당하면 된다.

 

Git

CRA와 다르게 프로젝트 생성시 git이 포함되어 설치되지 않는다. 따라서 git init 을 통해 .git을 만들어주면 된다.