11월 27일

회의록

2022년 11월 27일

회의 내용

컴포넌트 추상화가 잘 안 됨

• 예시 : 모달 컴포넌트를 예로 들어서 수정, 삭제 등의 형태가 다 비슷한데 기능의 한 두 부분이 달라서 결국 컴포넌트를 다 만들게 된다. (추상화가 안되고 있음)

컴포넌트 위치가 불명확함.

• 페이지 컴포넌트를 도메인과 뷰를 분리하는 과정에서 컴포넌트의 파편화가 심해짐.
• 파편화된 컴포넌트를 어디에 위치시켜야할지 불명확해진다. (페이지 폴더 안에 다 넣을지, 컴포넌트 폴더 안에 위치시킬 것인지 에대한 고민)
• 페이지 역할을 하는 컴포넌트를 제외하고 나머지 기능이나 UI를 담은 컴포넌트는 전부 컴포넌트로 옮기자.

테스트 코드 작성이 필요함

• 하나를 바꾸면 다른 기능에 영향이 너무 많이 가서 테스트의 필요성이 느껴진다. 그런데 어디서부터 시작해야할지 모르겠다.
• 일단 도메인 뷰 분리 작업이 다 끝난 뒤에 작은 컴포넌트 부터 테스트 코드 작성하기;
• 테스트 도구 정하기

반복되는 컴포넌트 props를 위한 interface는 어떻게 할 것인지

• 반복 되더라도 컴포넌트와 붙여 놓기

리코일 삭제하기

• 리액트 쿼리의 상태를 그냥 쓰면 되는데 괜히 한번 리코일에 업데이트를 해주고 있다. 불필요한 상태 관리를 지양하자.

const { storeId } = useParams();
  const { id: userId } = useRecoilValue(userState);

  const navigate = useNavigate();
-  const [store, setStore] = useRecoilState(storeState);
  const { accessToken } = useRecoilValue(userState);

  const { isModal, setIsModal } = useModalHook();

  useStoreQuery(
    graphqlReqeustClient(accessToken),
    {
      id: Number(userId)
    },
    {
      onSuccess: (data) => {
        if (data.store) {
          const { id, name, code, address, phone, isAvailable } = data.store;
-         setStore({ id, name, address, code, phone, isAvailable });
        }
      }
    }
  );

참고 자료