diff --git a/log/data/poby/tanstackquery-cache-data.md b/log/data/poby/tanstackquery-cache-data.md
new file mode 100644
index 0000000..b0da91e
--- /dev/null
+++ b/log/data/poby/tanstackquery-cache-data.md
@@ -0,0 +1,136 @@
+# TanStack Query Stale Cache
+
+## 배경
+
+상세 정보에서 사용자의 데이터를 변경 또는 수정을 하고 다시 리스트로 돌아가면 리스트에서는 과거의 데이터가 남아 있는 경우가 있다. 이럴 때, 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 설정 외부 주입할 수 있게 작성을 했다. 이런 방법은 현재로는 매우 오버스팩일 수 있겠다는 생각을 했다.
+
+### createQueryClinet anti-pattern
+
+- 현재 createQueryClient는 micro 디렉토리 전략 방식에 사용하기 위해서 분리를 했으나 이로 인해서 발생하는 문제는 다음과 같다.
+ - 각 페이지간 서로의 캐시를 공유할 수 없게된다. 즉, Provider간 key 값이 달라지기 때문에 그렇다. 그로 인해서 메모리 낭비가 발생한다. 매번 QueryClinet가 여러개 새로 생성되기 때문이다.
+
+- 그렇다면 createQueryClinet는 어떻게 사용하면 좋을까?
+ - 테스트 환경에서 사용하면 좋다.
+ - 환경별(dev/prod)와 같이 분리된 공간에서 사용하면 좋다.
+ - 임베디드 위젯과 같이 독립된 곳에서 사용하면 좋다.
+ - Storybook과 같은 곳에서 사용하면 좋다.
+ - 즉, 모노레포와 같은 곳에서 사용, 각기 다른 도메인과 같은 곳에서 사용하면 좋다. 따라서 해상 createQueryClient는 common이나 shared같은 곳에서 관리하면서 사용하면 좋다.
+
+- 결론은 개별 쿼리 훅(ex.useUsers)에서 관리하면서 사용하는 것이 좋다.
+
+### 참고 문서
+
+- [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)
+- [Mutation 이후 전체 Query를 invalidation 하기](https://yogjin.tistory.com/130)
+
+---
+
+## Feedback 반영
+
+### Feedback List
+
+> 현재는 리스트 페이지와 상세 페이지가 cache로 인해서 동기화가 되고 있지 않은 상태이다. Vite + React
-
-
setCount((count) => count + 1)}>
- count is {count}
-
-
- Edit src/App.tsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
-
+ Loading...}>
+ {useRoutes(routes)}
+
)
}
-export default App
+export default App
\ 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
new file mode 100644
index 0000000..a304f0d
--- /dev/null
+++ b/log/workspace/react/ts/src/hooks/useUsers.ts
@@ -0,0 +1,58 @@
+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,
+ 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(){
+ return useQuery({
+ queryKey: userKeys.lists(),
+ queryFn: getUsers,
+ staleTime: 1000 * 60 * 5, // 5분 - stale cache 재현용
+ })
+}
+
+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()});
+ }
+ })
+}
+
+// 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()});
+ // 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번 호출
+ }
+ })
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/index.css b/log/workspace/react/ts/src/index.css
index 08a3ac9..4076b6b 100644
--- a/log/workspace/react/ts/src/index.css
+++ b/log/workspace/react/ts/src/index.css
@@ -12,57 +12,3 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/log/workspace/react/ts/src/main.tsx b/log/workspace/react/ts/src/main.tsx
index bef5202..766243a 100644
--- a/log/workspace/react/ts/src/main.tsx
+++ b/log/workspace/react/ts/src/main.tsx
@@ -1,10 +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/pages/index.tsx b/log/workspace/react/ts/src/pages/index.tsx
new file mode 100644
index 0000000..c3d9c4d
--- /dev/null
+++ b/log/workspace/react/ts/src/pages/index.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+ return Home
+}
\ No newline at end of file
diff --git a/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx b/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
new file mode 100644
index 0000000..a20beff
--- /dev/null
+++ b/log/workspace/react/ts/src/pages/tanstackquery/[id]/index.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react"
+import { useParams, useNavigate } from "react-router-dom"
+import { useUser, useUpdateUser } from "../../../hooks/useUsers"
+
+function Page() {
+ const { id } = useParams<{ id: string }>()
+ const navigate = useNavigate()
+ const userId = Number(id)
+
+ const { data: user, isLoading, error } = useUser(userId)
+ const updateUser = useUpdateUser()
+
+ const [name, setName] = useState("")
+
+ if (isLoading) return Loading...
+ if (error) return Error!
+ if (!user) return User not found
+
+ const handleUpdate = () => {
+ if (!name.trim()) return
+ updateUser.mutate({ id: userId, name })
+ }
+
+ return (
+
+
User Detail
+
+
ID: {user.id}
+
Name: {user.name}
+
Email: {user.email}
+
+
+
+
+
Update Name
+
setName(e.target.value)}
+ placeholder="New name"
+ />
+
+ {updateUser.isPending ? "Updating..." : "Update"}
+
+
+
+
+
navigate("/tanstackquery")}>
+ Back to List
+
+
Loading...
+ if (error) return Error!
+
+ return (
+
+
Users
+
+ {data?.map((user) => (
+
+
+ ))}
+
+
+
createUser.mutate({ name: 'poby', email: 'poby@test.com' })}
+ >
+ Add User
+
+
+}
+
+/**
+ * @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..e3f0e5b
--- /dev/null
+++ b/log/workspace/react/ts/src/services/axiosInstance.ts
@@ -0,0 +1,12 @@
+import axios from "axios";
+
+// TODO: AB테스트가 용이하게 함수로 수정 필요
+const API = 'https://698b4bb16c6f9ebe57bc3edb.mockapi.io/api/v1'
+
+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..3927d34
--- /dev/null
+++ b/log/workspace/react/ts/src/services/queryClient.ts
@@ -0,0 +1,55 @@
+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 여부
+ },
+}
+
+/**
+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{
+ 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/services/types/user.types.ts b/log/workspace/react/ts/src/services/types/user.types.ts
new file mode 100644
index 0000000..e69de29
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..273b6fe
--- /dev/null
+++ b/log/workspace/react/ts/src/services/users.axios.ts
@@ -0,0 +1,42 @@
+// TODO jsdoc annotation 추가 적으로 문서 필요
+import { axiosInstance } from "./axiosInstance";
+
+export interface User {
+ id: number
+ name: string
+ username: string
+ email: string
+ phone: string
+}
+
+/**
+ * @title Users list
+ */
+export async function getUsers(): Promise{
+ const { data } = await axiosInstance.get('/users');
+ return data;
+}
+
+/**
+ * @title User
+ */
+export async function getUser(id: number): Promise{
+ const { data } = await axiosInstance.get(`/users/${id}`);
+ return data
+}
+
+/**
+ * @title Create User
+ */
+export async function createUser(payload: { name: string; email: string }) {
+ const { data } = await axiosInstance.post('/users', payload)
+ return data
+}
+
+/**
+ * @title Update User
+ */
+export async function updateUser(id: number, payload: Partial) {
+ const { data } = await axiosInstance.put(`/users/${id}`, payload)
+ return data
+}
\ 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
diff --git a/log/workspace/react/ts/tsconfig.app.json b/log/workspace/react/ts/tsconfig.app.json
index a9b5a59..c1ad4eb 100644
--- a/log/workspace/react/ts/tsconfig.app.json
+++ b/log/workspace/react/ts/tsconfig.app.json
@@ -5,7 +5,7 @@
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
- "types": ["vite/client"],
+ "types": ["vite/client", "vite-plugin-pages/client-react"],
"skipLibCheck": true,
/* Bundler mode */
diff --git a/log/workspace/react/ts/vite.config.ts b/log/workspace/react/ts/vite.config.ts
index cef87a2..a55998b 100644
--- a/log/workspace/react/ts/vite.config.ts
+++ b/log/workspace/react/ts/vite.config.ts
@@ -1,6 +1,8 @@
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'
+import Pages from 'vite-plugin-pages'
+import path from 'node:path'
// https://vite.dev/config/
export default defineConfig({
@@ -10,7 +12,10 @@ export default defineConfig({
* 컴파일과 별개 스레드로 병렬 타입 체크 동작 단, 반영이 tsc 특성상 느릴 수 있음
* @remark `concurrently -n vite,tsc -c blue,yellow \"vite\" \"tsc --noEmit --watch\"` 동일한 역할, dependency 관리 시 scripts로 변경 필요
*/
- checker({ typescript: true })
+ checker({ typescript: true }),
+ Pages({
+ dirs: 'src/pages'
+ })
],
test: {
environment: 'jsdom',
@@ -20,5 +25,14 @@ export default defineConfig({
* @remark 추후 확장성을 고려해서 테스트 환경 설정을 전역으로 설정 필요시 `./src/tdd/__tests__/setup.ts` 가능
*/
setupFiles: ['./src/test/setup.ts']
+ },
+ envDir: path.resolve(__dirname, '../../../'),
+ server: {
+ proxy: {
+ '/api': {
+ target: 'https://reqres.in',
+ changeOrigin: true,
+ }
+ }
}
-})
+})
\ No newline at end of file