1. Next.js 란React의 기능을 확장한 프레임워크로 SSR(서버 사이드 렌더링)과 SSG(정적 사이트 생성) 같은 기능을 기본적으로 제공하며, SEO와 성능 최적화에 강점을 가지고 있다. 1-1. 서버 사이드 렌더링(SSR)서버에서 HTML을 생성하며 클라이언트에 전달한다.초기 렌더링 속도가 빠르고, SEO에 최적화되어 검색 엔진에 유리하다.페이지 요청 시 데이터를 즉시 가져와서 렌더링한다. 1-2. 정적 사이트 생성(SSG)빌드 시 HTML 파일을 생성하므로 빠른 로드 속도를 제공한다.자주 바뀌지 않는 컨텐츠에 적합하며,사용자가 빠르게 접근할 수 있다.데이터는 빌드 시점에 고정된다 1-3. 파일 기반 라우팅pages 디렉터리 안의 파일 이름이 자동으로 URL 경로가 된다.별도의 라우터 설정 없..

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 등이 포함된다.요청을 보내기 전에 잉 객체를..