Vite를 이용해서 React.TS 프로젝트 생성

1. React 프로젝트 생성하기

기존에는 터미널에 yarn create react-app Lucy-Arti(프로젝트명)을 입력하여 프로젝트를 생성했다.

프로젝트를 생성하는데 약 1분 정도의 시간이 걸린다.

지루할 정도로 서버 구동 시간이 길고 코드가 길어질수록 코드 갱신 시간 또한 증가하는 페인포인트가 있었다.

Vite를 이용하면 생성하는 시간도 단축되고 코드 갱신 시간도 줄어든다.

왜 Vite를 이용하면 빠른지는 https://ko.vitejs.dev/guide/why.html 참고

Vite로 React + TypeScript 프로젝트를 생성하려면 터미널에 yarn create vite Lucy-Arti --template react-ts를 입력한다.

진짜 3초만에 생성된다.

2. React 프로젝트 실행하기

생성하고 app.tsx를 들어가보면 에러 파티가 나있다.

왜냐? npm install과 같은 필요 패키지 다운로드가 안되어있어서 발생하는 것이다.

프로젝트를 생성한 폴더로 이동해서 터미널에 yarn을 입력해서 패키지를 다운해준다.

실행할땐 yarn start가 아닌 yarn vite나 yarn dev를 터미널에 입력하여 실행해준다.

입력하면 Local 주소가 나오는데, 클릭해보면 아래와 같이 실행되는 것을 볼 수 있다.

* 왜.... Local이 3000이 아니라 5173인지 모르겠다... 더 알아봐야겠다...

더 알아봤다.

 

원래 Vite로 React를 실행하면 기본 포트가 5173으로 설정되어있다.

익숙하지 않아서 3000포트로 열고싶다면 

vite --host 0.0.0.0 --port 3000

를 입력해주면 전처럼 3000포트로 열린다.

하지만 매번 이 코드를 입력하기는 귀찮기 때문에 package.json을 수정해보도록 하자.

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
}

원래는 scripts가 이렇게 작성되어있는데,

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 3000",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
 }

이런식으로 바꿔주면 yarn dev를 입력하면 자동으로 위 코드가 실행되어 3000포트로 열리게 된다.(문제해결!)