React + Vite + TypeScript

Vite(비트)란?

⇒ js 빌트 툴, 웹 개발 도구

⇒ 개발 서버 구동이 빠르고, 개발 시 실제 수정이 일어난 곳만 재컴파일해서 보여준다.

밑의 명령어를 입력해준다. 그러면 project_name 을 설정하는 화면이 나오고, 그 후 프레임 워크를 선택할 수 있다.

저는 react-typescript 환경이 필요하기 때문에 (react → react-ts)를 선택하였습니다.

npm init vite

생성된 프로젝트 폴더로 이동하여 아래의 명령어를 입력해본다.

그 후 ‘http://localhost:3000/’를 접속하여 서버가 잘 구동되었는지 확인해본다.

npm install
npm run dev

src/App.css 에서 아래 부분의 animation: —— ‘20s’ —— 부분을 ‘10s’ 수정한 후,

‘http://localhost:3000/’를 새로고침 해보면 가운데의 그림이 좀 더 빠르게 돌아가는 것을 확인해볼 수 있다.

이처럼 ‘npm run dev’로 실행하면 수정한 후 서버를 재구동해 줄 필요없이 그 부분만 재컴파일해서 바로 보여준다.

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

참고링크