과제 내용
- reduct와 같은 상태 관리 라이브러리를 사용해서 상태를 관리
- 로그인 기능은 firebase의 인증 서비스 이용
- 상품 데이터는 fakestoreapi를 이용해서 구현할 수 있음
예: 상품 가져오기HTTP GET https://fakestoreapi.com/products - optional) typescript 사용해보기
userEvent > fireEvent
여행 상품 판매 앱 소개
Eslint Plugins 설치 및 설정
Prettier 설치 및 설정
전체적인 구조 만들기
Summary 페이지 Form 구현
첫 번째 페이지 구현을 위해서 해야 할 일
Mock Service Worker
MSW를 이용한 테스트(상품이미지 가져오기) (1)
MSW를 이용한 테스트(상품이미지 가져오기) (2)
서버에서 데이터 가져올 때 에러 발생 시 처리
옵션 정보 가져오기
UI를 위한 작업
상품 가격을 위한 테스트 케이스 구현
컴포넌트 간 데이터 전달
context를 사용해서 컴포넌트에 데이터 제공하기 (1)
context를 사용해서 컴포넌트에 데이터 제공하기 (2)
context 를 사용해서 가격 계산하기
context wrapper 추가로 에러 제거하기
모든 테스트 케이스를 wrapper 로 감싸주기
옵션 가격을 위한 테스트 구현
상품 가격, 옵션 가격을 더한 총 가격 구하기
페이지마다 스텝 주기
주문 확인 페이지 (1)
주문 확인 페이지 (2)
주문 완료 페이지 (1)
주문 완료 페이지 (2)
not wrapped in act 경고
첫 페이지로 돌아갈 때 State Reset!
Vite로 리액트 앱 생성하기
소스 코드 옮기기
user event 소스 코드 변경하기 (v14)
msw v1 에서 v2 로 변경하기
