프로젝트: React(TypeScript) 기반의 동적 UI 개발(1)-cra.vite차이

✨Book Store 앱 만들기 프로젝트

cra와 vite의 차이

cra

yarn create react-app 프로젝트명 --template typescript

vite

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

프로젝트 구조

1. pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)
2. components : 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
3. utils : 유틸리티
4. hooks : 리액트 훅
5. model : 모델(타입)
6. api : api 연동을 위한 fetcher 등

타입을 체크하는 CLI

"typecheck":"tsc --noEmit --skipLibCheck

yarn typecheck

💢타입에러가 없었는데 일부러 에러를 내자 문제가 있는 부분을 찾을 수 있었다.

tsc

🔸타입스크립트 컴파일을 위한 명령어

noEmit

🔸js로 출력(번들)하는 부분을 비활성화하는 설정

skipLibCheck

🔸우리가 작성한 코드 외에 외부라이브러리의 타입체크를 생략하겠다는 설정