Vite를 사용해서 React + TypeScript 시작하기

1. 프로젝트 생성

yarn create vite [프로젝트 명] --template react-ts

npm create vite@latest [프로젝트 명] --template react-ts

2. 프로젝트 실행

// yarn
$cd [프로젝트 명]
$yarn 
$yarn dev or yarn vite
// npm
$cd [프로젝트 명]
$npm install
$npm run dev

프로젝트 실행을 하면 http://localhost:5173/으로 위와 같은 화면이 뜬다!

3. vite 포트 설정

5713이 복잡해보이고 혹시 내가 잘 못 설정 했나 싶어서 찾아 봤는데
yarn dev 명령을 이용해서 개발 서버를 띄울 때 기본적으로 호스트는 localhost로 설정되고, 기본 포트는 5173 으로 설정 된다고 나와 있었다!

5713이 익숙하지 않아서 바꾸고 싶은 마음이 들어서 찾아 보니
package.json에 "dev":"vite"를 아래와 같이 변경 해주면 된다!

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 3000",
    "build": "vite build",
    "preview": "vite preview"
},

출처:
https://osg.kr/archives/648
https://velog.io/@choi-ju12g/Photorage-2-1.-React-TypeScript%EB%A5%BC-Vite%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%B6%81-%EC%B6%94%EA%B0%80