레벨2 - 장바구니 피드백

 

1.  aria-label

사용자의 주요 국적을 고려해서 aria-label를 작성하자.

 

2. msw와 localStorage

본 미션의 msw 코드를 보면 localStorage 코드도 함께 사용되고 있다.

 

이렇게 되면 mocking 환경이 동작할 때와 동작하지 않을 때의 동작이 달라질 수 있다.

 

기본적으로 mocking 환경은 운영환경 즉, 배포환경에 영향을 주지 않는 것이 좋다.

따라서 msw 코드 안에서 localStorage 로직을 분리해 보자.

 

3. 서버와 상호작용 테스트

상호작용 테스트를 할 때, 인덱스를 통해 요소를 선택했다.

그러나 이 경우, 서버가 바뀌게 되면 인덱스의 순서가 바뀌게 되고 오류가 생긴다.

따라서 비동기 테스트를 작성할 때 서버 api 통신하는 부분을 항상 성공한다고 가정하고 mockup을 작성해 테스트를 진행해 보자.

테스트의 경우에서는 서버에 대한 의존도를 떨어트리는 것이 오히려 프론트엔드 코드에 대한 신뢰성을 높이는 방법이다.

 

+ 리뷰리뷰

1. useEffect 내 async-await 사용

 

useEffect(async () => {
  await fetch();
}, []);

 

useEffect의 클린업 함수(cleanup function)를 반환해야 하는데, async 함수는 항상 Promise를 반환하기 때문에 이 규칙에 어긋난다.

따라서, useEffect 내부에서 비동기 작업을 수행하려면 별도의 async 함수를 만들고, 이를 호출하여 사용하는 것이 좋다.

 

2. custom hook 재사용성 외에도...?

재사용성이 없더라도 관심사의 분리를 위해 Hook으로 로직을 분리해도 괜찮다.

 

관심사의 분리 / 재사용성 / 도메인-유틸 응집성 등을 고려해서 분리하면 프로젝트의 복잡도가 많이 낮아진다.

 

 

3. 드래그되는 로고 방지

메인 로고가 이미지가 아닌, span이라면 user-select 속성을 none으로 해보자.

그러면 로고는 드래그가 되지 않는다.

 

4. Outline none의 접근성

input focus의 outlilne을 없애는 것은 웹 접근성에 좋지 못한 행동이다.

어떤 요소가 포커스를 받고 있는지 쉽게 알아차릴 수 없기 때문이다.

따라서 없애지 말고 새로운 스타일로 수정해 보자.

 

5.  recoilPersist

recoilPersist를 사용하면 해당 atom 값을 localStorage에 자동으로 저장할 수 있다.

 

const { persistAtom } = recoilPersist({
  key: LOCAL_STORAGE_KEY.CART,
});

export const productsInCartState = atom<ProductInCart[]>({
  key: 'productsInCart',
  default: [],
  effects_UNSTABLE: [persistAtom],
});

 

6. forEach 내부 비동기 로직 실행

 

forEach 내부에는 await 키워드가 있어도 순차적으로 처리가 되지 않는다.

비동기 처리가 완료되는 것을 기다리지 않기 때문이다.

 

따라서 순차처리가 중요하다면 for.. of,map/Promise.all을 활용해보자.

 

7. 옵셔널 체이닝 제거

옵셔널 체이닝을 제거하고 default value를 활용할 수 있다.

 

const { cartList } = useCartList();

{cartList?.length > 0 && (

 

위 코드를 아래 코드처럼 바꿀 수 있다.

 

const { cartList = [] } = useCartList();

cartList.length > 0 && (