[React] TanStack Query 캐시 레벨과 옵저버 레벨

동일한 쿼리 키를 사용하는 useQuery 를 여러 컴포넌트에서 사용할 수 있습니다. 이런 경우 보통 커스텀 훅으로 구현하여 여러 컴포넌트에서 사용합니다. 캐시 레벨 (Cache level)각각의 쿼리 키에 대해서, 캐시 엔트리는 오직 한 개만 존재합니다. 즉, 동일한 쿼리 키를 가진 useQuery 를 여러 곳에서 사용해도 캐시 엔트리는 하나입니다. 이 캐시 엔트리에 대응하는 레벨을 캐시 레벨이라고 합니다. 캐시 레벨에서 작동하는 useQuery 의 옵션으로는 staleTime 과 gcTime 이 있습니다. 캐시 엔트리는 하나만 있기 때문에, 해당 옵션들은 엔트리가 오래되는 시점 또는 가비지 컬렉션이 될 수 있는 시점을 특정합니다.  옵저버 레벨 (On observer level)React Query의..

  • format_list_bulleted React
  • · 2025. 3. 2.
  • textsms

[React] TanStack Query v5 마이그레이션 준비

React Query를 v3에서 v5로 마이그레이션하기 위해 React Query의 전반적인 개념들을 깊이 있게 학습했고 기존 버전과 호환되지 않는 변경점들을 파악했습니다. Installv3에서는 React Query, v5에서는 TanStack Query라고 표현하지만 편의상 React Query라고 통일합니다.yarn remove react-queryyarn add @tanstack/react-query Important DefaultsReact Query를 사용하여 개발할 때 알아둘 필요가 있는 주요 기본값들이 있습니다. 이 값들은 React Query의 기본적인 동작 원리와 관련이 있습니다.staleTimegcTimeretrystructuralSharingstaleTimestale 상태란 쿼리가 ..

  • format_list_bulleted React
  • · 2025. 2. 26.
  • textsms
[React] 폰트 최적화 알아보기

[React] 폰트 최적화 알아보기

인프런 강의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2의 폰트 최적화를 학습하고 정리한 내용입니다. 폰트를 최적화하지 않으면 다음과 같은 현상이 발생할 수 있습니다. 웹 폰트도 하나의 리소스로 네트워크를 통해 서버에서 다운로드해야 합니다. 그렇기 때문에 폰트가 적용된 텍스트를 브라우저 화면에 출력할 때 깜빡이는 현상이 발생합니다. 깜빡이는 현상에는 FOUT와 FOIT가 있다. FOUT(Flash of Unstyled Text)는 처음에는 기본 폰트로 출력하다가 다운로드가 완료되면 폰트가 적용되는 방식입니다. IE와 엣지 등의 브라우저에서 기본적으로 이 방식을 사용하고 있습니다.FOIT(Flash of Invisible Text)는 처음에는 텍스트를 보여주지 ..

  • format_list_bulleted React
  • · 2024. 5. 25.
  • textsms