인증 - query string 필터링 목록 - 상세화면 + 장바구니 - 주문서 작성, 목록 - 환경설정
컨텍스트 api, use~~ 라이브러리로 전역 상태관리
모달, 드롭다운, 포스트. 무한스크롤,. 슬라이드 배너 라이브러리없이 생성
반응형 웹
CRA vs Vite
| CRA | Vite |
| webpack 압축 | ESBuild 롤업 빌드 |
| node.js | Golang |
| express serverq | koa server |
| source build | module build |
| process.env.KEY | import.meta.env.KEY |
| HMR | HMR |
| https://create-react-app.dev/ | https://vitejs.dev/guide/ |
*HMR : Hot Module Reading. 개발 코드 변경시 화면에 즉시 적용
타입스크립트는 HMR 사용안함
Vite 빠른 속도 때문에 주목받는다.
작은 규모에서는 크게 다르지 않다
설치 명령어
npx create-react-app book-store-c --template typescript > `npm run start`
npm create vite@latest book-store-v -- --template react-ts > npm install > nvm install 노드버전 > `npm run dev`
package.json의 구조가 다르다
CRA : testing, types 도구들 설치
Vite : Jest 도구 직접 설치해서 test, types 사용한다. 모두 포함한 보일러 플레이트
CRA 로 프로젝트 진행할 것이다! 컴포넌트를 잘 구분하기
폴더구조
App.tsx : app에 모든 컴포넌트를 렌더하면 위험함. 첫화면
index.tsx : 앱 컴포넌트 구조 마운트 하는 역할을 한다. `reportWebVitals` 앱의 상태를 report 해주는 모듈(제거해도됨)
App.test.tsx : `npm run test` 렌더하고자 하는 링크를 수정해주는 파일이다.
📦src
┣ 📂api
┣ 📂components
┃ ┗ 📂common
┃ ┃ ┗ 📜Header.tsx
┣ 📂hooks
┣ 📂models
┃ ┗ 📜user.model.ts
┣ 📂pages
┃ ┗ 📜Home.tsx
┣ 📂utils
┃ ┗ 📜foramt.ts
┣ 📜App.test.tsx
┣ 📜App.tsx
┣ 📜index.tsx
┣ 📜react-app-env.d.ts
┗ 📜setupTests.ts- pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)
- components : 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
- utils : 유틸리티. helper, format 등
- hooks : 리액트 훅
- model : 모델(타입)
- api : api 연동을 위한 fetcher 등
React CLI - package.json
- start : 코드 localhost에서 실행
- build : build 폴더 생성된다.
- 컴파일된 index 등 파일 생성된다. 필요한 react 어플리케이션이 마운트 되는데, static 안에 js 로 컴파일, 번들링 되어있다.
- SPA 앱을 바로 배포할 수 있다. 싱글페이지의 장점
- vs next, nuxt SSR 렌더링 사용할 경우 배포를 위해 nodescript 빌드, 서버가 필요하다.
- test : 테스트 구동한다.
- eject : webpack 세팅 초기화 및 탈출. 별도의 설정이 필요하거나, 라이브러리나 플러그인에서 필요한 경우에만 사용한다.
- "typecheck": "tsc --noEmit --skipLibCheck" : 타입스크립트 타입체크 tsc
npm run typecheck
src/index.tsx:6:3 - error TS2345: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Container'.
Type 'null' is not assignable to type 'Container'.
6 document.getElementById('root')
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 1 error in src/index.tsx:6
tsc : 타입스크립트 컴파일 명령어
typecheck": "tsc --noEmit --skipLibCheck"
tsc : 컴파일을 위한 명령어, 발견 및 알리기 때문에 타입스크립트 명령어로 많이 사용한다.
noEmit : 자바스크립트 출력파일 비활성화 > 타입체크로만 사용하기 위해 js 로 변환하는 과정 생략하겠다.
skipLibCheck : 외부라이브러리 타입체크 생략. > 외부라이브러리 많아졌을때 시간을 많이 소요하게 된다.
☑️ 배운 점
testing 도구에 있어서는 Vite가 챙겨주어야 할게 많다는 것을 알았다.