23.08.07

오늘 한 일

• TS 스터디
• zustand 질문 답변
• 카공실록 리뷰 작성 api 연결

---

🤔연속적인 mutation 처리?

서버에 이미지 업로드 -> 이미지 id 배열 받음 -> 리뷰 요청 시 이미지 id 배열을 같이 보내야 함

첫 시도

mutate -> onSucess -> mutate

const { mutate: postReviewMutate } = usePostReviewMutation(placeId);
const { mutate: uploadImagesMutate } = useImagesUpload();

const handlePostReviewClick = () => {
  uploadImagesMutate({ 
    files: images,
    folderName: 'review'
  }, 
  {
    onSuccess: (data) => {
      const imageIds = data.map((image) => image.id);
      postReviewMutate({ ...review, imageIds });
    },
  });
};

뭔가 복잡해 보인다.. 다른 방법을 찾아보았다.

두 번째 시도

mutateAsync -> mutate

const { mutateAsync: postReviewMutateAsync } = usePostReviewMutation(placeId);
const { mutate: uploadImagesMutate } = useImagesUpload();

const handlePostReviewClick = async () => {
  const imageIds = await uploadImagesMutateAsync({
      files: images,
      folderName: 'review',
    }).then(({ images }) => images.map((image) => image.id));
  
  postReviewMutateAsync({ ...review, imageIds });
};

분리되어 있어 가독성은 좋아졌다. 하지만 이게 나은 방법인지는 잘 모르겠다.

TS 스터디 종료

책을 가지고 오프라인으로 만나 같이 읽는 방식으로 진행했는데, 금방 끝났다. 책 자체가 타입스크립트 입문서이다보니 심화적인 부분은 많이 생략되어있었다.

새로 알게된 것 - Mapping Modifiers

type Concrete<Type> = {
  [Property in keyof Type]-?: Type[Property];
};

type MaybeUser = {
  id: string;
  name?: string;
  age?: number;
};

type User = Concrete<MaybeUser>;
// type User = {
//   id: string;
//   name: string;
//   age: number;
// }

-?를 사용하면 ?가 붙은 속성을 제거할 수 있다. +?는 ?와 같다. ? 뿐만 아니라 readonly도 제거할 수 있다.

type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};
 
type LockedAccount = {
  readonly id: string;
  readonly name: string;
};
 
type UnlockedAccount = CreateMutable<LockedAccount>;
// type UnlockedAccount = {
//   id: string;
//   name: string;
// }

내일 할 일

• 카공실록 개발