diff --git a/README.md b/README.md
index 6524f29..25d5335 100644
--- a/README.md
+++ b/README.md
@@ -65,9 +65,10 @@
-## ๐ API Reference
+## ๐ ๊ธฐํ ์ฐธ๊ณ ๋ฌธ์
1. [QueryClient ์ฃผ์ ๋ด์ฉ ์ ๋ฆฌ ๋ฌธ์](https://github.com/ssi02014/react-query-tutorial/tree/master/document/queryClient.md)
+2. [๊ธฐ๋ณธ์ ์ธ React Query ์ํคํ
์ฒ ์ดํด๋ณด๊ธฐ: inside React Query](https://github.com/ssi02014/react-query-tutorial/tree/master/document/insideReactQuery.md)
diff --git a/README.v4.md b/README.v4.md
index 532d44e..eef183f 100644
--- a/README.v4.md
+++ b/README.v4.md
@@ -59,9 +59,10 @@
-## ๐ API Reference
+## ๐ ๊ธฐํ ์ฐธ๊ณ ๋ฌธ์
1. [QueryClient ์ฃผ์ ๋ด์ฉ ์ ๋ฆฌ ๋ฌธ์](https://github.com/ssi02014/react-query-tutorial/tree/master/document/queryClient.md)
+2. [๊ธฐ๋ณธ์ ์ธ React Query ์ํคํ
์ฒ ์ดํด๋ณด๊ธฐ: inside React Query](https://github.com/ssi02014/react-query-tutorial/tree/master/document/insideReactQuery.md)
diff --git a/document/insideReactQuery.md b/document/insideReactQuery.md
new file mode 100644
index 0000000..bee580b
--- /dev/null
+++ b/document/insideReactQuery.md
@@ -0,0 +1,159 @@
+# ๐ป Inside React Query
+
+- ํด๋น ๋ฌธ์๋ [tkdodo - inside-react-query](https://tkdodo.eu/blog/inside-react-query) ํฌ์คํ
์ ๋ฒ์ญํ๊ณ , ์ข ๋ ์ดํด์ ํ์ํ ๋ด์ฉ์ ์ถ๊ฐํ ๋ฌธ์์
๋๋ค.
+
+
+
+## Intro
+
+- React Query๊ฐ ์ด๋ป๊ฒ ๋ฆฌ๋ ๋๋งํด์ผ ๋๋ ์์ ์ ์ ์ ์๋ ๋ฐฉ๋ฒ๊ณผ ์ด๋ป๊ฒ ์ค๋ณต์ ์ ๊ฑฐํ๋ฉฐ, ์ด๋ป๊ฒ ํ๋ ์์ํฌ์ ๊ตฌ์ ๋ฐ์ง ์์๊น์?
+- ์ ์ง๋ฌธ๋ค์ ์ดํดํ๋ ค๋ฉด React Query์ ๋ด๋ถ๋ฅผ ๋ค์ฌ๋ค๋ณด๊ณ useQuery๋ฅผ ํธ์ถ ํ ๋ ์ค์ ๋ก ์ด๋ค ์ผ์ด ์ผ์ด๋๋์ง ๋ถ์ํด๋ด์ผ ํฉ๋๋ค.
+
+
+
+## QueryClient
+
+
+
+
+
+- ๋ชจ๋ ๊ฒ์ `QueryClient`์์ ์์๋ฉ๋๋ค.
+- QueryClient๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์์ํ ๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ ๋ค์ `QueryClientProvider`๋ฅผ ํตํด ๋ชจ๋ ๊ณณ์์ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ํด๋์ค์
๋๋ค.
+
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// โฌ๏ธ this creates the client
+const queryClient = new QueryClient();
+
+function App() {
+ return (
+ // โฌ๏ธ this distributes the client
+
+
+
+ );
+}
+```
+
+
+
+- QueryClientProvider๋ `React Context`๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์
์ ์ฒด์ QueryClient๋ฅผ ์ ๋ฌํฉ๋๋ค.
+- QueryClient๋ฅผ ํตํด ์์ฑ๋ queryClient ์ธ์คํด์ค๋ `์์ ์ ์ธ ๊ฐ`์ด๋ฉฐ, ํ ๋ฒ๋ง ์์ฑ๋๋ฏ๋ก React Context๋ก ์ฌ์ฉํ๊ธฐ์ ์ ์ ํฉ๋๋ค.
+ - ์ฑ์ด ๋ค์ ๋ฆฌ๋ ๋๋ง ๋๋ ๊ฒ์ด ์๋๋ผ ๋จ์ง useQueryClient๋ฅผ ํตํด queryClient๋ํ `์ก์ธ์ค ๊ถํ๋ง ๋ถ์ฌ`ํฉ๋๋ค.
+ - queryClient ์ธ์คํด์ค๊ฐ ์ค์๋ก ์์ฃผ ๋ค์ ์์ฑ๋์ง ์๋๋ก ์ฃผ์ํด์ผ๋ฉ๋๋ค.
+
+
+
+## A vessel that holds the cache(์บ์๋ฅผ ๋ด๋ ๊ทธ๋ฆ)
+
+- ์ ์๋ ค์ ธ ์์ง ์์ ์๋ ์์ง๋ง, QueryClient ์์ฒด๋ ์ค์ ๋ก ๋ง์ ์ผ์ ํ์ง๋ ์์ต๋๋ค.
+- QueryClient๊ฐ ์์ฑ๋ ๋ ์๋์ผ๋ก ์์ฑ๋๋ `QueryCache`์ `MutationCache`๋ฅผ ์ํ ์ปจํ
์ด๋์
๋๋ค. ๋ํ, ๋ชจ๋ `query`์ `mutation`์ ๋ํด ์ค์ ํ ์ ์๋ ๋ช ๊ฐ์ง ๊ธฐ๋ณธ๊ฐ์ ๋ณด์ ํ๊ณ ์์ผ๋ฉฐ, cache(์บ์)๋ก ์์
ํ๊ธฐ ์ํ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
+- ๋๋ถ๋ถ์ ์ํฉ์์๋ `cache์ ์ง์ ์ํธ ์์ฉํ์ง ์๊ณ QueryClient๋ฅผ ํตํด cache์ ์ก์ธ์คํฉ๋๋ค.`
+
+
+
+## QueryCache
+
+- queryClient๋ ์ฐ๋ฆฌ๊ฐ cache๋ก ์์
ํ ์ ์๊ฒ ํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด cache(QueryCache)๊ฐ ๋ฌด์์ผ๊น์?
+
+
+
+- ๊ฐ๋จํ๊ฒ, QueryCache๋ `in-memory` ๊ฐ์ฒด ์
๋๋ค. key๋ `์์ ์ ์ผ๋ก ์ง๋ ฌํ๋ ๋ฒ์ ์ queryKey`(queryKeyHash๋ผ๊ณ ํจ)์ด๊ณ , value๋ `Query Class์ ์ธ์คํด์ค`์
๋๋ค.
+- React Query๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ `in-memory`์๋ง ์ ์ฅํ๊ณ , ๋ค๋ฅธ ๊ณณ์๋ ์ ์ฅํ์ง ์์ต๋๋ค. ์ด ์ ์ ์ดํดํ๋ ๊ฒ์ด ๊ต์ฅํ ์ค์ํฉ๋๋ค.
+
+
+
+
+
+> ํด์: ์ข ๋ ๊ตฌ์ฒด์ ์ผ๋ก ๋ง์๋๋ฆฌ๊ฒ ์ต๋๋ค. ์บ์๋ ์ธ๋ฉ๋ชจ๋ฆฌ์ด๋ฉฐ ํญ์ ๋ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ปจํ
์คํธ์ ์๋ช
๋ด์๋ง ์กด์ฌํฉ๋๋ค. ์๋ก ๊ณ ์นจ, ํ๋ ํ์(pushState ๋๋ replaceState ํ์คํ ๋ฆฌ apis๋ฅผ ์ฌ์ฉํ์ง ์์) ๋๋ ํญ์ ๋ซ๊ฑฐ๋ ์ด๋ฉด ์บ์๊ฐ ์ ์ง๋์ง ์์ต๋๋ค.
+
+- https://github.com/TanStack/query/issues/1677#issuecomment-766137011
+- ์ข ๋ cache์ ๋ํด ์์ธํ ์ดํดํ๊ธฐ ์ํด ์ ์ด์์์ React Query์ ์ฐฝ์์ `tannerlinsley`๊ฐ ์ธ๊ธํ ๋ด์ฉ์ ํ์ธํด๋ด
์๋ค.
+- `tannerlinsley`๋ React Query์ cache๋ in-memory ๊ฐ์ฒด์ด๋ฉฐ, ๋ธ๋ผ์ฐ์ ํญ์ ๋ํ `JavaScript Context(์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ) ์๋ช
์ฃผ๊ธฐ ๋ด์์๋ง ์กด์ฌ`ํ๋ค๊ณ ์ธ๊ธํฉ๋๋ค.
+- ์ฆ, React Query ์บ์๋ ๋ธ๋ผ์ฐ์ ํญ ๊ฐ์ ๊ณต์ ๋์ง๋ ์๊ณ , ๋ธ๋ผ์ฐ์ ๋ฅผ ์๋ก๊ณ ์นจํ๋ฉด ์บ์๊ฐ ์ฌ๋ผ์ง๋๋ค. ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ๊ฐ์ ์ธ๋ถ ์ ์ฅ์์ ์บ์๋ฅผ ์ฐ๊ณ ์ถ๋ค๋ฉด [persisters](https://tanstack.com/query/v5/docs/framework/react/overview)๋ฅผ ์ดํด๋ณด๋๊ฒ ์ข์ต๋๋ค.
+
+
+
+### in-memory?
+
+- ์์์ ๋งํ๋ in-memory๋ `๋ธ๋ผ์ฐ์ ๋ฉ๋ชจ๋ฆฌ`๋ฅผ ์๋ฏธํฉ๋๋ค. ๊ฐ ํญ์ ๋ณ๋์ ํ๋ก์ธ์ค๋ก ๊ด๋ฆฌํ์ฌ ๋
๋ฆฝ๋ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ํ ๋น๋ฐ์ต๋๋ค.
+- ์ด๋ฅผ ํตํด ๊ฐ ๋ธ๋ผ์ฐ์ ํญ์ด ์์ ๋ง์ ๋
๋ฆฝ๋ JavaScript ์คํ ํ๊ฒฝ์ ๊ฐ์ง๊ณ ์์์ ์๋ฏธํฉ๋๋ค.
+ - ์ด๋ฌํ ํน์ง๋๋ฌธ์ ํ ํญ์์ ์์ฑ๋ ๋ณ์, ๊ฐ์ฒด ๋ฑ์ ๋ค๋ฅธ ํญ๊ณผ ๊ณต์ ๋์ง ์์ต๋๋ค.
+
+
+
+## Query
+
+
+
+- QueryCache์๋ Query๋ค์ด ์์ผ๋ฉฐ Query์์ ๋๋ถ๋ถ์ ๋ก์ง๋ค์ด ์คํ๋ฉ๋๋ค.
+- Query๋ Query์ ๋ํ `๋ชจ๋ ์ ๋ณด(๋ฐ์ดํฐ, ์ํ ํ๋ ๋๋ ๋ง์ง๋ง fetching์ด ๋ฐ์ํ์ ๋ ๊ฐ์ meta ์ ๋ณด)`๊ฐ ํฌํจ๋ ๋ฟ๋ง ์๋๋ผ query ํจ์๋ฅผ `์คํ`ํ๊ณ `์ฌ์๋`, `์ทจ์`, `์ค๋ณต ์ ๊ฑฐ` ๋ก์ง์ ํฌํจํฉ๋๋ค.
+- Query์๋ ๋ด๋ถ ์ํ ๋จธ์ ์ด ์กด์ฌํด์ ๋ถ๊ฐ๋ฅํ ์ํ์ ๋น ์ง์ง ์๋๋ก ํฉ๋๋ค.
+ - ์๋ฅผ ๋ค์ด, ์ด๋ฏธ fetching์ ์ํํ๋ ๋์ query ํจ์๊ฐ ํธ๋ฆฌ๊ฑฐ๋์ด์ผ ํ๋ ๊ฒฝ์ฐ ํด๋น fetching์์ ์ค๋ณต์ ์ ๊ฑฐํ ์ ์์ต๋๋ค.
+ - query๊ฐ ์ทจ์๋๋ฉด ์ด์ ์ํ๋ก ๋์๊ฐ๋๋ค.
+- ํต์ฌ ํฌ์ธํธ๋ **query๊ฐ ๋๊ฐ query data์ ๊ด์ฌ์ด ์๋ ํ์
ํ ์ ์๊ณ , ํด๋น ๊ด์ฐฐ์(Observers)๋ค์๊ฒ ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ ์๋ฆด ์ ์๋ค๋ ์ ์ด๋ค.**
+
+
+
+## QueryObserver
+
+
+
+- Observer๋ query์ query๋ฅผ ์ฌ์ฉํ๋ ค๋ ์ปดํฌ๋ํธ ์ฌ์ด์ `์ ์ฐฉ์ ์ญํ `์ ํฉ๋๋ค.
+- Observer๋ `useQuery๋ฅผ ํธ์ถํ ๋ ์์ฑ`๋๋ฉฐ, `ํญ์ ์ ํํ ํ๋์ query๋ฅผ ๊ตฌ๋
ํฉ๋๋ค.`
+ - ์ด๋ฌํ ํน์ง๋๋ฌธ์ ์ฐ๋ฆฌ๋ useQuery์ queryKey๋ฅผ ์ ๋ฌํด์ผ ํฉ๋๋ค.
+- Observer๋ ์กฐ๊ธ ๋ ๋ง์ ์์
์ ์ํํ๋ฉฐ, ๋๋ถ๋ถ์ ์ต์ ํ๊ฐ ์ด๋ฃจ์ด์ง๋ ๊ณณ์
๋๋ค.
+- Observer๋ ์ปดํฌ๋ํธ๊ฐ ํ์ฌ ์ฌ์ฉ ์ค์ธ `query์ ์์ฑ`์ ์๊ณ ์์ผ๋ฏ๋ก ๊ด๋ จ ์๋ ๋ณ๊ฒฝ ์ฌํญ์ ์๋ฆด ํ์๊ฐ ์์ต๋๋ค.
+ - ์๋ฅผ ๋ค์ด, `data ํ๋`๋ง ์ฌ์ฉ ํ ๊ฒฝ์ฐ background refetch์์ `isFetching`์ด ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ ์ด๋ ํด๋น ์ปดํฌ๋ํธ์์๋ ๊ด๋ จ์๋ ์์ฑ์ด๋ฏ๋ก ๊ตณ์ด ๋ฆฌ๋ ๋๋ง ํ ํ์๊ฐ ์์ต๋๋ค.
+- ๋ ๋์๊ฐ ๊ฐ Observer๋ `select`์ต์
์ ๊ฐ์ง ์ ์์ผ๋ฉฐ, ์ฌ๊ธฐ์์ data ํ๋์ ์ด๋ค ๋ถ๋ถ์ ๊ด์ฌ์๋์ง ๊ฒฐ์ ํ ์ ์์ต๋๋ค.
+ - ๊ด๋ จ๋ ๋ด์ฉ์ [tkdodo - #2: React Query Data Transformations](https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option) ์์ ์ฐธ๊ณ ํ์ค ์ ์์ต๋๋ค.
+- staleTime ๋๋ interval fetching๊ณผ ๊ฐ์ ๋๋ถ๋ถ์ ํ์ด๋จธ๋ `Observe Level`์์ ๋ฐ์๋ฉ๋๋ค.
+
+
+
+## Active and inactive Queries (ํ์ฑ ๋ฐ ๋นํ์ฑ ์ฟผ๋ฆฌ)
+
+- Observer๊ฐ ์๋ query๋ฅผ ๋ฐ๋ก inactive(๋นํ์ฑ) query๋ผ๊ณ ํฉ๋๋ค.
+- ์์ง ์บ์์ ์์ง๋ง ์ด๋ค ์ปดํฌ๋ํธ์์๋ ์ฌ์ฉ๋์ง ์์ต๋๋ค.
+- ์ด๋ฌํ inactive query๋ React Query Devtools๋ฅผ ์ดํด๋ณด๋ฉด ํ์์ผ๋ก ํ์๋ฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ผ์ชฝ์ ์ซ์๋ ํด๋น query๋ฅผ ๊ตฌ๋
ํ๊ณ ์๋ Observer์ ์๋ฅผ ๋ํ๋
๋๋ค.
+
+
+
+
+
+## The Complete Picture of React Query Architecture (๋ฆฌ์กํธ ์ฟผ๋ฆฌ ์ํคํ
์ฒ ์ ์ฒด ๊ทธ๋ฆผ)
+
+
+
+- ์ ๊ทธ๋ฆผ์ ์ข
ํฉํด๋ณด๋ฉด ๋๋ถ๋ถ์ ๋ก์ง์ด ํ๋ ์์ํฌ์ ๊ตฌ์ ๋ฐ์ง ์๋ `Query Core`์์ ์๋ค๋ ๊ฒ์ ์ ์ ์๋ค.
+ - `QueryClient`, `QueryCache`, `Query`, `QueryObserver`๊ฐ ๋ชจ๋ Query Core์ ์๋ค.
+- ๋ฐ๋ผ์, ์๋ก์ด ํ๋ ์์ํฌ์ฉ `Adapter(์ด๋ํฐ)`๋ฅผ ๋ง๋๋ ๊ฒ์ด ๋งค์ฐ ๊ฐ๋จํฉ๋๋ค.
+ - ๊ธฐ๋ณธ์ ์ผ๋ก Observer๋ฅผ ๋ง๋ค๊ณ , Observer๋ฅผ ๊ตฌ๋
ํ๊ณ , Observer๊ฐ ์๋ฆผ์ ๋ฐ์ผ๋ฉด ์ปดํฌ๋ํธ๋ฅผ ๋ค์ ๋ ๋๋งํ๋ ๋ฐฉ๋ฒ์ด ํ์ํฉ๋๋ค.
+ - [react](https://github.com/TanStack/query/blob/9d9aea5fb12eb89dec54c619845b3d226b53cf2b/packages/react-query/src/useBaseQuery.ts#L33-L115)์ [solid](https://github.com/TanStack/query/blob/9579dd893656d0a4a7ac0207a204d4b3735c329d/packages/solid-query/src/createBaseQuery.ts#L33-L131)์ฉ useQuery Adapter์๋ ๊ฐ๊ฐ ์ฝ 100์ค์ ์ฝ๋๋ง ์์ต๋๋ค.
+
+
+
+### Adapter(์ด๋ํฐ)?
+
+- Adapter๋ ๋ ๊ฐ์ง ๋ค๋ฅธ ์์คํ
๋๋ ์ฅ์น, ์ํํธ์จ์ด ์ปดํฌ๋ํธ ์ฌ์ด์์ ํธํ์ฑ์ ์ ๊ณตํ๊ฑฐ๋ ํต์ ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ์ฅ์น๋ ํ๋ก๊ทธ๋จ์ ์๋ฏธํฉ๋๋ค.
+
+
+
+## From a component perspective (์ปดํฌ๋ํธ ๊ด์ ์์)
+
+
+
+- ๋ง์ง๋ง์ผ๋ก ์ปดํฌ๋ํธ๋ถํฐ ์์ํ์ฌ ๋ค๋ฅธ ๊ฐ๋์์ ํ๋ฆ์ ์ดํด๋ด
์๋ค.
+ - ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋๋ฉด `useQuery`๋ฅผ ํธ์ถํ์ฌ `Observer`๋ฅผ ์์ฑํฉ๋๋ค.
+ - ์์ฑ๋ `Observer`๋ `QueryCache`์ ์๋ `Query`๋ฅผ ๊ตฌ๋
ํฉ๋๋ค.
+ - ์ด ๊ตฌ๋
์ `Query`๊ฐ ์์ง ์กด์ฌํ์ง ์๋ ๊ฒฝ์ฐ `Query ์์ฑ`์ ํธ๋ฆฌ๊ฑฐํ๊ฑฐ๋ ๋ฐ์ดํฐ๊ฐ ์ค๋๋ ๊ฒ์ผ๋ก ๊ฐ์ฃผ๋๋ ๊ฒฝ์ฐ `background refetch`๋ฅผ ํธ๋ฆฌ๊ฑฐ ํ ์ ์์ต๋๋ค.
+ - fetching์ ์์ํ๋ฉด `Query`์ ์ํ๊ฐ ๋ณ๊ฒฝ๋๊ธฐ ๋๋ฌธ์ `Observer`์๊ฒ ์ด์ ๋ํ ์ ๋ณด๊ฐ ์ ์ก๋ฉ๋๋ค.
+ - ๊ทธ๋ ๋ค๋ฉด `Observer`๋ ๋ช ๊ฐ์ง ์ต์ ํ๋ฅผ ์คํํ๊ณ , ์ ์ฌ์ ์ผ๋ก ์ปดํฌ๋ํธ์๊ฒ ์
๋ฐ์ดํธ์ ๋ํด ์๋ฆฐ๋ฉด ์ ์ํ๋ฅผ ๋ ๋๋ง ํ ์ ์์ต๋๋ค.
+ - `Query` ์คํ์ด ๋๋๋ฉด `Observer`์๊ฒ๋ ์ด ์ฌ์ค์ ์๋ฆฝ๋๋ค.
+- ์ ๋ด์ฉ์ ๋ง์ ์ ์ฌ์ ํ๋ฆ ์ค ํ๋์ ๋ถ๊ณผํ๋ค๋ ์ ์ ์ ์ํด์ผ ํฉ๋๋ค.
+- ๊ฐ์ฅ ์ด์์ ์ธ ๊ฒ์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ๋ ๋ ๋ฐ์ดํฐ๊ฐ ์ด๋ฏธ cache์ ์๋ ๊ฒ์ด ์ข์ต๋๋ค.
+ - [tkdodo - #17: Seeding the Query Cache](https://tkdodo.eu/blog/seeding-the-query-cache) ํด๋น ํฌ์คํ
์์ ๊ด๋ จ ๋ด์ฉ์ ํ์ธํ ์ ์์ต๋๋ค.
+- **๋ชจ๋ ํ๋ฆ์ ๋ํ ๋์ผํ ์ ์ ๋๋ถ๋ถ์ ๋ก์ง์ด React(or Vue, or Solid) ์ธ๋ถ์์ ๋ฐ์ํ๊ณ ์ํ ์์คํ
์ ๋ชจ๋ ์
๋ฐ์ดํธ๊ฐ Observer์๊ฒ ์ ๋ฌ๋๋ฉฐ, Observer๋ ์ปดํฌ๋ํธ์๋ ์๋ ค์ผ ํ๋์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ค๋ ๊ฒ์ด๋ค.**
+
+