9월 4주차 기록

배워가기

react-query options

• staleTime vs gcTime

  • staleTime: number | ((query: Query) => number)
    • 기본값은 0
    • 데이터가 stale하다고 여겨진 시점으로부터의 시간
    • Infinity로 설정 시 데이터는 절대 stale하다고 취급되지 않음
  • gcTime: number | Infinity
    • 기본값은 5 * 60 * 1000(5분)
    • 사용되지 않은/비활성화된 데이터가 메모리에 남아있는 시간(milliseconds)
    • 쿼리 캐시가 사용되지 않거나 비활성화되면, 캐시 데이터는 gcTime이 지난 후에 가비지 컬렉션 됨
    • Infitinity로 설정 시 가비지 컬렉션을 하지 않음

• refetchInterval vs refetchIntervalInBackground

  • refetchInterval: number | false | ((query: Query) => number | false | undefined)
    • 정해진 시간인 지날 때마다 계속 refetch한다
  • refetchIntervalInBackground: boolean
    • true로 설정 시 refetchInterval로 반복적으로 refetch하도록 설정된 쿼리들은 탭/백그라운드에서도 계속 refetch를 수행함

• queryClient.setQueryData vs queryClient.fetchQuery

  • queryClient.setQueryData
    • 쿼리의 캐시 데이터를 즉각 업데이트한다. 만약 쿼리가 존재하지 않으면, 새로 생성된다.
    • 쿼리가 기본 gcTime인 5분 동안 사용되지 않으면, 해당 쿼리는 가비지 컬렉트된다.
    • 여러 개의 쿼리를 한 번에 업데이트하고 커리 키를 부분적으로 매칭시키고 싶다면, queryClient.setQueriesData를 사용할 수 있다.
  • queryClient.fetchQuery
    • 쿼리를 fetch하고 캐시하는 데 사용되는 비동기 함수. 데이터를 반환하거나 에러를 던진다.
    • 쿼리가 존재하고 데이터가 비활성화 상태이거나 주어진 staleTime보다 오래 됐다면, 캐시의 데이터를 반환한다. 아니면 가장 최근 데이터를 fetch한다.
  • 차이점
    • setQueryData는 동기적이고 이미 동기적으로 사용 가능한 데이터가 있음을 가정한다. 만약 데이터를 비동기로 fetch하고 싶다면 쿼리 키를 refetch하거나 fetchQuery를 이용하여 비동기 fetch를 수행하는 것을 권장한다.
    • fetchQuery는 비동기적이고 데이터가 조회되는 동안 동일한 쿼리에 대해 중복 요청이 생성되지 않도록 보장하는 반면, useQuery 인스턴스가 동일한 쿼리를 렌더링할 때 setQueryData는 동기적으로 작동한다.

Ref https://tanstack.com/query/latest/docs/reference/QueryClient/

react-query useMutation으로 업데이트한 데이터 바로 보여주기

1. queryclient의 setQueryData 사용하기

   Copy

   const queryClient = useQueryClient()
   
   const mutation = useMutation({
     mutationFn: editTodo,
     onSuccess: (data) => {
       queryClient.setQueryData(['todo', { id: 5 }], data)
     },
   })
   
   mutation.mutate({
     id: 5,
     name: 'Do the laundry',
   })
   
   const { status, data, error } = useQuery({
     queryKey: ['todo', { id: 5 }],
     queryFn: fetchTodoById,
   })

2. queryClient의 invalidateQueries 호출

3. 클라이언트 데이터 기반의 낙관적 업데이트(Optimistic Update)

Ref

• https://tanstack.com/query/latest/docs/framework/react/guides/updates-from-mutation-responses
• https://pozafly.github.io/react-query/mutation-after-data-update/

CSS text-decoration underline 간격 조정하기

1. text-underline-position: under;
2. text-underline-offset px 주기 (일부 브라우저 미지원)
3. border-bottom과 padding-bottom으로 조정하기

기타 text-decoration 관련 속성들

Ref https://hianna.tistory.com/680

react-query에서 pagination query 처리하기

infinite scroll 말고!

useQuery와 keepPreviousData 옵션을 사용할 수 있다.

🧑‍🏫 v5에서는 placeholderData에 keepPreviousData 를 import해서 사용한다.

Ref

• https://tanstack.com/query/v4/docs/framework/react/guides/paginated-queries
• https://tanstack.com/query/v5/docs/framework/react/guides/paginated-queries

Shadow DOM을 JavaScript 없이도 쓸 수 있다?

기존에 Shadow DOM을 사용하려면 JavaScript가 필요했다.

const host = document.getElementById('my-elem')
const shadowRoot = host.attachShadow({ mode: 'open' })
shadowRoot.innerHTML = '<h1>안녕하세요?</h1>'

그런데 Declarative Shadow DOM(선언적 Shadow DOM) 기능을 통해 JavaScript 없이도 Shadow DOM을 만들 수 있게 되었다! 😲

<div id="my-elem">
  <template shadowrootmode="open">
    <style>h1 { color: red; }</style>
    <h1>나는 여기서만 빨간색이에요</h1>
  </template>
</div>

이것저것 모음집

• 2D 공간에서의 점은 Pixel 이라 한다. 그럼 3D 공간에서의 점은? -> Voxel(Volume + Pixel)

기타공유

Git File History

vscode에서 git diff를 확인하기 좋은 익스텐션!

Ref https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

TypeScript 5.7 플랜

지난주에 TypeScript 5.6 릴리즈를 포스팅했었는데, 바로 5.7 플랜이라니 😵 바쁘다 바빠.

Ref https://github.com/microsoft/TypeScript/issues/59905

마무리

밴드 녹음🎤 에 짝꿍 쇼핑🛍️에 가족 일정까지

바쁘디 바쁘지만 시원해서 좋았던 주말이었다

9월도 이제 끝나는구만