본문 바로가기

💻 DEV/React-Query5

[ReactQuery] ReactQuery - 설정파일형식 접근 (요약)제각기 다른 React-query 설정파일을 다뤄보기위해 작성한다. 1. .mjs (eslint.config.mjs) 2. .json (eslint.json) 3. .cjs (.eslintrc.cjs)방법 1. .mjs (eslint.config.mjs)import { dirname } from "path";import { fileURLToPath } from "url";import { FlatCompat } from "@eslint/eslintrc";const __filename = fileURLToPath(import.meta.url);const __dirname = dirname(__filename);const compat = new FlatCompat({ baseDire.. 2025. 7. 17.

[ReactQuery] (4) ReactQuery - useIsFetching (feat. Nextjs) 접근 (요약)앱에서 isLoading 과 isFetching만을 사용해 컴포넌트마다 개별 Loading Indicator만을 활용했다면,useIsFetching에 대해서 알게 되고 더 큰 앱에 중앙 집중식 Loading Indicator를 사용해보기 위해 정리를 남긴다. 1. isLoading & isFetching & useIsFetching 2. useIsFetching 적용하기 3. 적용 TEST방법 1. isLoading & isFetching & useIsFetching# useIsFetching- 각 컴포넌트에 대해 "개별 로딩 인디케이터 (Loading Indicator)" 를 사용하는 대신- "중앙 집중식 로딩 인디케이터"를 사용하도록 앱을 업데이트 할 예정!>> useIsF.. 2025. 3. 19.

[ReactQuery] (1) ReactQuery 란 무엇인가? 접근 (요약)reactQuery의 개요를 작성한다. 1. Client State vs Server State 1. Client State - 웹 브라우저 세션과 관련된 모든 정보 의미 (단순히 사용자의 상태) (ex_ 사용자가 원하는 언어를 선택하거나 밝은/어두운 테마를 선택하는 등의 서버에서 일어나는 일과는 아무 관련이 없는 것)2. Server State- 서버 상태는 서버에 저장되지만 클라이언트에 표시하는 데 필요한 데이터 (ex_데이터베이스 등 블로그 게시물 데이터)- 데이터는 여러 클라이언트에 표시되어야 하기에 서버에 저장됨 2. React Query 특징 1. React Query는 클라이언트에서 서버 데이터 캐시를 관리 React Code ↔ React Query Cache ↔ S.. 2025. 3. 15.

[ReactQuery] (3) ReactQuery - customHooks (feat. Nextjs) 접근 (요약)reactQuery를 활용해 custom hooks을 작성한다. (queryKey와 queryFn) 1. queryKey Object (queryKey Namespace) 패턴으로 정리- queryKey : 데이터 요청을 식별하는 중요한 역할- 쿼리 키 네임스페이스 패턴을 활용한 효율적 데이터 관리- ./react-query/index.ts 2. hooks 폴더 내에 customHooks 작성 => useExampleQuery.ts- app/hooks/queries/useExampleQuery.ts- app/hooks/queries/mutation/useExampleMutation.ts 3. useExampleQuery.ts (CustomHooks 코드 형식)- Data Fet.. 2025. 3. 15.

[ReactQuery] (2) Nextjs 프로젝트에 ReactQuery 적용 접근 (요약)Next.js 를 통해 개발을 진행하는데, Web App의 서버 상태를 관리하는 라이브러리가 필수적이다.공식 웹사이트를 확인 해보면, npm 에서의 누적 다운로드 수가 18억에 육박하고 실시간으로 수치가 상승하는 것을 보기만 해도얼마나 핫한 기술인지 확인이 가능하다. 이를 프로젝트에 도입하여 치열하게 연구를 해보고자 한다.(예전에 개발 때에 드문드문 활용했던 것 그 이상으로 친숙해지고자 한다) 1. ReactQuery 설치- npm install @tanstack/react-query- npm install @tanstack/react-query-devtools 2. ESLint Plugin 설치- npm i -D @tanstack/eslint-plugin-query- 기타 설정 (... 2025. 3. 14.

이전 1 다음

티스토리툴바