[TanStack Query] useQuery() 옵션 - enabled, select

enabled- 쿼리(queryFn) 실행 여부를 제어- enabled: true => 기본값, 컴포넌트 렌더링 시점에 쿼리를 자동 실행- enabled: false => 쿼리가 자동으로 실행되지 않음, 아래 사용예제 참고하기 1) 컴포넌트 렌더링 시점에 바로 서버 데이터를 불러오지 않고, 특정 이벤트가 발생했을 때 받아오고싶은 경우const { data, refetch } = useQuery({ queryKey: ["todos"], queryFn: getTodos, enabled: false});return ( refetch()}>데이터 불러오기 ); 2) 순차적으로 의존적인 두개의 쿼리를 실행해야할 때- 첫번째 쿼리(getUserByEmail)의 실행 결과가 두번째 쿼리(getProject..

• format_list_bulleted React
• · 2024. 9. 6.
• textsms

[인증/인가] 쿠키, 세션, 토큰, JWT

개념정리인증 (Authentication)서비스를 이용하려는 유저가 등록된 회원인지 확인하는 것 인가 (Authorization)인증을 받은 유저가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 HTTP의 관련 특성1) 무상태 (stateless)- HTTP 프로토콜은 무상태 프로토콜- 각 요청이 독립적이며, 서버가 이전 요청에 대한 정보를 기억하지 않음 (이전에 인가된 요청이 왔는가? 모른다)- 따라서 각 요청마다 상세 정보를 알려줘야 함 2) 비연결성 (connectionless)- 서버와 클라이언트는 연결되어있지 않음- 서버 입장에서는 매번 새로운 클라이언트의 요청을 받는 것 쿠키- 브라우저에 저장되는 작은 데이터 조각, key-value 쌍으로 저장- HTTP 무상태성과 비연결성 특성..

• format_list_bulleted 네트워크
• · 2024. 9. 6.
• textsms

UX 향상 기법 - Throttling & Debouncing, lodash

짧은 시간 연속으로 이벤트가 발생했을 때 어떻게 처리할 것인가! Throttling짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그릅화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것, 주로 무한 스크롤에서 사용 Leading Edge- 이벤트가 처음 발생할 때 핸들러가 실행- 이후 주어진 시간 동안은 이벤트가 무시됨- 사용자가 스크롤을 시작하는 첫 시점에만 API 호출이 이루어지고, 일정 시간동안 추가 호출이 무시됨 Trailing Edge- 이벤트가 마지막으로 발생한 후 주어진 시간이 지나면 핸들러가 실행- 사용자 입력 필드에 타이핑을 멈춘 후 일정 시간이 지나야 서버에 검색 요청이 전송됨 Leading & Trailing Edge- 이벤트가 처음 발생할 때와 마..

• format_list_bulleted React
• · 2024. 9. 6.
• textsms

[React] Zustand

사용법설치yarn add zustand store 생성1) zustand 폴더 > bearsStore.js 생성 2) zustand의 create를 사용해 스토어 생성 (이 때 스토어는 관리할 상태에 따라 여러개가 될 수 있음)import { create } from 'zustand';const useBearStore = create((set) => { return { bears: 0, increase: function() { set(function(state) { return { bears: state.bears + 1 } }) }, // 초기화용 함수 init: function (){ set({ ..

• format_list_bulleted React
• · 2024. 9. 6.
• textsms

Tanstack Query 캐시데이터의 생명주기

Life Cycle fresh데이터를 새로 패칭할 필요가 없는 상태입니다. **staleTime**이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.stale데이터를 새로 패칭해야 하는 상태입니다. **staleTime**이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.기본 staleTime 은 0으로 설정돼있음! (바로 stale 상태가 됨)active현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.inactive더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말합니다.deleted캐시에서 제거된 쿼리 상태입니다. gcTime(cache Time) 이 지나면 쿼리..

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

TanStack Query

서버상태 관리를 위한 라이브러리데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공이전보다 비동기 로직을 간편하게 작성하고 유지보수성을 높일 수 있음 주요 기능1) 데이터 캐싱: 동일한 데이터를 여러번 요청하지 않도록 캐싱하여 성능을 향상시킴2) 자동 리페칭: 데이터가 변경되었을 때 자동으로 리페칭하여 최신상태를 유지3) 쿼리 무효화: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있음  사용해보기주요 hooks1) get: useQuery2) modify: useMutation3) refresh: invalidateQueries  설치yarn add @tanstack/react-query ProviderQueryClientProvider로 서버상태의 영향권에 들어올 App ..

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