2023년 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;
// }

내일 할 일

• 카공실록 개발