+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
new file mode 100644
index 0000000..8285ecf
--- /dev/null
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -0,0 +1,5 @@
+function Page(){
+ return
test
+}
+
+export default Page
\ No newline at end of file
From fc2eed4610d400180ab0e44b8b98594a46e0986c Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Sat, 7 Feb 2026 23:05:20 +0900
Subject: [PATCH 05/41] =?UTF-8?q?feat:=20AppRoutes=EC=97=90=EC=84=9C=20mic?=
=?UTF-8?q?ro=20provider=20=EC=84=A4=EC=A0=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 외부에서 QueryClientProvider 설정이 가능하게 creaateQueryClient 구현
---
log/workspace/react/ts/src/main.tsx | 5 ++-
.../react/ts/src/provider/QueryProviders.tsx | 28 ++++++++++++++++
.../react/ts/src/services/axiosInstance.ts | 11 +++++++
.../react/ts/src/services/queryClient.ts | 33 +++++++++++++++++++
log/workspace/react/ts/src/types.ts | 5 +++
5 files changed, 81 insertions(+), 1 deletion(-)
create mode 100644 log/workspace/react/ts/src/provider/QueryProviders.tsx
create mode 100644 log/workspace/react/ts/src/services/axiosInstance.ts
create mode 100644 log/workspace/react/ts/src/services/queryClient.ts
create mode 100644 log/workspace/react/ts/src/types.ts
diff --git a/log/workspace/react/ts/src/main.tsx b/log/workspace/react/ts/src/main.tsx
index ade9d64..766243a 100644
--- a/log/workspace/react/ts/src/main.tsx
+++ b/log/workspace/react/ts/src/main.tsx
@@ -1,13 +1,16 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
+import { QueryProviders } from './provider/QueryProviders.tsx'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
-
+
+
+ ,
)
diff --git a/log/workspace/react/ts/src/provider/QueryProviders.tsx b/log/workspace/react/ts/src/provider/QueryProviders.tsx
new file mode 100644
index 0000000..b1ecac4
--- /dev/null
+++ b/log/workspace/react/ts/src/provider/QueryProviders.tsx
@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { createQueryClient } from "../services/queryClient";
+import type { ReactNodeProps } from "../types";
+
+interface QueryProvidersProps extends ReactNodeProps {
+ queryClient?: ReturnType
+}
+
+/**
+ * @see {@link createQueryClient} 커스텀 QueryClient 생성
+ * @example 커스텀 QueryClient 주입
+ * const customClient = createQueryClient({ queries: { staleTime: 0 } })
+ *
+ *
+ *
+ */
+export function QueryProviders({children, queryClient}: QueryProvidersProps){
+ // useRef가 의미상 맞다 판단 하였으나, 19버전 이후부터는 useRef를 렌더 중 ref.currnet를 읽게 되면 error가 발생
+ const [client] = useState(() => queryClient ?? createQueryClient()); // 일반 함수 사용시 매번 새 인스턴스를 생성 따라 상태 값으로 동일 인스턴스 사용(팩토리 패턴)
+ return (
+
+ {children}
+
+
+ )
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/services/axiosInstance.ts b/log/workspace/react/ts/src/services/axiosInstance.ts
new file mode 100644
index 0000000..0d2baf0
--- /dev/null
+++ b/log/workspace/react/ts/src/services/axiosInstance.ts
@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const API = 'https://reqres.in/api'
+
+export const axiosInstance = axios.create({
+ baseURL: API,
+ timeout: 10000,
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+})
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/services/queryClient.ts b/log/workspace/react/ts/src/services/queryClient.ts
new file mode 100644
index 0000000..8ab01a1
--- /dev/null
+++ b/log/workspace/react/ts/src/services/queryClient.ts
@@ -0,0 +1,33 @@
+import { QueryClient } from "@tanstack/react-query";
+import type { QueryClientConfig } from "@tanstack/react-query";
+
+/**
+ * @TODO 각 페이지 설정을
+ */
+const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+
+/**
+ * @remark 외부에서 커스텀 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다.
+ */
+
+export function createQueryClient (options?: QueryClientConfig['defaultOptions']): QueryClient{
+ return new QueryClient({
+ defaultOptions: {
+ queries: {
+ ...DEFAULT_OPTIONS?.queries,
+ ...options?.queries, // override
+ },
+ mutations: {
+ ...DEFAULT_OPTIONS?.mutations,
+ ...options?.mutations, // undefined
+ }
+ },
+ })
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/types.ts b/log/workspace/react/ts/src/types.ts
new file mode 100644
index 0000000..0b9e5f0
--- /dev/null
+++ b/log/workspace/react/ts/src/types.ts
@@ -0,0 +1,5 @@
+import type { ReactNode } from "react"
+
+export interface ReactNodeProps {
+ children: ReactNode
+}
\ No newline at end of file
From 68b8a76411ee25710415860ef91e0e3cf0ee4480 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 00:35:08 +0900
Subject: [PATCH 06/41] =?UTF-8?q?feat:=20queryClient=20=EC=95=88=ED=8B=B0?=
=?UTF-8?q?=20=ED=8C=A8=ED=84=B4=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?=
=?UTF-8?q?=20=EB=B0=8F=20config=20=EA=B0=9D=EC=B2=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../react/ts/src/services/queryClient.ts | 26 +++++++++++++++++--
1 file changed, 24 insertions(+), 2 deletions(-)
diff --git a/log/workspace/react/ts/src/services/queryClient.ts b/log/workspace/react/ts/src/services/queryClient.ts
index 8ab01a1..3927d34 100644
--- a/log/workspace/react/ts/src/services/queryClient.ts
+++ b/log/workspace/react/ts/src/services/queryClient.ts
@@ -2,7 +2,7 @@ import { QueryClient } from "@tanstack/react-query";
import type { QueryClientConfig } from "@tanstack/react-query";
/**
- * @TODO 각 페이지 설정을
+ * @TODO 각 페이지 설정 기준으로 관리할 수 있게 분리 필요.
*/
const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
queries: {
@@ -14,7 +14,29 @@ const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
}
/**
- * @remark 외부에서 커스텀 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다.
+const TEST_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+
+const STORYBOOK_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+*/
+
+/**
+ * @description 대규모 도메인 관리라 가정하고 생성한 함수이다. 따라서, createQueryClient는 micro frontend와 같은 개념으로 접목해서 사용하면 좋겠단 생각을 했다.
+ * @deprecated 해당 함수를 각 페이지별로 override해서 관리해보려 했으나. 이는 캐시 분리, 데이터 공유 불가, 메모리 낭비와 같은 안티 패턴이다.
+ * @remark 추후 전역 관리로 이관 예정, 외부에서 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다. 더불어 페이지가 아닌 성격이 다른 도메인과 같은 곳에서 사용하면 효과적이다.
*/
export function createQueryClient (options?: QueryClientConfig['defaultOptions']): QueryClient{
From fce986909fbadc5678cc2b715ad83c64e459b725 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 00:36:27 +0900
Subject: [PATCH 07/41] =?UTF-8?q?feat:=20`reqres`=20user=20api=EC=97=90=20?=
=?UTF-8?q?=EC=82=AC=EC=9A=A9=EB=90=98=EB=8A=94=20service=20=ED=9E=98?=
=?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../react/ts/src/services/users.axios.ts | 44 +++++++++++++++++++
1 file changed, 44 insertions(+)
create mode 100644 log/workspace/react/ts/src/services/users.axios.ts
diff --git a/log/workspace/react/ts/src/services/users.axios.ts b/log/workspace/react/ts/src/services/users.axios.ts
new file mode 100644
index 0000000..f1eb2a2
--- /dev/null
+++ b/log/workspace/react/ts/src/services/users.axios.ts
@@ -0,0 +1,44 @@
+import { axiosInstance } from "./axiosInstance";
+
+export interface User {
+ id: number
+ email: string
+ firstName: string
+ lastName: string
+ avator: string
+}
+
+interface UsersResponse {
+ page: number
+ perPage: number
+ total: number
+ totalPages: number
+ data: User[]
+}
+
+interface UserResponse {
+ data: User
+}
+
+/** Users list */
+export async function getUsers(page = 1): Promise{
+ const { data } = await axiosInstance.get('/users', {
+ params: { page }
+ });
+
+ return data;
+}
+
+/** User */
+export async function getUser(id: number): Promise{
+ const { data } = await axiosInstance.get(`/users/${id}`);
+ return data.data
+}
+
+/** Create User
+ * @TODO : GenricTypes 추가 필요, payload: interface UserRequired 필요
+*/
+export async function createUser(payload: {name: string; job: string;}) {
+ const {data} = await axiosInstance.post('/users', payload)
+ return data
+}
\ No newline at end of file
From 8c0acf65fcb8ff4f3f938399b510440e45082a56 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 23:45:37 +0900
Subject: [PATCH 08/41] =?UTF-8?q?feat:=20user=EB=A5=BC=20=EC=A1=B0?=
=?UTF-8?q?=ED=9A=8C=ED=95=98=EA=B3=A0=20=EC=83=9D=EC=84=B1=ED=95=A0=20?=
=?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8A=94=20=ED=9B=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/workspace/react/ts/src/hooks/useUsers.ts | 38 ++++++++++++++++++++
1 file changed, 38 insertions(+)
create mode 100644 log/workspace/react/ts/src/hooks/useUsers.ts
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
new file mode 100644
index 0000000..cdac2a3
--- /dev/null
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -0,0 +1,38 @@
+// TODO: QueryKey를 관리 할 수 있는 디렉토리 필요
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { getUsers, getUser, createUser } from "../services/users.axios";
+
+export const userKeys = {
+ all: ['users'] as const,
+ lists: () => [...userKeys.all, 'list'] as const,
+ list: (page: number) => [...userKeys.lists(), page] as const,
+ details: () => [...userKeys.all, 'detail'] as const,
+ detail: (id: number) => [...userKeys.details(), id] as const,
+}
+
+export function useUsers(page = 1){
+ return useQuery({
+ queryKey: userKeys.list(page),
+ queryFn: () => getUsers(page),
+ })
+}
+
+export function useUser(id: number){
+ return useQuery({
+ queryKey: userKeys.detail(id),
+ queryFn: () => getUser(id),
+ enabled: !!id,
+ })
+}
+
+
+export function useCreateUser(){
+ const QueryClient = useQueryClient()
+
+ return useMutation({
+ mutationFn: createUser,
+ onSuccess: () => {
+ QueryClient.invalidateQueries({queryKey: userKeys.lists()})
+ }
+ })
+}
From ed3382eef6f62d7c9fe509b3ad23090d5df4a8ed Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 23:46:04 +0900
Subject: [PATCH 09/41] =?UTF-8?q?feat:=20=EA=B0=84=EB=8B=A8=ED=95=9C=20int?=
=?UTF-8?q?erface=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../ts/src/pages/tanstackquery/index.tsx | 25 ++++++++++++++++++-
1 file changed, 24 insertions(+), 1 deletion(-)
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
index 8285ecf..b5ea8ea 100644
--- a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -1,5 +1,28 @@
+import { useUsers, useCreateUser } from "../../hooks/useUsers"
+
function Page(){
- return
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
new file mode 100644
index 0000000..8285ecf
--- /dev/null
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -0,0 +1,5 @@
+function Page(){
+ return
test
+}
+
+export default Page
\ No newline at end of file
From f83869e91a9d36f6966298ac52c7858b7c0a6e41 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Sat, 7 Feb 2026 23:05:20 +0900
Subject: [PATCH 24/41] =?UTF-8?q?feat:=20AppRoutes=EC=97=90=EC=84=9C=20mic?=
=?UTF-8?q?ro=20provider=20=EC=84=A4=EC=A0=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 외부에서 QueryClientProvider 설정이 가능하게 creaateQueryClient 구현
---
log/workspace/react/ts/src/main.tsx | 5 ++-
.../react/ts/src/provider/QueryProviders.tsx | 28 ++++++++++++++++
.../react/ts/src/services/axiosInstance.ts | 11 +++++++
.../react/ts/src/services/queryClient.ts | 33 +++++++++++++++++++
log/workspace/react/ts/src/types.ts | 5 +++
5 files changed, 81 insertions(+), 1 deletion(-)
create mode 100644 log/workspace/react/ts/src/provider/QueryProviders.tsx
create mode 100644 log/workspace/react/ts/src/services/axiosInstance.ts
create mode 100644 log/workspace/react/ts/src/services/queryClient.ts
create mode 100644 log/workspace/react/ts/src/types.ts
diff --git a/log/workspace/react/ts/src/main.tsx b/log/workspace/react/ts/src/main.tsx
index ade9d64..766243a 100644
--- a/log/workspace/react/ts/src/main.tsx
+++ b/log/workspace/react/ts/src/main.tsx
@@ -1,13 +1,16 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
+import { QueryProviders } from './provider/QueryProviders.tsx'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
-
+
+
+ ,
)
diff --git a/log/workspace/react/ts/src/provider/QueryProviders.tsx b/log/workspace/react/ts/src/provider/QueryProviders.tsx
new file mode 100644
index 0000000..b1ecac4
--- /dev/null
+++ b/log/workspace/react/ts/src/provider/QueryProviders.tsx
@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { createQueryClient } from "../services/queryClient";
+import type { ReactNodeProps } from "../types";
+
+interface QueryProvidersProps extends ReactNodeProps {
+ queryClient?: ReturnType
+}
+
+/**
+ * @see {@link createQueryClient} 커스텀 QueryClient 생성
+ * @example 커스텀 QueryClient 주입
+ * const customClient = createQueryClient({ queries: { staleTime: 0 } })
+ *
+ *
+ *
+ */
+export function QueryProviders({children, queryClient}: QueryProvidersProps){
+ // useRef가 의미상 맞다 판단 하였으나, 19버전 이후부터는 useRef를 렌더 중 ref.currnet를 읽게 되면 error가 발생
+ const [client] = useState(() => queryClient ?? createQueryClient()); // 일반 함수 사용시 매번 새 인스턴스를 생성 따라 상태 값으로 동일 인스턴스 사용(팩토리 패턴)
+ return (
+
+ {children}
+
+
+ )
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/services/axiosInstance.ts b/log/workspace/react/ts/src/services/axiosInstance.ts
new file mode 100644
index 0000000..0d2baf0
--- /dev/null
+++ b/log/workspace/react/ts/src/services/axiosInstance.ts
@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const API = 'https://reqres.in/api'
+
+export const axiosInstance = axios.create({
+ baseURL: API,
+ timeout: 10000,
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+})
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/services/queryClient.ts b/log/workspace/react/ts/src/services/queryClient.ts
new file mode 100644
index 0000000..8ab01a1
--- /dev/null
+++ b/log/workspace/react/ts/src/services/queryClient.ts
@@ -0,0 +1,33 @@
+import { QueryClient } from "@tanstack/react-query";
+import type { QueryClientConfig } from "@tanstack/react-query";
+
+/**
+ * @TODO 각 페이지 설정을
+ */
+const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+
+/**
+ * @remark 외부에서 커스텀 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다.
+ */
+
+export function createQueryClient (options?: QueryClientConfig['defaultOptions']): QueryClient{
+ return new QueryClient({
+ defaultOptions: {
+ queries: {
+ ...DEFAULT_OPTIONS?.queries,
+ ...options?.queries, // override
+ },
+ mutations: {
+ ...DEFAULT_OPTIONS?.mutations,
+ ...options?.mutations, // undefined
+ }
+ },
+ })
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/types.ts b/log/workspace/react/ts/src/types.ts
new file mode 100644
index 0000000..0b9e5f0
--- /dev/null
+++ b/log/workspace/react/ts/src/types.ts
@@ -0,0 +1,5 @@
+import type { ReactNode } from "react"
+
+export interface ReactNodeProps {
+ children: ReactNode
+}
\ No newline at end of file
From 8ed24716f08f8d6d7dfaf8847cf86928a82eb17e Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 00:35:08 +0900
Subject: [PATCH 25/41] =?UTF-8?q?feat:=20queryClient=20=EC=95=88=ED=8B=B0?=
=?UTF-8?q?=20=ED=8C=A8=ED=84=B4=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?=
=?UTF-8?q?=20=EB=B0=8F=20config=20=EA=B0=9D=EC=B2=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../react/ts/src/services/queryClient.ts | 26 +++++++++++++++++--
1 file changed, 24 insertions(+), 2 deletions(-)
diff --git a/log/workspace/react/ts/src/services/queryClient.ts b/log/workspace/react/ts/src/services/queryClient.ts
index 8ab01a1..3927d34 100644
--- a/log/workspace/react/ts/src/services/queryClient.ts
+++ b/log/workspace/react/ts/src/services/queryClient.ts
@@ -2,7 +2,7 @@ import { QueryClient } from "@tanstack/react-query";
import type { QueryClientConfig } from "@tanstack/react-query";
/**
- * @TODO 각 페이지 설정을
+ * @TODO 각 페이지 설정 기준으로 관리할 수 있게 분리 필요.
*/
const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
queries: {
@@ -14,7 +14,29 @@ const DEFAULT_OPTIONS: QueryClientConfig['defaultOptions'] = {
}
/**
- * @remark 외부에서 커스텀 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다.
+const TEST_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+
+const STORYBOOK_OPTIONS: QueryClientConfig['defaultOptions'] = {
+ queries: {
+ staleTime: 1000 * 6 * 5, //5m
+ gcTime: 1000 * 60 * 10,
+ retry: 1,
+ refetchOnWindowFocus: false, // 탭 전환에 따른 refetch 여부
+ },
+}
+*/
+
+/**
+ * @description 대규모 도메인 관리라 가정하고 생성한 함수이다. 따라서, createQueryClient는 micro frontend와 같은 개념으로 접목해서 사용하면 좋겠단 생각을 했다.
+ * @deprecated 해당 함수를 각 페이지별로 override해서 관리해보려 했으나. 이는 캐시 분리, 데이터 공유 불가, 메모리 낭비와 같은 안티 패턴이다.
+ * @remark 추후 전역 관리로 이관 예정, 외부에서 주입을 할 떄 보다 좋은 방법이 있으면 좋겠다. 더불어 페이지가 아닌 성격이 다른 도메인과 같은 곳에서 사용하면 효과적이다.
*/
export function createQueryClient (options?: QueryClientConfig['defaultOptions']): QueryClient{
From 96106f7ef54adff23f7a3ec5f9951d32872898c7 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 00:36:27 +0900
Subject: [PATCH 26/41] =?UTF-8?q?feat:=20`reqres`=20user=20api=EC=97=90=20?=
=?UTF-8?q?=EC=82=AC=EC=9A=A9=EB=90=98=EB=8A=94=20service=20=ED=9E=98?=
=?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../react/ts/src/services/users.axios.ts | 44 +++++++++++++++++++
1 file changed, 44 insertions(+)
create mode 100644 log/workspace/react/ts/src/services/users.axios.ts
diff --git a/log/workspace/react/ts/src/services/users.axios.ts b/log/workspace/react/ts/src/services/users.axios.ts
new file mode 100644
index 0000000..f1eb2a2
--- /dev/null
+++ b/log/workspace/react/ts/src/services/users.axios.ts
@@ -0,0 +1,44 @@
+import { axiosInstance } from "./axiosInstance";
+
+export interface User {
+ id: number
+ email: string
+ firstName: string
+ lastName: string
+ avator: string
+}
+
+interface UsersResponse {
+ page: number
+ perPage: number
+ total: number
+ totalPages: number
+ data: User[]
+}
+
+interface UserResponse {
+ data: User
+}
+
+/** Users list */
+export async function getUsers(page = 1): Promise{
+ const { data } = await axiosInstance.get('/users', {
+ params: { page }
+ });
+
+ return data;
+}
+
+/** User */
+export async function getUser(id: number): Promise{
+ const { data } = await axiosInstance.get(`/users/${id}`);
+ return data.data
+}
+
+/** Create User
+ * @TODO : GenricTypes 추가 필요, payload: interface UserRequired 필요
+*/
+export async function createUser(payload: {name: string; job: string;}) {
+ const {data} = await axiosInstance.post('/users', payload)
+ return data
+}
\ No newline at end of file
From 28028180132ba03604f41f9c2b313a0701dcf2db Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 23:45:37 +0900
Subject: [PATCH 27/41] =?UTF-8?q?feat:=20user=EB=A5=BC=20=EC=A1=B0?=
=?UTF-8?q?=ED=9A=8C=ED=95=98=EA=B3=A0=20=EC=83=9D=EC=84=B1=ED=95=A0=20?=
=?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8A=94=20=ED=9B=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/workspace/react/ts/src/hooks/useUsers.ts | 38 ++++++++++++++++++++
1 file changed, 38 insertions(+)
create mode 100644 log/workspace/react/ts/src/hooks/useUsers.ts
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
new file mode 100644
index 0000000..cdac2a3
--- /dev/null
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -0,0 +1,38 @@
+// TODO: QueryKey를 관리 할 수 있는 디렉토리 필요
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { getUsers, getUser, createUser } from "../services/users.axios";
+
+export const userKeys = {
+ all: ['users'] as const,
+ lists: () => [...userKeys.all, 'list'] as const,
+ list: (page: number) => [...userKeys.lists(), page] as const,
+ details: () => [...userKeys.all, 'detail'] as const,
+ detail: (id: number) => [...userKeys.details(), id] as const,
+}
+
+export function useUsers(page = 1){
+ return useQuery({
+ queryKey: userKeys.list(page),
+ queryFn: () => getUsers(page),
+ })
+}
+
+export function useUser(id: number){
+ return useQuery({
+ queryKey: userKeys.detail(id),
+ queryFn: () => getUser(id),
+ enabled: !!id,
+ })
+}
+
+
+export function useCreateUser(){
+ const QueryClient = useQueryClient()
+
+ return useMutation({
+ mutationFn: createUser,
+ onSuccess: () => {
+ QueryClient.invalidateQueries({queryKey: userKeys.lists()})
+ }
+ })
+}
From cae8df594fdb386ba3b86c7a83b3c837c655506a Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Tue, 10 Feb 2026 23:46:04 +0900
Subject: [PATCH 28/41] =?UTF-8?q?feat:=20=EA=B0=84=EB=8B=A8=ED=95=9C=20int?=
=?UTF-8?q?erface=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../ts/src/pages/tanstackquery/index.tsx | 25 ++++++++++++++++++-
1 file changed, 24 insertions(+), 1 deletion(-)
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
index 8285ecf..b5ea8ea 100644
--- a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -1,5 +1,28 @@
+import { useUsers, useCreateUser } from "../../hooks/useUsers"
+
function Page(){
- return
+ )
+}
+
+export default Page
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
index 9024497..aef7b3f 100644
--- a/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
+++ b/log/workspace/react/ts/src/pages/tanstackquery/index.tsx
@@ -1,9 +1,12 @@
+import { Link } from "react-router-dom"
import { useUsers, useCreateUser } from "../../hooks/useUsers"
function Page(){
const { data, isLoading, error } = useUsers()
const createUser = useCreateUser()
+ console.log('[List] data:', data?.map(u => u.name))
+
if (isLoading) return
Loading...
if (error) return
Error!
@@ -12,7 +15,9 @@ function Page(){
Users
{data?.map((user) => (
-
{user.name}
+
+ {user.name}
+
))}
From a6bd7fab2509466cb5f6262a879ae6a7b5502196 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 00:09:14 +0900
Subject: [PATCH 34/41] =?UTF-8?q?docs:=20=EC=9E=91=EC=97=85=20=EC=A4=91=20?=
=?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=9C=20=ED=8A=B8=EB=9F=AC=EB=B8=94=20?=
=?UTF-8?q?=EC=8A=88=ED=8C=85=20=EB=AC=B8=EC=84=9C=ED=99=94=20=EC=9E=91?=
=?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 29 +++++++++++++++++++++++
1 file changed, 29 insertions(+)
create mode 100644 log/data/poby/tanstackquery-cache-data.md
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
new file mode 100644
index 0000000..b04cf76
--- /dev/null
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -0,0 +1,29 @@
+# TanStack Query Stale Cache
+
+## 배경
+
+## 원인
+
+## 해결 방안
+
+## 트러블슈팅
+
+현재 TQ provider의 query 설정 외부 주입할 수 있게 작성을 했다. 이런 방법은 현재로는 매우 오버스팩일 수 있겠다는 생각을 했다.
+
+### createQueryClinet anti-pattern
+
+- 현재 createQueryClient는 micro 디렉토리 전략 방식에 사용하기 위해서 분리를 했으나 이로 인해서 발생하는 문제는 다음과 같다.
+ - 각 페이지간 서로의 캐시를 공유할 수 없게된다. 즉, Provider간 key 값이 달라지기 때문에 그렇다. 그로 인해서 메모리 낭비가 발생한다. 매번 QueryClinet가 여러개 새로 생성되기 때문이다.
+
+- 그렇다면 createQueryClinet는 어떻게 사용하면 좋을까?
+ - 테스트 환경에서 사용하면 좋다.
+ - 환경별(dev/prod)와 같이 분리된 공간에서 사용하면 좋다.
+ - 임베디드 위젯과 같이 독립된 곳에서 사용하면 좋다.
+ - Storybook과 같은 곳에서 사용하면 좋다.
+ - 즉, 모노레포와 같은 곳에서 사용, 각기 다른 도메인과 같은 곳에서 사용하면 좋다. 따라서 해상 createQueryClient는 common이나 shared같은 곳에서 관리하면서 사용하면 좋다.
+
+- 결론은 개별 쿼리 훅(ex.useUsers)에서 관리하면서 사용하는 것이 좋다.
+
+### 참고 문서
+
+- [micro frontend](https://jobkaehenry.tistory.com/64)
From 977606e70a8007ce3327a6f8c2548f888970df0d Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 15:31:44 +0900
Subject: [PATCH 35/41] =?UTF-8?q?docs:=20stale=20cache=EC=9D=98=20?=
=?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EB=AC=B8=EC=A0=9C?=
=?UTF-8?q?=EC=A0=90=20=EB=AC=B8=EC=84=9C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 78 +++++++++++++++++++
log/workspace/react/ts/src/hooks/useUsers.ts | 8 +-
.../ts/src/pages/tanstackquery/[id]/index.tsx | 9 +--
.../react/ts/src/services/types/user.types.ts | 0
4 files changed, 83 insertions(+), 12 deletions(-)
create mode 100644 log/workspace/react/ts/src/services/types/user.types.ts
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index b04cf76..9a05199 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -2,10 +2,86 @@
## 배경
+상세 정보에서 사용자의 데이터를 변경 또는 수정을 하고 다시 리스트로 돌아가면 리스트에서는 과거의 데이터가 남아 있는 경우가 있다. 이럴 때, cache를 invalidateQueries를 사용해서 무력화 하는데, invalidateQueries가 동작하는 방식과 invalidateQueries 대시 다른 대안과 해결책을 모색하는 것이 목표이자, 배경이다.
+
+## 문제점
+
+1. 불필요한 네트워크 요청 - 이미 mutation 응답에 새 데이터가 있는데 또 fetch
+2. Stale cache 문제 - 상호작용 되어야하는 페이지간 querykey를 여러번 호출
+3. UX 저하 - 업데이트 후 깜빡임
+
## 원인
+> 해당 문서는 문제점 2번을 중점으로 바라본 문서이다.
+
+invalidateQueries를 사용하면 cache를 강제로 refetch를 한다고 이해를 했다. 하지만, invalidateQueries는 cache의 상태를 stale 상태로 변경을 하고 마운트 언마운트 상태에 따라 refetch의 수행이 이루어진다. invalidateQueries의 동작방식은 ~~(TQ는 cache를 신선도에 따라 상태를 분리한다.)~~ 현재 key의 cache가 fresh 하던 stale 하던 상관 없이 stale로 상태를 둔다. 그리고 현 페이지가 ~~(invalidateQueries를 호출하고)~~ 마운트가 된 상태라면 refetch가 된다. 정리하자면, 상세 페이지에서는 invalidateQueries로 stale mark를 찍고 마운트가 되면 refetch가 이루어진다. 단, 목록 페이지에서는 cache의 상태값을 변경하는 로직이 없기 때문에, 변경된 값이 반영되지 않고 이전 데이터가 보이는 것이다.
+
## 해결 방안
+> useUsers.ts의 [useUpdateUser](../../workspace/react/ts/src/hooks/useUsers.ts) 참고
+
+- setQueryData
+ - setQueryData를 사용해서 직접 특정 querykey를 업데이트, 리스트도 함께 업데이트 하는 방법이 있다.
+
+ ```ts
+ export function useUpdateUser() {
+ const queryClient = useQueryClient()
+
+ return useMutation({
+ mutationFn: ({ id, ...payload }) => updateUser(id, payload),
+ onSuccess: (newUser) => {
+ // 서버 응답으로 캐시 직접 업데이트
+ queryClient.setQueryData(
+ userKeys.detail(newUser.id),
+ newUser
+ )
+ // 리스트도 업데이트
+ queryClient.setQueryData(userKeys.lists(), (old) =>
+ old?.map(user => user.id === newUser.id ? newUser : user)
+ )
+ }
+ })
+ }
+ ```
+
+- Optimistic update
+ - 낙관적 업데이트 방법은 실문에서 자주 사용했다. 변경된 UI를 Network 요청 결과와는 무관하게 즉시 없데이트를 하고, onError와 같은 실패 시 롤백 할 수 있게 구현을 방법이다.
+
+ ```ts
+ useMutation({
+ mutationFn: updateUser,
+ onMutate: async (newData) => {
+ await queryClient.cancelQueries({ queryKey: userKeys.lists() })
+ const previous = queryClient.getQueryData(userKeys.lists())
+
+ // 즉시 UI 업데이트
+ queryClient.setQueryData(userKeys.lists(), (old) =>
+ old?.map(u => u.id === newData.id ? {...u, ...newData} : u)
+ )
+ return { previous }
+ },
+ onError: (err, newData, context) => {
+ // 실패 시 롤백
+ queryClient.setQueryData(userKeys.lists(), context.previous)
+ }
+ })
+ ```
+
+## 결론
+
+처음에는 InvalidateQueries가 좋지 않은 anti-pattern이거나 TQ에서 권장하지 않는 방식이라 생각했다. 하지만, 개념을 다시 정리하고 살펴보면 단순히 cache의 신선도를 stale로 변경하고 해당 query가 호출, 구독된 컴포넌트(QueryObserver)를 마운트 언마운트에 따라 refetch가 결정되는 방식이란 것을 이해하고 다시 코드 useUsers.ts의 useUpdateUser함수를 보면 lists도 다음과 같이 invalidateQueries를 하면 되는 것 아닌가 싶었다.
+
+```ts
+onSuccess: () => {
+ queryClient.invalidateQueries({queryKey: userKeys.details()})
+ queryClient.invalidateQueries({queryKey: userKeys.lists()})
+ }
+```
+
+즉, querykey가 체이닝되는 관계성만 명확하게 명시, 기획이 되어 있다면, InvalidateQueries가 성능을 저하하거나 좋지 않은 방식은 아니라 생각이 된다. 이외의 다른 관점으로 InvalidateQueries의 평가 문제 정의가 필요하다고 생각한다.
+
+---
+
## 트러블슈팅
현재 TQ provider의 query 설정 외부 주입할 수 있게 작성을 했다. 이런 방법은 현재로는 매우 오버스팩일 수 있겠다는 생각을 했다.
@@ -27,3 +103,5 @@
### 참고 문서
- [micro frontend](https://jobkaehenry.tistory.com/64)
+- [query-invalidation](https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation)
+- [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient)
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
index 69f9583..331de07 100644
--- a/log/workspace/react/ts/src/hooks/useUsers.ts
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -28,12 +28,12 @@ export function useUser(id: number){
export function useCreateUser(){
- const QueryClient = useQueryClient()
+ const queryClient = useQueryClient()
return useMutation({
mutationFn: createUser,
onSuccess: () => {
- QueryClient.invalidateQueries({queryKey: userKeys.lists()})
+ queryClient.invalidateQueries({queryKey: userKeys.lists()})
}
})
}
@@ -45,8 +45,8 @@ export function useUpdateUser(){
mutationFn: ({ id, ...payload }: { id: number } & Partial<{ name: string; email: string }>) =>
updateUser(id, payload),
onSuccess: () => {
- // 리스트 캐시만 invalidate - stale cache 문제 재현용
- queryClient.invalidateQueries({queryKey: userKeys.lists()})
+ // details 캐시만 invalidate - stale cache 문제 재현용
+ queryClient.invalidateQueries({queryKey: userKeys.details()})
}
})
}
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
index ad13968..a20beff 100644
--- a/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
+++ b/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
@@ -18,14 +18,7 @@ function Page() {
const handleUpdate = () => {
if (!name.trim()) return
- updateUser.mutate(
- { id: userId, name },
- {
- onSuccess: () => {
- navigate("/tanstackquery")
- }
- }
- )
+ updateUser.mutate({ id: userId, name })
}
return (
diff --git a/log/workspace/react/ts/src/services/types/user.types.ts b/log/workspace/react/ts/src/services/types/user.types.ts
new file mode 100644
index 0000000..e69de29
From 11012e5972f3e8a4bf29463b003c992b33798d9c Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 15:41:52 +0900
Subject: [PATCH 36/41] =?UTF-8?q?docs:=20reference=20=EB=A7=81=ED=81=AC=20?=
=?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index 9a05199..47c1f56 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -104,4 +104,5 @@ onSuccess: () => {
- [micro frontend](https://jobkaehenry.tistory.com/64)
- [query-invalidation](https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation)
-- [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient)
\ No newline at end of file
+- [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient)
+- [Mutation 이후 전체 Query를 invalidation 하기](https://yogjin.tistory.com/130)
From 5edd7cc66ec4ca92a91c0d857f58e7f9e715c376 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 18 Feb 2026 15:43:18 +0900
Subject: [PATCH 37/41] =?UTF-8?q?fix:=20=EB=AC=B8=EC=84=9C=20=EC=88=98?=
=?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index 47c1f56..8bb1527 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -69,7 +69,7 @@ invalidateQueries를 사용하면 cache를 강제로 refetch를 한다고 이해
## 결론
-처음에는 InvalidateQueries가 좋지 않은 anti-pattern이거나 TQ에서 권장하지 않는 방식이라 생각했다. 하지만, 개념을 다시 정리하고 살펴보면 단순히 cache의 신선도를 stale로 변경하고 해당 query가 호출, 구독된 컴포넌트(QueryObserver)를 마운트 언마운트에 따라 refetch가 결정되는 방식이란 것을 이해하고 다시 코드 useUsers.ts의 useUpdateUser함수를 보면 lists도 다음과 같이 invalidateQueries를 하면 되는 것 아닌가 싶었다.
+처음에는 InvalidateQueries가 좋지 않은 anti-pattern이거나 TQ에서 권장하지 않는 방식이라 생각했다. 개념을 다시 정리하고 살펴보면 단순히 cache의 신선도를 stale로 변경하고 해당 query가 호출, 구독된 컴포넌트(QueryObserver)를 마운트 언마운트에 따라 refetch가 결정되는 방식이란 것을 이해하고 다시 코드 useUsers.ts의 useUpdateUser함수를 보면 lists도 다음과 같이 invalidateQueries를 하면 되는 것 아닌가 싶었다.
```ts
onSuccess: () => {
From b09d65787b550bc980cd3a4c723125c6642da176 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Wed, 25 Feb 2026 23:27:03 +0900
Subject: [PATCH 38/41] =?UTF-8?q?docs:=20feedback=20=EB=AC=B8=EC=84=9C?=
=?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 17 +++++++++++++++++
log/workspace/react/ts/src/hooks/useUsers.ts | 3 +++
2 files changed, 20 insertions(+)
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index 8bb1527..6c1e287 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -106,3 +106,20 @@ onSuccess: () => {
- [query-invalidation](https://tanstack.com/query/v5/docs/framework/react/guides/query-invalidation)
- [QueryClient](https://tanstack.com/query/latest/docs/reference/QueryClient)
- [Mutation 이후 전체 Query를 invalidation 하기](https://yogjin.tistory.com/130)
+
+---
+
+## Feedback 반영
+
+### Feedback List
+
+> 현재는 리스트 페이지와 상세 페이지가 cache로 인해서 동기화가 되고 있지 않은 상태이다.
+> feedback
+> link: [inavlidate](https://github.com/4BFC/delllog/pull/2#discussion_r2830779295)
+> link: [fetchQuery](https://github.com/4BFC/delllog/pull/2#discussion_r2831265897)
+> link: [캐싱데이터 공유](https://github.com/4BFC/delllog/pull/2#discussion_r2830828635)
+
+- onSuccess에서 invalidate를 하지 않고 fetchQuery를 사용 후 update 반영이 잘되는지 문서화
+ - invalidate with cache-key 방법은 실무와 평소에 많이 해봤기 때문에 패스한다.
+ - fetchQuery를 깔끔하게 사용하려면 queryFn을 포함한 query options factory로 확장이 필요하다.
+- 캐싱데이터를 공유하면서 옵션만 따로 제공하면서, 하나의 QueryClient를 최상단에서 제공하고, 하위에서 옵션만 분리적으로 주입할 수 있는 방법 리서치
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
index 331de07..860ce52 100644
--- a/log/workspace/react/ts/src/hooks/useUsers.ts
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -2,6 +2,9 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { getUsers, getUser, createUser, updateUser } from "../services/users.axios";
+/**
+ * @TODO query-key-factory를 관리할 수있게 리팩토링
+ */
export const userKeys = {
all: ['users'] as const,
lists: () => [...userKeys.all, 'list'] as const,
From 399862625392b0f1983c988d4a5960625e3ee495 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Thu, 26 Feb 2026 00:08:00 +0900
Subject: [PATCH 39/41] =?UTF-8?q?fix:=20feedback=EC=9D=84=20=EB=B0=98?=
=?UTF-8?q?=EC=98=81=ED=95=9C=20useUsers=20=EA=B5=AC=ED=98=84=20=EB=B0=8F?=
=?UTF-8?q?=20Network=20=EC=88=9C=EC=84=9C=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 문서 초안 작성
- 리팩토링 앞으로 수정해야할 부분 주석으로 처리
---
log/data/poby/tanstackquery-cache-data.md | 8 ++++++++
log/workspace/react/ts/src/hooks/useUsers.ts | 9 ++++++---
.../react/ts/src/services/users.axios.ts | 17 +++++++++++++----
3 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index 6c1e287..0f76858 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -123,3 +123,11 @@ onSuccess: () => {
- invalidate with cache-key 방법은 실무와 평소에 많이 해봤기 때문에 패스한다.
- fetchQuery를 깔끔하게 사용하려면 queryFn을 포함한 query options factory로 확장이 필요하다.
- 캐싱데이터를 공유하면서 옵션만 따로 제공하면서, 하나의 QueryClient를 최상단에서 제공하고, 하위에서 옵션만 분리적으로 주입할 수 있는 방법 리서치
+
+### fetchQuery의 단점
+
+### 비동기 동작을 asyn await으로 Network 동기 순서 보장
+
+### F12 + `.d.ts` 를 활용해서 타입 확인하기
+
+- Extentions : [TypeScript Nightly](https://marketplace.cursorapi.com/items/?itemName=ms-vscode.vscode-typescript-next)
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
index 860ce52..af9be2c 100644
--- a/log/workspace/react/ts/src/hooks/useUsers.ts
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -1,4 +1,3 @@
-// TODO: QueryKey를 관리 할 수 있는 디렉토리 필요
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { getUsers, getUser, createUser, updateUser } from "../services/users.axios";
@@ -36,20 +35,24 @@ export function useCreateUser(){
return useMutation({
mutationFn: createUser,
onSuccess: () => {
- queryClient.invalidateQueries({queryKey: userKeys.lists()})
+ queryClient.invalidateQueries({queryKey: userKeys.lists()});
}
})
}
+// TODO: 반환 type 설정 필요
export function useUpdateUser(){
const queryClient = useQueryClient()
return useMutation({
mutationFn: ({ id, ...payload }: { id: number } & Partial<{ name: string; email: string }>) =>
updateUser(id, payload),
+ // TODO: 비동기를 async를 사용해서 동기화 해서 await으로 Network 순서를 보장할 수 있게 리팩토링 필요
onSuccess: () => {
// details 캐시만 invalidate - stale cache 문제 재현용
- queryClient.invalidateQueries({queryKey: userKeys.details()})
+ queryClient.invalidateQueries({queryKey: userKeys.details()});
+ // await queryClient.invalidateQueries({queryKey: userKeys.lists()}); // inavlidate로 cache fresh 상태로 변경
+ queryClient.fetchQuery({ queryKey: userKeys.lists(), queryFn: getUsers}); // fetchQuery를 사용하면 mutationFn이 PUT이 동작하고 queryFn 콜백 함수로 GET이 동작한다. 그리고 users까지 즉, api 3번 호출
}
})
}
diff --git a/log/workspace/react/ts/src/services/users.axios.ts b/log/workspace/react/ts/src/services/users.axios.ts
index 1000c87..273b6fe 100644
--- a/log/workspace/react/ts/src/services/users.axios.ts
+++ b/log/workspace/react/ts/src/services/users.axios.ts
@@ -1,3 +1,4 @@
+// TODO jsdoc annotation 추가 적으로 문서 필요
import { axiosInstance } from "./axiosInstance";
export interface User {
@@ -8,25 +9,33 @@ export interface User {
phone: string
}
-/** Users list */
+/**
+ * @title Users list
+ */
export async function getUsers(): Promise{
const { data } = await axiosInstance.get('/users');
return data;
}
-/** User */
+/**
+ * @title User
+ */
export async function getUser(id: number): Promise{
const { data } = await axiosInstance.get(`/users/${id}`);
return data
}
-/** Create User */
+/**
+ * @title Create User
+ */
export async function createUser(payload: { name: string; email: string }) {
const { data } = await axiosInstance.post('/users', payload)
return data
}
-/** Update User */
+/**
+ * @title Update User
+ */
export async function updateUser(id: number, payload: Partial) {
const { data } = await axiosInstance.put(`/users/${id}`, payload)
return data
From 2f1861630275f130e9b87823966dc30c7f5d9ff7 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Thu, 26 Feb 2026 20:28:47 +0900
Subject: [PATCH 40/41] =?UTF-8?q?docs:=20feedback=20=EB=B0=98=EC=98=81?=
=?UTF-8?q?=ED=95=9C=20=EB=82=B4=EC=9A=A9=EB=93=A4=EC=9D=84=20=EB=8B=B4?=
=?UTF-8?q?=EC=95=84=20=EB=AC=B8=EC=84=9C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/data/poby/tanstackquery-cache-data.md | 11 +++++++----
log/workspace/react/ts/src/hooks/useUsers.ts | 4 ++--
2 files changed, 9 insertions(+), 6 deletions(-)
diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
index aa48e32..b0da91e 100644
--- a/log/data/poby/tanstackquery-cache-data.md
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -124,10 +124,13 @@ onSuccess: () => {
- fetchQuery를 깔끔하게 사용하려면 queryFn을 포함한 query options factory로 확장이 필요하다.
- 캐싱데이터를 공유하면서 옵션만 따로 제공하면서, 하나의 QueryClient를 최상단에서 제공하고, 하위에서 옵션만 분리적으로 주입할 수 있는 방법 리서치
-### fetchQuery의 단점
+### fetchQuery의 필요성
-### 비동기 동작을 asyn await으로 Network 동기 순서 보장
+fetchQuery는 내가 특정 fetching 함수를 직접 호출해서 미리 fetch를 해두는 역할로, cache-key를 가지고 관리하는 것을 한단계 넘어서, 다음 동작, 상태를 업데이트 하기 위한 디테일함을 가지고 있다. invalidate같은 경우에는 cache의 신선도 상태를 변경시키고 필요한 곳에서 fetch가 이루어지면 fresh한 상태로 상태 값을 받을 수 있다. 따라서, 만약 fetching, Network 순서나 시나리오, 케이스가 성립된게 없다면, invalidate가 안정적이지만, 특정 시나리오나 케이스가 명확하다면 fetchQuery가 유용하다.
-### F12 + `.d.ts` 를 활용해서 타입 확인하기
+### 비동기 동작을 async await으로 Network 동기 순서 보장
-- Extentions : [TypeScript Nightly](https://marketplace.cursorapi.com/items/?itemName=ms-vscode.vscode-typescript-next)
\ No newline at end of file
+invalidateQueries, fetchQuery는 Promise이기 때문에 async/await을 사용해서 network의 순서를 관리하고 순서 보장을 해주면 더욱 디테일한 fetching 로직이 완성 될 것같다.
+> F12 + `.d.ts` 를 활용해서 타입 확인을 적극적으로 했다.
+
+- Extentions : [TypeScript Nightly](https://marketplace.cursorapi.com/items/?itemName=ms-vscode.vscode-typescript-next)
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
index 1b6dad3..e508db0 100644
--- a/log/workspace/react/ts/src/hooks/useUsers.ts
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -51,8 +51,8 @@ export function useUpdateUser(){
onSuccess: () => {
// details 캐시만 invalidate - stale cache 문제 재현용
queryClient.invalidateQueries({queryKey: userKeys.details()});
- // await queryClient.invalidateQueries({queryKey: userKeys.lists()}); // inavlidate로 cache fresh 상태로 변경
- queryClient.fetchQuery({ queryKey: userKeys.lists(), queryFn: getUsers}); // fetchQuery를 사용하면 mutationFn이 PUT이 동작하고 queryFn 콜백 함수로 GET이 동작한다. 그리고 users까지 즉, api 3번 호출
+ // awiat queryClient.invalidateQueries({queryKey: userKeys.lists()}); // inavlidate로 cache fresh 상태로 변경 - devtools로 확인
+ queryClient.fetchQuery({ queryKey: userKeys.lists(), queryFn: getUsers}); // fetchQuery를 사용하면 mutationFn이 PUT이 동작하고 queryFn 콜백 함수로 GET이 동작한다. 그리고 users까지 즉, 한번에 api 3번 호출
}
})
}
\ No newline at end of file
From 451e07221a2312318f3ce37ba39fb45d85e18304 Mon Sep 17 00:00:00 2001
From: 4BFC <4bee.code@gmail.com>
Date: Thu, 26 Feb 2026 20:58:51 +0900
Subject: [PATCH 41/41] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=20=EC=88=98?=
=?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
log/workspace/react/ts/src/hooks/useUsers.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/log/workspace/react/ts/src/hooks/useUsers.ts b/log/workspace/react/ts/src/hooks/useUsers.ts
index e508db0..a304f0d 100644
--- a/log/workspace/react/ts/src/hooks/useUsers.ts
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -51,7 +51,7 @@ export function useUpdateUser(){
onSuccess: () => {
// details 캐시만 invalidate - stale cache 문제 재현용
queryClient.invalidateQueries({queryKey: userKeys.details()});
- // awiat queryClient.invalidateQueries({queryKey: userKeys.lists()}); // inavlidate로 cache fresh 상태로 변경 - devtools로 확인
+ // await queryClient.invalidateQueries({queryKey: userKeys.lists()}); // inavlidate로 cache fresh 상태로 변경 - devtools로 확인
queryClient.fetchQuery({ queryKey: userKeys.lists(), queryFn: getUsers}); // fetchQuery를 사용하면 mutationFn이 PUT이 동작하고 queryFn 콜백 함수로 GET이 동작한다. 그리고 users까지 즉, 한번에 api 3번 호출
}
})