useMutation

React Query React 애플리케이션에서 서버 상태(Server State)를 관리하는 라이브러리입니다. 설치 npm i @tanstack/react-query 주요 기능 캐싱 Cache 같은 queryKey로 호출하면 네트워크 요청 없이 캐시된 데이터 사용 가능 ...

Swagger Swagger는 OpenAPI Specification(OAS)를 기반으로 동작하는 REST API 문서화 도구입니다. NestJS에서는 @nestjs/swagger 패키지를 통해 Swagger를 쉽게 설정하고 사용 가능합니다. 설치 npm install --save @nestjs/swagger swagger...

Zustand의 persist 미들웨어로 로그인 상태 유지 구현해보자. persist Zustand의 persist 미들웨어는 전역 상태를 직렬화(serialize) 하여 저장소(localStorage 등)에 저장하고, 이후 앱이 로드될 때 역직렬화(deserialize) 해서 다시 불러옵니다. 페이지를 새로고침해도 상태 유지 Zus...

Zustand에 대해 알아보자. Zustand Zustand는 redux에 비해 간단하고 직관적인 상태 관리(Store) 라이브러리입니다. 심플한 API : Redux처럼 복잡한 액션/리듀서 없음 가벼움 : minified + gzip 기준 약 1KB 서브스크립션 최적화 : 필요한 상태만 업데...

useRef DOM 요소나 변수 값을 저장하거나 React 컴포넌트가 리렌더링되어도 값을 유지할 수 있도록 해주는 훅입니다. const myRef = useRef(initialValue); myRef.current — 실제 저장값 DOM 접근 DOM 요소에 연결해서 focus, scroll 등 직접 제어 가능 import {...

px 사용 Tailwind CSS는 기본적으로 rem 단위를 사용하여 반응형 디자인을 고려한 크기 조정에 유리하지만, 특정 상황에서는 px 단위를 사용하여 더 세밀한 조정이 필요할 수 있습니다. 예를 들어, min-w-[320px]와 같은 방식으로 px 단위를 사용하면 정확한 픽셀 크기를 지정할 수 있습니다. px -> rem 변환 이유...

Tailwind CSS를 사용해 Grid 시스템을 적용해보자. 열/행 개수 지정 grid-cols-n : 가로로 item들을 n개씩 배치합니다. grid-rows-n : 세로로 item들을 n개씩 배치합니다. 셀 병합 col-span-n : 요소가 가로 n개의 i...

Tailwind CSS Tailwind는 유틸리티 퍼스트 (Utility-First) CSS 프레임워크로, 빠르게 UI를 구성할 수 있도록 도와줍니다. 유틸리티 퍼스트 (Utility-First) 작고 단일한 역할을 가진 CSS 클래스들을 조합해서 스타일링하는 방식 기본 구조 Tailwind는 HTML 태그의 c...

Suspense Suspense는 비동기 컴포넌트가 로딩될 동안 대체 UI(fallback)를 지정하는 컴포넌트입니다. App Router에서는 주로 서버 컴포넌트가 데이터를 가져오는 동안 사용합니다. <Suspense fallback={<div>로딩 중...</div>}> <UserProfile /&gt...