1. persist 미들웨어persist는 Zustand 상태를 지정된 스토리지에 저장하고, 페이지를 새로고침하거나 애플리케이션을 다시 열 때 해당 상태를 복원하는 역할을 한다. 1-2. 특징상태 저장 및 원본: 상태를 브라우저의 localStorage 또는 sessionStorage 같은 스토리지에 저장한다.기본 키 제공: 저장소에서 상태를 구분하기 위한 키를 설정할 수 있다.직렬화/역직렬화: 상태를 JSON형식으로 저장하고 복원한다.선택적 상태 저장: 필요한 특정 상태만 선택적으로 저장할 수 있다.import { create } from 'zustand';import { persist } from 'zustand/middleware';const useStore = create( persist( ..

1. Fetch-on-render1-1. 개념데이터를 컴포넌트가 렌더링된 이후에 가져온다.일반적으로 useEffect를 사용하여 데이터 fetching을 실행하고, 상태를 업데이트하여 화면에 데이터를 렌더링한다.1-2. 장점구현이 간단하고, React의 기존 생명 주기를 따른다.초기에 최소한의 코드로 시작하기에 적합하다.1-3. 단점컴포넌트가 ㅁ너저 렌더링되고 데이터를 가져오는 동안 빈 상태나 로딩 화면이 보인다.사용자 경험(UX)이 떨어질 수 있다. function Component() { const [data, setData] = React.useState(null); React.useEffect(() => { fetch('/api/data') .then((response) => r..

1. useMutationReact Query 라이브러리에서 제공하는 훅으로, 서버에 데이터를 생성, 수정, 삭제하는 비동기 작업을 간단하고 효과적으로 처리할 수 있도록 도와준다. 주로 POST, PUT, DELETE 요청과 같은 작업에 사용되며, React 상태 관리와 결합하여 데이터 갱신 및 UI 업데이트를 효율적으로 처리한다. 1-1. 주요 특징비동기 데이터 조작: 데이터를 서버에 전송하거나 수정하는 작업을 처리한다.상태 관리isLoading: 요청이 진행중인지 나타냄isError: 요청이 실패했는지 나타냄isSuccess: 요청이 성공했는지 나타냄옵션을 통한 제어성공 또는 실패 시 호출되는 콜백 함수를 설정할 수 있음(onSuccess, onError 등)자동 리패치데이터 변경 후 React Qu..

1. React useQueryReact Query에서 제공하는 훅으로, 서버에서 데이터를 가져오고 이를 관리하는 강력한 도구이다. 비동기 데이터 패칭, 캐싱, 업데이트, 에러 핸들링 등을 간편하게 처리할 수 있다. 1-1. 주요 특징비동기 데이터 패칭데이터를 서버에서 가져오기 위해 사용된다. 내부적으로 데이터를 자동으로 가져오고 캐싱한다.캐싱 및 데이터 일관성같은 키(queryKey)로 요청하면 이미 캐싱된 데이터를 사용하고, 필요 시 다시 패칭한다.자동 갱신 및 리패치데이터를 갱신하거나 특정 조건에서 자동으로 다시 요청한다.로딩 및 에러 상태 관리데이터 로드 상태, 에러 발생 여부를 간단하게 확인할 수 있다. 1-2. 기본 사용법import { useQuery } from '@tanstack/rea..

1. Interceptor 의 동작 원리1-1. 요청 인터셉터(request interceptor)API 요청이 서버로 전송되기 직전에 실행된다.주로 공통 헤더 추가, 인증 토큰 첨부, 요청 데이터 가공 등의 작업에 사용된다.apiClient.interceptors.request.use( (config) => { console.log('Request sent:', config); return config; // 요청 전 로직 추가 }, (error) => { return Promise.reject(error); // 요청 에러 처리 }); 1. config요청 객체를 나타낸다. 여기에는 method, url, headers, params 등이 포함된다.요청을 보내기 전에 잉 객체를..

1. Axios InstanceAxios Instance는 Axios를 설정하고, 재사용 가능한 설정을 가진 HTTP 클라이언트를 만드는 방식이다. 일반적으로 API 요청을 보낼 때 공통으로 필요한 설정(예: 기본 URL, 헤더, 인증 정보)을 매번 지정하지 않고 인스턴스에서 설정해두고 사용할 수 있다. 2. Axios instance 생성 방법import axios from 'axios';// Axios instance 생성const apiClient = axios.create({ baseURL: 'https://api.example.com', // 기본 URL 설정 timeout: 5000, // 요청 제한 시간 (ms) headers: { 'Content-Type': 'applicatio..