๐ช Programming
[JS] API ์์ฒญ / ๋น๋๊ธฐ ์์
์ทจ์ํ๊ธฐ - Abort Controller
[JS] API ์์ฒญ / ๋น๋๊ธฐ ์์ ์ทจ์ํ๊ธฐ - Abort Controller
2024.05.14AbortController๋ 1๊ฐ ์ด์์ API ์์ฒญ์ ์ทจ์ํ ๋ ์ฌ์ฉํ๋ ์ธํฐํ์ด์ค๋ค. ์ฃผ๋ก ์ค๋ณต ์์ฒญ์ด ์์ ๋ ์ด์ ์์ฒญ์ ์ทจ์ํ ๋ ์ฌ์ฉํ๋ฉฐ, ๋น๋๊ธฐ ์์
์ ๋ค๋ฃฐ ๋๋ ํ์ฉํ ์ ์๋ค. Axios 0.22 ๋ฒ์ ๋ถํฐ AbortController๋ฅผ ์ด์ฉํด์ API ์์ฒญ์ ์ทจ์ํ ์ ์๋ค. Cancel ํ ํฐ์ ์ด์ฉํ๋ ๋ฐฉ์์ deprecated ๋๋ค. ๊ธฐ๋ณธ ์ฌ์ฉ ๋ฐฉ๋ฒAbortController๋ ์๋ 3๊ฐ์ง ๋จ๊ณ๋ก ์ฌ์ฉํ๋ค. abortController.abort() ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด abort ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉฐ fetch ํ๋ก๋ฏธ์ค๋ rejected ์ํ๊ฐ ๋๊ณ ์ ์ด๋ catch ๋ธ๋ญ์ผ๋ก ์ง์
ํ๋ค.AbortController ์ธ์คํด์ค ์์ฑ์ธ์คํด์ค์ signal ํ๋กํผํฐ๋ฅผ fetch์ signal ์ต์
..
[Next.js] Next/Image base64 placeholder ๋ง๋ค๊ธฐ (๋ธ๋ฌ ์ฒ๋ฆฌ๋ ํ๋ ์ด์คํ๋)
[Next.js] Next/Image base64 placeholder ๋ง๋ค๊ธฐ (๋ธ๋ฌ ์ฒ๋ฆฌ๋ ํ๋ ์ด์คํ๋)
2024.05.14Next/Image๋ ํฌ๊ฒ ๋ก์ปฌ ์ด๋ฏธ์ง(์ ์ ์ด๋ฏธ์ง)์ ๋ฆฌ๋ชจํธ ์ด๋ฏธ์ง(๋ค์ด๋๋ฏน ์ด๋ฏธ์ง)๋ก ๋๋๋ค. /public ํด๋์ ์ ์ฅํ ๋ก์ปฌ ์ด๋ฏธ์ง๋ ๋น๋ ํ์์ importํ ์ด๋ฏธ์ง ํ์ผ์ width, height๋ฅผ ์๋์ผ๋ก ์ง์ ํ๊ณ base64๋ก ์ธ์ฝ๋ฉํ ์ด๋ฏธ์ง๊ฐ ์์ฑ๋๋ค. ๋ฐ๋ผ์ ์ถ๊ฐ ์์
์์ด ๋ธ๋ฌ ์ฒ๋ฆฌ๋ Placeholder๋ฅผ ์ฌ์ฉํ ์ ์๋ค.// public ํด๋์ ์๋ me.png ํ์ผ์ ์ฌ์ฉํ๊ณ ์๋ค; ๊ทธ ์ธ ์ํฉ์ ๋ฆฌ๋ชจํธ ์ด๋ฏธ์ง๋ก ๊ตฌ๋ถํ๋ค. ์ด๋ ๋ธ๋ฌ ์ฒ๋ฆฌ๋ Placeholder๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด plaiceholder ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์บ๋ฒ์ค API๋ฅผ ์ด์ฉํด์ 4×4 ์ ๋์ ์ฌ์ด์ฆ(๋ณดํต 300๋ฐ์ดํธ ๋ฏธ๋ง)๋ก ์ค์ธ ํ base64๋ก ๋ณํํ๋ ์์
์ด ํ์ํ๋ค. NextJS ๊ณต์ ๋ฌธ์์์ 10 ..
[DevTools] Tailwind CSS ์ ํธ๋ฆฌํฐ ํด๋์ค ์๋ ์ ๋ ฌ ํ๋ฌ๊ทธ์ธ
[DevTools] Tailwind CSS ์ ํธ๋ฆฌํฐ ํด๋์ค ์๋ ์ ๋ ฌ ํ๋ฌ๊ทธ์ธ
2024.05.13prettier-plugin-tailwindcss ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋ฉด TailwindCSS์ ์ ํธ๋ฆฌํฐ ํด๋์ค ์ ๋ ฌ ๊ท์น์ ๋ฐ๋ผ ํด๋์ค๋ฅผ ์๋ ์ ๋ ฌํด์ค๋ค. ์ด์ ๊น์ง Tailwind Formatter ๊ฐ์ IDE ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด์ ์ ๋ ฌ์ด ํ์ํ ๋๋ง๋ค ๋ถ๊ฐ๊ธฐ๋ฅ์ ์คํ(โ โง H)ํ๋๋ฐ ๊ทธ๋ด ํ์๊ฐ ์์ด์ก๋ค. prettier-plugin-tailwindcss ํ๋ฌ๊ทธ์ธ์ ์ค์นํ๊ณ ํ์ผ ์ ์ฅ์ ์๋ ํฌ๋งคํ
๋๋๋ก IDE๋ฅผ ์ค์ ํ๋ฉด, ์ ํธ๋ฆฌํฐ ํด๋์ค๋ ํจ๊ป ์ ๋ ฌ๋ผ์ ํธํ๋ค. ์ฐธ๊ณ ๋ก ํด๋์ค ์๋ ์ ๋ ฌ ์ธ์๋ ์๋ชป ์
๋ ฅํ ํด๋์ค ์ค๋ฅ ํ์, ์ถ์ฝ(shorthand) ์ฌ์ฉ ๊ฐ์ , ์์(arbitrary) ๊ฐ ์ฌ์ฉ ๊ธ์ง ๊ฐ์ ๊ท์น์ด ์ ์ฉ๋ eslint-plugin-tailwindcss ESLint ํ๋ฌ๊ทธ์ธ๋ ์๋ค. ์ค์ ..
[JS] ์
๋ก๋ ์งํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ onUploadProgress
[JS] ์ ๋ก๋ ์งํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ onUploadProgress
2024.05.13Axios์์ ์
๋ก๋ ์งํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ onUploadProgress ํธ๋ค๋ฌ๋ฅผ ์ด์ฉํด ์
๋ก๋ ์งํ ์ํฉ์ ํ์ธํ ์ ์๋ค. ์ฃผ๋ก ์
๋ก๋ ์งํ ์ํ๋ฅผ UI๋ก ํํํ ๋ ํ์ฉํ๋ค. onUploadProgress ํธ๋ค๋ฌ๋ ProgressEvent ๋ค์ดํฐ๋ธ ์ด๋ฒคํธ ๊ฐ์ฒด๋ฅผ ์ธ์๋ก ๋ฐ๋๋ค. ProgressEvent ๊ฐ์ฒด๋ ์๋ ์์ฑ์ ํฌํจํ๋ค. — MDN loaded : ์ด๋ฏธ ์ํํ ์์
์ ์(์
๋ก๋ํ ํฌ๊ธฐ)์ ๋ํ๋ด๋ unsigned long long ํ์์ ๋ฐ์ดํฐtotal : ์์
์ ์ด ์(์ด ํ์ผ ํฌ๊ธฐ)์ ๋ํ๋ด๋ unsigned long long ํ์์ ๋ฐ์ดํฐlengthComputable : ์งํ ์ํฉ ์ธก์ ๊ฐ๋ฅ ์ฌ๋ถ๋ฅผ ๋ํ๋ด๋ Boolean ๊ฐ axios.post(api_url, formData, {..
[Next.js] Next/Image์ sizes ์์ฑ ํบ์๋ณด๊ธฐ
[Next.js] Next/Image์ sizes ์์ฑ ํบ์๋ณด๊ธฐ
2024.05.13sizessizes๋ ๋ฏธ๋์ด ์กฐ๊ฑด์ ํด๋นํ๋ ์ด๋ฏธ์ง์ ์ต์ ํฌ๊ธฐ๋ฅผ ์ง์ ํ๋ ์์ฑ์ด๋ค. ๐ก ๊ณ ์ ํฌ๊ธฐ(๋ก๋๋ ์ด๋ฏธ์ง ํฌ๊ธฐ)๋ next.config.js ํ์ผ์ imageSizes, deviceSizes ์์ฑ ๊ฐ์ ๊ธฐ์ค์ผ๋ก ๊ฒฐ์ ๋๋ค(srcset). ์ฌ์ฉ์ ๋๋ฐ์ด์ค ํฌ๊ธฐ์ ๋ฐ๋ผ ์๋ ์ค๋จ์ ์ค ํ๋๊ฐ ๊ณ ์ ํฌ๊ธฐ๊ฐ ๋๋ค.deviceSizes ๊ธฐ๋ณธ๊ฐ : [640, 750, 828, 1080, 1200, 1920, 2048, 3840]imageSizes ๊ธฐ๋ณธ๊ฐ : [16, 32, 48, 64, 96, 128, 256, 384] Next/Image์์ layout='responsive' ํน์ layout='fill' ์ผ ๋ sizes ์์ฑ์ ์ง์ ํ์ง ์์ผ๋ฉด ํญ์ 100vw ๋๋น์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๋ค. ๋ง์ฝ ~500p..
[JS] ์ธ๋ผ์ธ ์คํ์ผ ์ ์ - cssText
[JS] ์ธ๋ผ์ธ ์คํ์ผ ์ ์ - cssText
2024.05.13cssText๋ ์๋ก์ด ์์์ ์ฌ๋ฌ ์คํ์ผ์ ์ถ๊ฐํด์ผ ํ ๋ ์ ์ฉํ๋ค. ๊ธฐ์กด ์ธ๋ผ์ธ ์คํ์ผ์ ์์ ํ ๊ต์ฒดํ๋ฏ๋ก ๊ทธ ์ธ ์ํฉ์์ ์ ์ฌ์ฉํ์ง ์๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์๋ฆฌ๋จผํธ ์คํ์ผ์ ์์ ํ ๋ elem.style.propertyName(ํ๋กํผํฐ ์ด๋ฆ์ ์นด๋ฉ ์ผ์ด์ค ์ฌ์ฉ) ์ผ๋ก ์ ๊ทผํ ๋ค ์ํ๋ ์คํ์ผ ๊ฐ์ ํ ๋นํ๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ค. ํ์ง๋ง ์ฌ๋ฌ ์คํ์ผ์ ์ถ๊ฐํ ๋๋ง๋ค ์ผ์ผ์ด propertyName์ผ๋ก ์ ๊ทผํ๊ธฐ์ ์กฐ๊ธ ๋ฒ๊ฑฐ๋กญ๋ค.// CSS ํ์ผ์ width, height, margin, font-size ๋ฑ์ ์คํ์ผ์ด ์ ์ฉ๋ ์๋ฆฌ๋จผํธconst $header = document.querySelector('.header');$header.style.fontSize = '20px'; ๐ ์๋ฆฌ๋จผํธ์ sty..
[React] ์บ๋ก์
(Carousel) ์๋ ๋ฐฉ์ ์ดํด๋ณด๊ธฐ
[React] ์บ๋ก์ (Carousel) ์๋ ๋ฐฉ์ ์ดํด๋ณด๊ธฐ
2024.05.13์บ๋ก์
๊ตฌ์กฐ๋ง์ ์น์ฌ์ดํธ์์ ์ฌ๋ฌ ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ผ์ด๋ ํ์์ผ๋ก ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ์ฌ์ฉํ๋ ์บ๋ก์
๋ทฐ์ด๋ ์๊ฐ๋ณด๋ค ๊ฐ๋จํ๊ฒ ๊ตฌํํ ์ ์๋ค. ์บ๋ก์
๋ทฐ์ด์ DOM ๊ตฌ์กฐ๋ ๋๋ต ์๋์ ๊ฐ๋ค. ์บ๋ก์
์์ดํ
Wrapper : ๋์นจ ์์ญ ์จ๊น ์ฒ๋ฆฌ overflow: hidden; width: 100%; height: 100%;์บ๋ก์
์์ดํ
Parent : ์ฌ๋ฌ๊ฐ์ ์บ๋ก์
์์ดํ
์ ๊ฐ์ธ๋ ๋ถ๋ชจ โก๏ธ์บ๋ก์
์์ดํ
๋ค์ ์ํ ์์์ ์ํด Flexbox ๋ ์ด์์ ์ ์ฉ์คํฌ๋กค๋ฐ ์จ๊น ์ฒ๋ฆฌ์ ํ ํจ๊ณผ(transition)๋ค์ ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์ข์ธก์ผ๋ก ์ด๋ transform: translateX(-100%|-200%|...)์บ๋ก์
์์ดํ
: 1๊ฐ ์์ดํ
๋ง ๋ณด์ด๋๋ก ์ฒ๋ฆฌ width: 100%; ..
[React] ๋
ธ๋์ ํธ๋ฆฌ ์์น๋ฅผ ๋ํ๋ด๋ useId ํ
[React] ๋ ธ๋์ ํธ๋ฆฌ ์์น๋ฅผ ๋ํ๋ด๋ useId ํ
2024.05.13useId ์๊ฐuseId()๋ React 18 ๋ฒ์ ์ ๋์
๋ ํ
์ผ๋ก, ๋
ธ๋์ ํธ๋ฆฌ ์์น๋ฅผ ๋ํ๋ด๋ ๊ณ ์ ID(Base32 ๋ฌธ์์ด)๋ฅผ ๋ฐํํ๋ค. ์ปดํฌ๋ํธ ํธ๋ฆฌ๊ฐ ์ฌ๋ฌ ์์(children)์ผ๋ก ๋ถ๊ธฐ๋ ๋๋ง๋ค ID์ ์ถ๊ฐ ๋นํธ๋ฅผ ์ฝ์
ํด์ ๊ฐ ์์์ ์์น๋ฅผ ๋ํ๋ธ๋ค.:r0: (๋ถ๋ชจ ์ปดํฌ๋ํธ):r1: (์์ ์ปดํฌ๋ํธ1):r2: (์์ ์ปดํฌ๋ํธ2)... ์ฃผ๋ก ์๋ฒ / ํด๋ผ์ด์ธํธ์์ ์์ฑํ ํธ๋ฆฌ(tree) ์ฌ์ด์ ํ์ด๋๋ ์ด์
(hydration) ๋ถ์ผ์น(mismatch)๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด ์ฌ์ฉํ๋ค. ์ฆ, useId๊ฐ ์์ฑํ ๊ณ ์ ํ ID๋ฅผ ์ด์ฉํด ์ํํ ํ์ด๋๋ ์ด์
์ ๋๋ ๋ชฉ์ ์ธ ๊ฒ. ๋ฆฌ์คํธ์ key๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋ชฉ์ ์ด ์๋๋ฏ๋ก ์ฃผ์ํ๋ค. ์ถ๋ ฅ๊ฐ ์์๐ก : (์ฝ๋ก )์ querySelector ๊ฐ์ CSS ์
๋ ํฐ์์ ..
[TS] ์๋ฆฌ๋จผํธ์ ๊ธฐ๋ณธ ์ดํธ๋ฆฌ๋ทฐํธ ์ธํฐํ์ด์ค/ํ์
์ฌ์ฉํ๊ธฐ
[TS] ์๋ฆฌ๋จผํธ์ ๊ธฐ๋ณธ ์ดํธ๋ฆฌ๋ทฐํธ ์ธํฐํ์ด์ค/ํ์ ์ฌ์ฉํ๊ธฐ
2024.05.12HTMLAttributescheckbox ํ์
์ ์๋ฆฌ๋จผํธ๋ฅผ ์ฌ์ฉํ๋ Toggle ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ ๋ค๊ณ ๊ฐ์ ํด๋ณด์. ์๋ฆฌ๋จผํธ๋ autoFocus, required, readOnly ๋ฑ์ ๊ธฐ๋ณธ ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ์ง๋ค. ๋ง์ฝ ์๋ฆฌ๋จผํธ๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ์ ์ ์๋ ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ Toggle ์ปดํฌ๋ํธ์ props๋ก ๋๊ธฐ๊ณ ์ถ๋ค๋ฉด? ๋ชจ๋ ์ดํธ๋ฆฌ๋ทฐํธ์ ๋ํ ์ธํฐํ์ด์ค๋ฅผ ์ ์ํด์ผ ํ ๊น? ์ด๋ InputHTMLAttributes ํ์
์ ์ฌ์ฉํ๋ฉด ๋๋ค. ๊ทธ๋ผ ๊ฐ ์ดํธ๋ฆฌ๋ทฐํธ์ prop ํ์
์ ์ผ์ผ์ด ์ ์ํ์ง ์์๋ ๋๋ค. ์ ๋ค๋ฆญ T๋ onChange ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์๋ฆฌ๋จผํธ ํ์
์ด ๋ค์ด๊ฐ๋ฏ๋ก HTMLInputElement ๊ฐ์ ํ์
์ ๋๊ธฐ๋ฉด ๋๋ค.// InputHTMLAttributes ๊ตฌ์กฐ | node_modules/@types/r..
[JS] ์ JSX ์์์ if ๋ฌธ์ ์ฌ์ฉํ ์ ์์๊น? ํํ์๊ณผ ๋ฌธ ์ฐจ์ด์
[JS] ์ JSX ์์์ if ๋ฌธ์ ์ฌ์ฉํ ์ ์์๊น? ํํ์๊ณผ ๋ฌธ ์ฐจ์ด์
2024.05.12TL;DR๏ฟญ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋จ์ ์ผ๋ จ์ ๋ฌธ(Statement)์ผ๋ก ๊ตฌ์ฑ๋๋ค๏ฟญ ๊ฐ ๋ฌธ์ ๋ณ์ ์์ฑ, if, else ์กฐ๊ฑด ์คํ, ๋ฃจํ ์์๊ณผ ๊ฐ์ ์์
์ ์ํํ๋ ๋ช
๋ น์ด๋ค๏ฟญ ํํ์์ ๊ฐ์ ์์ฑํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ค → ํํ์์ ํญ์ ๊ฐ์ ์์ฑํ๋ค๏ฟญ ๋ชจ๋ ํจ์์ ์ธ์๋ ํํ์์ด๋ค. ๋ฌธ์ ๊ฐ์ ์์ฑํ์ง ์์ผ๋ฏ๋ก ํจ์ ์ธ์์ ์ฌ์ฉํ ์ ์๋ค๏ฟญ ๋ฌธ์ ํ๋ก๊ทธ๋จ์ ํ๋๋ก ๋ฌถ๋ ๋จ๋จํ ๊ตฌ์กฐ์ด๋ฉฐ, ๋ฌธ์ ์ธ๋ถ์ฌํญ์ ํํ์์ผ๋ก ์ฑ์์ง๋ค๏ฟญ ํํ์์ ๋จ๋
์ผ๋ก ์กด์ฌํ ์ ์๊ณ , ํญ์ ๋ฌธ์ ์ผ๋ถ๋ค๏ฟญ ๋ฌธ์ ํํ์ ์ฌ๋กฏ์ ์ ์ธํ๊ณค ๋ณธ์ง์ ์ผ๋ก ๋น์ด์๋ค๏ฟญ ๋ฌธ์ด ๋น์ด ์์ ๋๋ ํํ์์ ํญ์ ๋ฌธ์ ์ผ๋ถ๋ค๏ฟญ JSX์ {} ์ค๊ดํธ๋ ํํ์ ์ฌ๋กฏ์ ๋ง๋ ๋ค๏ฟญ ํํ์ ์ฌ๋กฏ์์ ๊ฐ์ ์์ฑํ์ง ์๋ ๋ฌธ์ ์ฌ์ฉํ ์ ์๋ค ํํ์ | Expressi..
[TS] useQuery, useMutation์ ์ ๋ค๋ฆญ ํ์
์ดํด๋ณด๊ธฐ / Base Query ํ
๋ง๋ค๊ธฐ
[TS] useQuery, useMutation์ ์ ๋ค๋ฆญ ํ์ ์ดํด๋ณด๊ธฐ / Base Query ํ ๋ง๋ค๊ธฐ
2024.05.12React Query์์ ์ ๊ณตํ๋ useQuery, useMutation์ ๊ทธ๋๋ก ์ฌ์ฉํ๋ฉด ํญ์ ์ฟผ๋ฆฌํค์ ์ฟผ๋ฆฌ ํจ์๋ฅผ ์ง์ ํด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๋ค. API ์ ํ์ ๋ฐ๋ผ Base Query|Mutation ์ปค์คํ
ํ
์ ๋ง๋ค์ด ๋๊ณ ์ฌ์ฉํ๋ฉด ์ฟผ๋ฆฌํค์ ์ฟผ๋ฆฌ ํจ์๋ฅผ ์ผ์ผ์ด ์ง์ ํ์ง ์๊ณ ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฌ์ฉํ๊ธฐ ์ข๋ค. ํ์ง๋ง ์ปค์คํ
ํ
์ ๋ง๋ค ๋ ์ฟผ๋ฆฌ ํ์
์ ์ง์ ํ์ง ์์ผ๋ฉด ๋ฐ์ดํฐ๊ฐ unknown, any์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์์ ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋์ง ์๊ธฐ ์ด๋ ต๋ค. ์ฟผ๋ฆฌ ํ์
์ ๋๋ถ๋ถ ์ ๋ค๋ฆญ์ผ๋ก ๋์ด ์๋๋ฐ ์ด๋ฅผ ์ ์ฌ์ฉํ๋ฉด ํ์
์ ๋ณด์ฅ ๋ฐ์ผ๋ฉด์ ๋ฐ์ดํฐ๋ฅผ ํธ๋ฆฌํ๊ฒ ๋ค๋ฃฐ ์ ์๋ค. useQuery์ ๋ค๋ฆญ ํ์
ํบ์๋ณด๊ธฐ โก๏ธexport declare function useQuery โถ TQueryFnData : ์ฟผ๋ฆฌ ํจ์ ..
[React] ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React Query) staleTime์ ์ค์ ํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ
[React] ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React Query) staleTime์ ์ค์ ํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ
2024.05.12React Query์์ staleTime์ ์ฟผ๋ฆฌ์ ๋ง๋ฃ ์๊ฐ์ ์ค์ ํ ๋ ์ฌ์ฉํ๋ค. staleTime์ด ์ง๋๋ฉด ์ฟผ๋ฆฌ์ ์บ์ ๋ฐ์ดํฐ๋ฅผ ์ค๋๋ ๋ฐ์ดํฐ๋ก ๊ฐ์ฃผํ๊ณ re-fetching์ ์๋ํ๋ค. React Query์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์บ์ ๋ฐ์ดํฐ ์์ฒด๋ฅผ stale ๋ฐ์ดํฐ๋ก ์ทจ๊ธํ๊ธฐ ๋๋ฌธ์ staleTime์ ๊ธฐ๋ณธ๊ฐ์ 0์ด๋ค. ํ์ง๋ง ๋ณ๊ฒฝ ์ฃผ๊ธฐ๊ฐ ๋๋ฆฐ ๋ฐ์ดํฐ๋ ์๋ฒ์ ๋น๋ฒํ๊ฒ ์์ฒญํ ํ์๊ฐ ์๊ธฐ ๋๋ฌธ์ staleTime์ ์ ์ ํ๊ฒ ์กฐ์ ํด์ฃผ๋ ์์
์ด ํ์ํ๋ค. ๐ก ์ค๋ณต ํธ์ถ์ ์ค์ด๊ธฐ ์ํ staleTime์ ์ต์ 20์ด ์ ๋๊ฐ ์ ๋นํ๋ค — via tkdodo 1. ๊ฐ๋ณ ์ฟผ๋ฆฌ ์ธ์คํด์ค์ staleTime ์ค์ // v4useQuery('users', getUsers, { staleTime: 1000 * 60 });..