레벨2 - 장바구니 협업 리뷰 피드백

 

1. msw와 리액트 렌더링의 순서

리액트 렌더링보다 msw가 먼저 실행되어야 한다. 그래야 렌더링 과정에서 API 호출과 관련된 오류가 나면 잡아낼 수 있기 때문이다. 

 

2. breakpoint 상수화

화면 breakpoint도 상수화를 하면 일관되게 반응형 디자인을 구현할 수 있다.

 

@media (max-width: 640px) {

@media (max-width: ${breakpoint.MD}) {

 

3. props는 필요한 것만? 통째로?

  orderProducts,
  showDetailsLink,
}: OrderProductListProps) => {
  const { orderId, orderDateTime } = orderProducts;

orderId와 orderDateTime 두 개만을 사용하고 있다.

이때 Props에 orderProducts를 통째로 받는 게 좋을까, 아님 orderId, orderDateTime 두개만 받는 게 좋을까?

 

각 장단점이 있다.

orderProducts 를 통째로 다 받아오면 나중에 두 개 이외의 다른 걸 사용하게 될 때 props를 추가해주지 않아도 된다는 장점이 있지만,
orderProducts의 구조가 변경되면 수정을 해줘야 한다는 단점이 있다.

 

4. 구조 분해 할당

  const { quantity } = orderProduct;
  const { name, imageUrl, price } = orderProduct.product;

 

위 코드를 아래와 같이 수정할 수 있다.

 

  const {
    quantity,
    product: { name, imageUrl, price },
  } = orderProduct;

 

5. default image 로드 실패

이미지 로드 실패에 대비해 default image를 만든다.

그런데 default image 로드도 실패한다면 어떻게 해야 할까?

간단한 방법으로는 백그라운드 색상을 적용하는 방법이 있다. 

백그라운드 색상을 적용함으로써 시각적인 피드백을 줄 수 있다.

 

6. input 값 

const userInputPoint = Number(e.target.value);

 

위 코드는 아래와 같이 사용할 수 있다.

 

const userInputPoint = e.target.valueAsNumber;