개발하기 전 준비
용어 정의
서비스의 개념 정리를 통해, 만드는 것에 대한 혼선이 있을 수 있으므로 정의가 필요하다.
- Product: 상품
- Summary: 상품에 대한 요약 정보
- Detail: 상품에 대한 상세 정보
- Image: 상품 이미지
- Option: 상품에 대한 상세 옵션 종류 (색상, 크기 등)
- OptionItem: 옵션에 대한 상세 옵션 값 (옵션이 색상이라면 이건 Blue, Red 같은 걸 의미함)
- Category: 상품에 대한 분류
- Cart: 장바구니
- LineItem: 장바구니에 담긴 것 (상품, 옵션, 수량 등을 동시에 다룸)
- 여기서도 Option과 OptionItem을 사용한다.
- 용어는 동일하지만 Product와 다른 구성을 갖기 때문에, 여기서는 Product와 Order라는 접두어를 활용
- Order: 주문
- 여기서도 동일한 LineItem 활용.
- User: 사용자기능 정의
1. 상품 목록 확인
2. 상품 상세 정보 확인
3. 장바구니에 상품 담기
4. 주문하기 → 배송지 입력, 결제
5. 주문 목록 확인
6. 주문 상세 확인
7. 로그인
8. 회원 가입화면 정의
1. 홈 페이지 - `/`
2. 상품 목록 페이지 - `/products`
3. 상품 상세 페이지 - `/products/{id}`
4. 장바구니 페이지 - `/cart`
5. 주문 페이지 - `/order`
6. 주문 완료 페이지 - `/order/complete`
7. 주문 목록 페이지 - `/orders`
8. 주문 상세 페이지 - `/orders/{id}`
9. 로그인 페이지 - `/login`
10. 회원 가입 페이지 - `/signup`
11. 회원 가입 완료 페이지 - `/signup/complete`REST API
REST API 문서를 보면서, 백엔드에 필요한 것들 조회한다.
필요한 부분이 필요할 떄에는, 백엔드 개발자에게 요청하여 API를 수정해야 한다.
Axios
대부분 REST API호출할 떄, 자주 사용하는 라이브러리
Jest-dom
React Testing Library에서 활용할 수 있는 DOM 확인용 Matcher 모음
Test Helper
테스트 코드에서 Theme, React Router에서 문제가 발생하지 않도록 헬퍼 함수를 정리하였다.
import { render as originalRender } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import defaultTheme from './styles/defaultTheme';
export function render(element: React.ReactElement) {
return originalRender((
<MemoryRouter initialEntries={['/']}>
<ThemeProvider theme={defaultTheme}>
{element}
</ThemeProvider>
</MemoryRouter>
));
}Types
MSW에서 쓸 Types들을 정리하여 미리 정의를 해둔다.
FE입장에서, 데이터를 구성할 수 있다고 하면, FE입장에서 구성을 하면 된다. 하지만, BE와 소통이 잘 되고 있다면 BE와 이야기를 하며 맞추는 것이 좋다.
이전 강의에서 진행했던 E2E Test, Styled Component, Routes, MSW는 별도로 정리하지 않았음.
Last updated