diff --git a/keyword/chapter07/keyword.md b/keyword/chapter07/keyword.md new file mode 100644 index 0000000..1c4612a --- /dev/null +++ b/keyword/chapter07/keyword.md @@ -0,0 +1,238 @@ +# ๐Ÿ“ย ํ•™์Šต ๋ชฉํ‘œ + +--- + +1. **`Tanstack Query` ์˜** `useQuery`**์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.** +2. **`Tanstack Query`**์˜ **`useInfiniteQuery`**์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. +3. **`InfiniteScroll`**์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. +4. **`Pagination`**์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. + +# โš ๏ธย ย ์Šคํ„ฐ๋”” ์ง„ํ–‰ ๋ฐฉ๋ฒ• + +--- + +1. ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ์ „, ์›Œํฌ๋ถ ๋‚ด์šฉ๋“ค์„ ๋ชจ๋‘ ์ฑ„์šฐ๊ณ  ์Šคํ„ฐ๋””์—์„œ ์„œ๋กœ ๋ชจ๋ฅด๋Š” ๋‚ด์šฉ๋“ค์„ ์Šคํ„ฐ๋””์›๊ณผ ํ•จ๊ป˜ ๊ณต์œ ํ•ด ์ฃผ์„ธ์š”. +2. ์‹ค์Šต๊ณผ ๋ฏธ์…˜์€ ์›Œํฌ๋ถ ๋‚ด์šฉ๋“ค์„ ๋ชจ๋‘ ์™„๋ฃŒํ•œ ํ›„, ์Šคํ„ฐ๋”” ์ „์— ์ง„ํ–‰ํ•ด ์˜ค์„ธ์š”! + - 1์ฃผ ์ฐจ ์Šคํ„ฐ๋”” ์ด์ „์— 1์ฃผ ์ฐจ ์›Œํฌ๋ถ์„ ์™„์„ฑํ•œ ํ›„ ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ•ด ์ฃผ์„ธ์š”. +3. ์Šคํ„ฐ๋”” ์‹œ๊ฐ„์—๋Š” ๊ฐ์ž ํ•ด ์˜จ ๋ฏธ์…˜๋“ค์„ ๊ณต์œ ํ•˜๊ณ , ์•„๋ž˜์˜ ๊ณผ์ •์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. + 1. ์Šคํ„ฐ๋””์›๊ณผ ํ•จ๊ป˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์ง„ํ–‰. + 2. ์ฝ”๋“œ ๋ฆฌ๋ทฐ ์ดํ›„, ๋ณธ์ธ์˜ ์ฝ”๋“œ์˜ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ๋ฆฌํŒฉํ† ๋ง ์ง„ํ–‰. + 3. ํŒ€์›๋“ค๊ณผ, ์กฐ๊ธˆ ๋” ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐœ์„ ์ ์ด ์žˆ์„์ง€ ๊ณ ๋ฏผ ํ›„, ๋ฆฌํŒฉํ† ๋ง ์ง„ํ–‰. + 4. ๊ฐ์ž ๋ฏธ์…˜์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํ•ด๊ฒฐํ•˜์ง€ ๋ชปํ•œ ์ด์Šˆ๋ฅผ ๊ณต์œ  ํ›„, ํ•ด๋‹น ์ด์Šˆ๋ฅผ ๋„์›€๋ฐ›์•„ ํ•ด๊ฒฐ. +4. ๋งค์ฃผ ์ฃผ์–ด์ง„ ๋ฏธ์…˜์„ ์„ฑ์‹คํ•˜๊ฒŒ ์ œ์ถœํ•ฉ๋‹ˆ๋‹ค. +5. ๐Ÿ ย ์ด๋ชจ์ง€๊ฐ€ ๋ถ™์–ด์žˆ๋Š” ๊ณณ์€, ์ง์ ‘ ์—ฌ๋Ÿฌ๋ถ„๋“ค์ด ์ฑ„์›Œ ๋„ฃ์œผ์…”์•ผ ํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ๊ผญ Google์„ ํ†ตํ•œ ๊ฒ€์ƒ‰์„ ํ•˜์‹œ๊ณ , VSCode๋ฅผ ํ™œ์šฉํ•˜์—ฌ, ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ๋ˆˆ์œผ๋กœ ๋ณด์‹œ๋ฉด์„œ ์ •๋ฆฌํ•ด ์ฃผ์„ธ์š”! + +# ๐Ÿ“ธย ์ž ๊น ! ์Šคํ„ฐ๋”” ์ธ์ฆ์ƒท์€ ์ฐ์œผ์…จ๋‚˜์š”?๐Ÿ“ธ + +--- + +* ์Šคํ„ฐ๋””๋ฆฌ๋”๊ป˜์„œ ๋Œ€ํ‘œ๋กœ ๋งค ์ฃผ์ฐจ๋งˆ๋‹ค ํ•œ ์žฅ ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค!๐Ÿ™†๐Ÿ’— + (์‚ฌ์ง„์„ ์ €์žฅํ•ด์„œ ์ด๋ฏธ์ง€ ์ž„๋ฒ ๋“œ๋ฅผ ํ•˜์…”๋„ ์ข‹๊ณ , ๋ณต์‚ฌ+๋ถ™์—ฌ๋„ฃ๊ธฐํ•ด์„œ ๋„ฃ์–ด์ฃผ์…”๋„ ์ข‹์Šต๋‹ˆ๋‹ค!) + +[]() + +# ๐ŸŽฏย ํ•ต์‹ฌ ํ‚ค์›Œ๋“œ + +--- + + + +### ํ‚ค์›Œ๋“œ ์ •๋ฆฌ ๐Ÿ  + +- Tanstack-Query ๐Ÿ  + - Tanstack-Query ์ดˆ๊ธฐ ์„ธํŒ… ๋ฐฉ๋ฒ• + + Tanstack Query๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด, ํ”„๋กœ์ ํŠธ์— `@tanstack/react-query`๋ฅผ ์„ค์น˜ํ•˜๊ณ  `QueryClient`์™€ `QueryClientProvider`๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. `QueryClientProvider`๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐ์‹ธ๋ฉด Tanstack Query ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + + - Query-DevTools? + + Tanstack Query์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ฐœ๋ฐœ ๋„๊ตฌ๋กœ, ์ฟผ๋ฆฌ ์ƒํƒœ์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ํ™•์ธํ•˜๊ณ  ๋””๋ฒ„๊น…ํ•˜๋Š” ๋ฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. `@tanstack/react-query-devtools`๋ฅผ ์„ค์น˜ํ•˜๊ณ  `ReactQueryDevtools` ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ถ”๊ฐ€ํ•ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. + + - useQuery + + ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ React ์ปดํฌ๋„ŒํŠธ์— ์‚ฌ์šฉํ•  ๋•Œ `useQuery` ํ›…์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ์™€ ๋กœ๋”ฉ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ํ›…์œผ๋กœ, `queryKey`์™€ `fetching function`์„ ์ธ์ž๋กœ ๋ฐ›์•„ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค. + + - useInfiniteQuery + + ํŽ˜์ด์ง€๋„ค์ด์…˜ ์—†์ด ์Šคํฌ๋กค์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ณ„์† ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒฝ์šฐ์— ์‚ฌ์šฉํ•˜๋Š” ํ›…์ž…๋‹ˆ๋‹ค. ์Šคํฌ๋กค์ด ๋ฐ”๋‹ฅ์— ๋„๋‹ฌํ•  ๋•Œ๋งˆ๋‹ค `fetchNextPage` ํ•จ์ˆ˜๋กœ ๋‹ค์Œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. + + - queryKey + + ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹ฑํ•˜๊ณ  ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ณ ์œ  ํ‚ค์ž…๋‹ˆ๋‹ค. ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ์ฟผ๋ฆฌ๋ฅผ ์‹๋ณ„ํ•ฉ๋‹ˆ๋‹ค. + +- Pagination ๐Ÿ  + - Pagination์€ ๋ฌด์—‡์ธ๊ฐ€์š”? + + ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ์ผ์ • ๊ฐœ์ˆ˜์”ฉ ๋‚˜๋ˆ ์„œ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ๋ฒ„ํŠผ์„ ํ†ตํ•ด ์ด์ „ ํŽ˜์ด์ง€๋‚˜ ๋‹ค์Œ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ์–ด ํ•œ ๋ฒˆ์— ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜์ง€ ์•Š์•„๋„ ๋ฉ๋‹ˆ๋‹ค. + + - Pagination์„ ์–ด๋– ํ•œ ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? + + ํด๋ผ์ด์–ธํŠธ ์ธก ํŽ˜์ด์ง€๋„ค์ด์…˜๊ณผ ์„œ๋ฒ„ ์ธก ํŽ˜์ด์ง€๋„ค์ด์…˜์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํด๋ผ์ด์–ธํŠธ ์ธก์€ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€ ํ™”๋ฉด์—์„œ ๋‚˜๋ˆ  ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ์‹์ด๊ณ , ์„œ๋ฒ„ ์ธก์€ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ๋‚˜ ์˜คํ”„์…‹ ๊ฐ’์„ ์„œ๋ฒ„์— ์ „๋‹ฌํ•ด ํŠน์ • ํŽ˜์ด์ง€ ๋ฐ์ดํ„ฐ๋งŒ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. + + - Pagination์˜ ์žฅ์ ๊ณผ ๋‹จ์ ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + - **์žฅ์ **: ํ•œ ๋ฒˆ์— ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์ ์–ด์ ธ ์„ฑ๋Šฅ์ด ๊ฐœ์„ ๋˜๋ฉฐ, ์‚ฌ์šฉ์ž๊ฐ€ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ์— ๋น ๋ฅด๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + - **๋‹จ์ **: ํŽ˜์ด์ง€ ์ด๋™ ์‹œ๋งˆ๋‹ค ์„œ๋ฒ„ ์š”์ฒญ์ด ๋ฐœ์ƒํ•ด ๋กœ๋“œ ์‹œ๊ฐ„์ด ํ•„์š”ํ•˜๋ฉฐ, ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ๋‹ค์†Œ ๋‹จ์ ˆ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. +- Infinite Scroll ๐Ÿ  + - Intersection Observer๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”? + + DOM ์š”์†Œ์˜ ๊ฐ€์‹œ์„ฑ์„ ์ถ”์ ํ•˜์—ฌ, ์š”์†Œ๊ฐ€ ํŠน์ • ์˜์—ญ์— ์ง„์ž…ํ•˜๊ฑฐ๋‚˜ ๋ฒ—์–ด๋‚  ๋•Œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” API์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ ๋ฌดํ•œ ์Šคํฌ๋กค์—์„œ ๋‹ค์Œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์‹œ์  ํŒ๋‹จ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. + + - Infinite Scroll์€ ๋ฌด์—‡์ผ๊นŒ์š”? + + ์Šคํฌ๋กค์„ ํ†ตํ•ด ๋๊นŒ์ง€ ์ด๋™ํ•˜๋ฉด ์ž๋™์œผ๋กœ ์ถ”๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ๊ฐ€ ๊ณ„์† ์ถ”๊ฐ€๋˜๋ฏ€๋กœ ํŽ˜์ด์ง€ ์ด๋™์ด ์—†๊ณ , ๊ธด ๋ชฉ๋ก์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + + - Inifinite Scroll์€ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ• ๊นŒ์š”? + + Intersection Observer๋ฅผ ์‚ฌ์šฉํ•ด ํŠน์ • ์š”์†Œ๊ฐ€ ๋ทฐํฌํŠธ์— ๋“ค์–ด์˜ค๋ฉด ์„œ๋ฒ„์— ์š”์ฒญ์„ ๋ณด๋‚ด ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + + - Infinite Scroll์˜ ์žฅ์ ๊ณผ ๋‹จ์ ์— ๋Œ€ํ•ด ์ •๋ฆฌํ•ด์ฃผ์„ธ์š”. + - **์žฅ์ **: ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ๋งค๋„๋Ÿฌ์›Œ์„œ ์Šคํฌ๋กคํ•˜๋ฉด์„œ ๋Š๊น€ ์—†์ด ์ฝ˜ํ…์ธ ๋ฅผ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + - **๋‹จ์ **: ํŠน์ • ์œ„์น˜๋กœ ๋Œ์•„๊ฐ€๊ฑฐ๋‚˜, ํŽ˜์ด์ง€๋ฅผ ๋‚˜๋ˆ„์–ด ์ ‘๊ทผํ•˜๊ธฐ ์–ด๋ ต๊ณ , ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋ฉด ์„ฑ๋Šฅ์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + +# ๐Ÿ”ฅย ๋ฏธ์…˜ 1. Project์— useQuery ๋ฅผ ํ™œ์šฉํ•˜๊ธฐ. + + + +- [ ] ์ง€๊ธˆ๊นŒ์ง€, **`custom-hook`**์„ ํ™œ์šฉํ•˜์—ฌ, ๋ถˆ๋Ÿฌ์˜จ `get ์š”์ฒญ`์˜ ๋ฐ์ดํ„ฐ๋“ค์„ ๋จผ์ € **`useQuery`** ๋ฅผ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ํ˜ธ์ถœ๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ์„ธ์š”. + - [ ] now-playing ํŽ˜์ด์ง€ + - [ ] popular ํŽ˜์ด์ง€ + - [ ] up-coming ํŽ˜์ด์ง€ + - [ ] top-rated ํŽ˜์ด์ง€ + - [ ] ๋‚ด ์ •๋ณด๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” API + - [ ] ์˜ํ™” ์ƒ์„ธ ํŽ˜์ด์ง€ + - [ ] ์˜ํ™” ์ƒ์„ธ ํŽ˜์ด์ง€ Credit +- [ ] ๋‹จ, **`queryKey`**๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค์ •ํ•ด์ฃผ์„ธ์š”. +- [ ] **`useQuery`**์˜ ๋ฐ˜ํ™˜ ๊ฐ’์„ ํ™œ์šฉํ•˜์—ฌ, **`loading`**๊ณผ **`error`** ์ฒ˜๋ฆฌ๋ฅผ ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”. + - [ ] ๋กœ๋”ฉ ์ฒ˜๋ฆฌ๋Š” Skeleton UI๋ฅผ ํ™œ์šฉํ•ด์ฃผ์„ธ์š”. + +### ๐Ÿ”ฅย ๋ฏธ์…˜ 1. ์ œ์ถœ (useQuery) + +- ๊นƒํ—ˆ๋ธŒ ์ฃผ์†Œ +- ์‹คํ–‰ ์˜์ƒ + +# ๐Ÿ”ฅย ๋ฏธ์…˜ 2. Project์— useInfiniteQuery ๋ฅผ ํ™œ์šฉํ•˜๊ธฐ. + +[แ„’แ…ชแ„†แ…งแ†ซ แ„€แ…ตแ„…แ…ฉแ†จ 2024-09-30 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 1.36.38.mov](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/62b28844-27af-428a-abe2-e3d62287fcb9/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-09-30_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_1.36.38.mov) + +- [ ] ์ง€๊ธˆ๊นŒ์ง€, ๋ฏธ์…˜ 1์—์„œ **`useQuery`**๋ฅผ ํ™œ์šฉํ•˜์—ฌ, ๋ถˆ๋Ÿฌ์˜จ `get ์š”์ฒญ`์˜ ๋ฐ์ดํ„ฐ๋“ค์„ ๋จผ์ € **`useInfiniteQuery`** ๋ฅผ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ํ˜ธ์ถœ๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ์„ธ์š”. + - [ ] now-playing ํŽ˜์ด์ง€ + - [ ] popular ํŽ˜์ด์ง€ + - [ ] up-coming ํŽ˜์ด์ง€ + - [ ] top-rated ํŽ˜์ด์ง€ +- [ ] ๋‹จ, **`queryKey`**๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค์ •ํ•ด์ฃผ์„ธ์š”. +- [ ] **`useQuery`**์˜ ๋ฐ˜ํ™˜ ๊ฐ’์„ ํ™œ์šฉํ•˜์—ฌ, **`loading`**๊ณผ **`error`** ์ฒ˜๋ฆฌ๋ฅผ ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”. + - [ ] ๋กœ๋”ฉ ์ฒ˜๋ฆฌ๋Š” `Skeleton UI`๋ฅผ ํ™œ์šฉํ•ด์ฃผ์„ธ์š”. + - [ ] `Loading Spinner` ๋˜ํ•œ ํ™œ์šฉํ•ด์ฃผ์„ธ์š”. + +### ๐Ÿ”ฅย ๋ฏธ์…˜ 2. ์ œ์ถœ (useInfiniteQuery) + +- ๊นƒํ—ˆ๋ธŒ ์ฃผ์†Œ +- ์‹คํ–‰ ์˜์ƒ + +### โš ๏ธย ํ˜ผ์ž ๋ฐ˜๋“œ์‹œ ๋จผ์ €, ํ•ด๋ณด์‹  ํ›„ ์•„๋ž˜ ์˜์ƒ์„ ํ™œ์šฉํ•ด์ฃผ์„ธ์š”! โš ๏ธ + +https://www.youtube.com/watch?v=77TLFKauKTY + +https://www.youtube.com/watch?v=77TLFKauKTY + +# ๐Ÿ”ฅย ๋ฏธ์…˜ 3. Pagination ๊ธฐ๋Šฅ ๊ตฌํ˜„. + + + +[แ„’แ…ชแ„†แ…งแ†ซ แ„€แ…ตแ„…แ…ฉแ†จ 2024-09-30 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 2.07.09.mov](https://prod-files-secure.s3.us-west-2.amazonaws.com/f1912130-0409-4e90-a90f-6091ae253e73/e259bf30-211a-4bae-94ce-cf56c973ffa3/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2024-09-30_%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB_2.07.09.mov) + +https://tanstack.com/query/v4/docs/framework/react/guides/paginated-queries + +์œ„ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ, **`Pagination`**์„ ๊ตฌํ˜„ํ•ด์ฃผ์„ธ์š”. + +- [ ] ์œ„์˜ ์˜์ƒ๊ณผ ๋™์ผํ•˜๊ฒŒ, **`Pagination`**์„ ๊ตฌํ˜„ํ•ด์ฃผ์„ธ์š”. +- [ ] **`0 page`**๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, ์‚ฌ์šฉ์ž๊ฐ€ **`0 page`**๋ฅผ ๊ฐ€์ง€ ๋ชปํ•˜๊ฒŒ, Button์„ **`disabled`** ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ์„ธ์š”. + - [ ] ์Šคํƒ€์ผ๋ง ๋˜ํ•œ, ๊ฐ™์ด ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”. +- [ ] ๋‹จ, **`queryKey`**๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค์ •ํ•ด์ฃผ์„ธ์š”. + + + +https://www.youtube.com/watch?v=HlNwcVYZpwk + +https://www.youtube.com/watch?v=HlNwcVYZpwk + +### ๐Ÿ”ฅย ๋ฏธ์…˜ 3. ์ œ์ถœ (Pagination) + +- ๊นƒํ—ˆ๋ธŒ ์ฃผ์†Œ +- ์‹คํ–‰ ์˜์ƒ + +# โšก ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ… + +--- + + + +- โšก์ด์Šˆ No.1 (์˜ˆ์‹œ, ์„œ์‹๋งŒ ๋ณต์‚ฌํ•˜์‹œ๊ณ  ์ง€์›Œ์ฃผ์„ธ์š”.) + + **`์ด์Šˆ`** + + ๐Ÿ‘‰ ์•ฑ ์‹คํ–‰ ์ค‘์— ๋…ธ๋ž˜ ๋‹ค์Œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋‹ˆ๊นŒ ์•ฑ์ด ์ข…๋ฃŒ๋˜์—ˆ๋‹ค. + + **`๋ฌธ์ œ`** + + ๐Ÿ‘‰ ๋…ธ๋ž˜ํด๋ž˜์Šค์˜ ๋ฐ์ดํ„ฐ๋ฆฌ์ŠคํŠธ์˜ Size๋ฅผ ๋„˜์–ด์„œ NullPointException์ด ๋ฐœ์ƒํ•˜์—ฌ ์•ฑ์ด ์ข…๋ฃŒ๋œ ๊ฒƒ์ด์—ˆ๋‹ค. + + **`ํ•ด๊ฒฐ`** + + ๐Ÿ‘‰ ๋…ธ๋ž˜ ๋‹ค์Œ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ๋ฐ์ดํ„ฐ๋ฆฌ์ŠคํŠธ์˜ Size๋ฅผ ๊ฒ€์‚ฌํ•ด Size๋ณด๋‹ค ๋„˜์–ด๊ฐ€๋ ค๊ณ  ํ•˜๋ฉด ๋‹ค์Œ์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰์‹œํ‚ค์ง€ ์•Š๊ณ , ์ฒซ ๋…ธ๋ž˜๋กœ ๋Œ์•„๊ฐ€๊ฒŒ๋” ํ•ด๊ฒฐ + + **`์ฐธ๊ณ ๋ ˆํผ๋Ÿฐ์Šค`** + + - ๋งํฌ + +# ๐Ÿ“ขย ํ•™์Šต ํ›„๊ธฐ + +--- + +- ์ด๋ฒˆ ์ฃผ์ฐจ ์›Œํฌ๋ถ์„ ํ•ด๊ฒฐํ•ด๋ณด๋ฉด์„œ ์–ด๋• ๋Š”์ง€ ํšŒ๊ณ ํ•ด๋ด…์‹œ๋‹ค. +- ํ•ต์‹ฌ ํ‚ค์›Œ๋“œ์— ๋Œ€ํ•ด ์™„๋ฒฝํ•˜๊ฒŒ ์ดํ•ดํ–ˆ๋Š”์ง€? ํ˜น์‹œ ์ดํ•ด๊ฐ€ ์•ˆ ๋˜๋Š” ๋ถ€๋ถ„์€ ๋ญ์˜€๋Š”์ง€? + + + +# ๐Ÿค”ย ์ฐธ๊ณ  ์ž๋ฃŒ + +--- + +Copyright ยฉ 2024 Kim Yongmin (Matthew) All rights reserved. \ No newline at end of file