React/TypeScript(Project) - 1

1. Project Setting

vite를 이용한 리액트 프로젝트 생성

• CRA(Create React App)이 아닌 다른 프로젝트 생성 방법

$ npm init vite

dependencies 설정

$ npm install axios react-router-dom

$ npm install -D autoprefixer postcss tailwindcss

npm install

• vite의 경우 기본으로 있었던 react, react-dom 등을 따로 설치해주어야 함.

$ npm install

vite란?

vite를 사용하는 이유
1. CRA의 문제점을 해결하기 위해
2. 빌드 속도, 반영 속도 등 피드백 속도의 엄청난 개선

• 느린 서버 시작 속도 개선 (dependencies와 소스코드로 나누어 개발 시간 개선)
• 느린 업데이트 속도 개선

3. 큰 프로젝트에서 성능 개선 가능 (개발 생산성 업그레이드)
4. HMR을 사용하더라도, 어플리케이션의 크기가 커지면 속도가 저하되는데 vite에서는 앱 크기가 커져도 빠른 속도 유지.
5. TypeScript Transpiling 속도 빠름