๐ช Programming
[TS] @ts-ignore, @ts-expect-error ํ์
์คํฌ๋ฆฝํธ ์ฃผ์ ์ฐจ์ด์
[TS] @ts-ignore, @ts-expect-error ํ์ ์คํฌ๋ฆฝํธ ์ฃผ์ ์ฐจ์ด์
2024.05.08@ts-ignore, @ts-expect-error ๋ ์ฃผ์ ๋ชจ๋ ํ์
์คํฌ๋ฆฝํธ์ ํ์
์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง๋ง @ts-expect-error๋ ๊ฐ๋ฐ์๊ฐ ์ค๋ฅ๋ฅผ ์ธ์ํ๊ณ ์์ผ๋ฉฐ, ์ถํ ์์ ํ ์๋๊ฐ ์์์ ๋ช
์์ ์ผ๋ก ๋ํ๋ธ๋ค. ๋ฐ๋ฉด, @ts-ignore ์ฃผ์์ ๋จ์ํ ์ค๋ฅ๋ฅผ ๋ฌด์ํ๋ค. ์ฝ๋ ์ ์ง๋ณด์๋ฅผ ์ํด ๊ฐ๋ฅํ @ts-expect-error ์ฃผ์์ ์ฌ์ฉํ๋๊ฒ ์ข๋ค. @ts-ignoreํน์ ์ฝ๋ ๋ผ์ธ์ ํ์
์ค๋ฅ๊ฐ ์๋๋ผ๋ ์ปดํ์ผ๋ฌ๊ฐ ์ด๋ฅผ ๋ฌด์ํ๋๋ก ์ง์ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ฐพ์ง ๋ชปํ๊ฑฐ๋ ์ผ์์ ์ผ๋ก ์ค๋ฅ๋ฅผ ๋ฌด์ํ๊ณ ์ถ์ ๋ ์ฌ์ฉ @ts-expect-error์ฝ๋์์ ํ์
์ค๋ฅ๊ฐ ์์๋๋ ๊ฒฝ์ฐ, ์ด๋ฅผ ๋ช
์์ ์ผ๋ก ์ ์ธํ๋ฉด์ ์ค๋ฅ๋ฅผ ๋ฌด์ํ ๋ ์ฌ์ฉ์์ํ ์ค๋ฅ๊ฐ ์ค์ ๋ก ๋ฐ์ํ์ง ์์ผ๋ฉด ํด๋น ์ฃผ์์ด ๋์ด์ ํ์ํ์ง..
[JS] ๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ฌ ๋ฌธ์์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ๋ง๋ค๊ธฐ
[JS] ๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ฌ ๋ฌธ์์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ๋ง๋ค๊ธฐ
2024.05.08๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ง ์์์ ๋๐ก charAt์ ์ธ๋ฑ์ค์ ํด๋นํ๋ ๋ฌธ์์ด์ ๋ฐํํ๊ณ , charCodeAt์ ์ ๋์ฝ๋(0~65535) ๊ฐ์ ๋ฐํํ๋คfunction capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1);}capitalizeFirstLetter('hello world') // Hello world ๋ค๊ตญ์ด๋ฅผ ๊ณ ๋ คํ์ ๋๐ก ๋ก๋ง์(๋ผํด ๋ฌธ์)์์ ์ ์ด ์๋ ์๋ฌธ์ i์ ์ ์ด ์๋ ๋๋ฌธ์ I๊ฐ ์ง์ ์ด๋ฃฌ๋ค. ๋ฐ๋ฉด ํฐํค์ด, ์์ ๋ฅด๋ฐ์ด์์ด์์ ์ ์๋ ๋ฌธ์ฤฑ, I์, ์ ์๋ ๋ฌธ์ i, ฤฐ๊ฐ ์ง์ ์ด๋ฃฌ๋ค. Istanbul์ ํฐํค์ด ์ํ๋ฒณ์ผ๋ก ์ ์ผ๋ฉด ฤฐstanbul์ด ๋๋๋ฐ ์ฒซ ๊ธ์๊ฐ ๋ฐ๋ก ์ ์๋ ..
[React] ๊ฐ์ฒด๋ฅผ prop์ผ๋ก ๋ฐ์ ๋ Default Parameter ์ง์
[React] ๊ฐ์ฒด๋ฅผ prop์ผ๋ก ๋ฐ์ ๋ Default Parameter ์ง์
2024.05.08๋ฌธ์ ๐ก ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ง์ ํ options ๊ฐ์ฒด์ size, color ์์ฑ์ ๋ชจ๋ ์ ์งํด์ผ ํ๋ ์ํฉ ์ปดํฌ๋ํธ ํน์ Prop์ ๊ธฐ๋ณธ๊ฐ์ ๊ฐ์ฒด๋ก ์ง์ ํ๊ณ , ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ณณ์์ ๊ฐ์ฒด๋ฅผ ๋๊ธฐ๋ฉด ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ง์ ํ ๊ฐ์ฒด๋ฅผ ๋ฎ์ด์ด๋ค. ์๋ ์์์์ options ํ๋กญ์ size, color ์์ฑ์ ๊ฐ๋ ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ง์ ํ์ง๋ง ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ณณ์์ size ์์ฑ๋ง ๊ฐ๋ ๊ฐ์ฒด๋ฅผ ๋๊ธฐ๋ฏ๋ก options ํ๋กญ์ { size: 5 }๊ฐ ๋๋ค.// ์ปดํฌ๋ํธ ์ ์function Child({ options = { size: 100, color: 'black' } }) { // options ํ๋กญ ๊ธฐ๋ณธ๊ฐ์ { size: 100, color: 'black' } ์ผ๋ก ์ค์ }// ์ปดํฌ๋ํธ ์ฌ์ฉreturn ;// ํ..
[HTML/CSS] ์์ ์ผ์ชฝ/์์ชฝ ๋ณ๋ถํฐ ํด๋ฆญ ์ง์ ๊น์ง ๊ฑฐ๋ฆฌ ๊ตฌํ๊ธฐ
[HTML/CSS] ์์ ์ผ์ชฝ/์์ชฝ ๋ณ๋ถํฐ ํด๋ฆญ ์ง์ ๊น์ง ๊ฑฐ๋ฆฌ ๊ตฌํ๊ธฐ
2024.05.08// left = clientRect.x, top = clientRect.yconst { height, width, top, left } = element.getBoundingClientRect();// event.clientX, event.clientY๋ ๋ง์ฐ์ค ์ด๋ฒคํธ ์์ฑconst x = event.clientX - left;const y = event.clientY - top; mouseEvent.clientX, mouseEvent.clientY : ๋ธ๋ผ์ฐ์ ํ๋ฉด ์ผ์ชฝ ์ต์๋จ์ ๊ธฐ์ค์ผ๋ก ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์ง์ ๊น์ง ์ผ๋ง๋ ๋จ์ด์ ธ ์๋์ง ๋ํ๋ด๋ ์ขํ. ๋ธ๋ผ์ฐ์ ํ๋ฉด์ด ๊ธฐ์ค์ด๋ฏ๋ก ์คํฌ๋กคํด๋ ๊ฐ์ด ๋ณํ์ง ์์.clientRect.x, clientRect.left : ํ๋ฉด ์ข์ธก๋ถํฐ ํด๋น ์๋ฆฌ๋จผํธ์ ์ผ์ชฝ ๋ณ๊น..
[HTMl/CSS] ์๋ฆฌ๋จผํธ์ ๋ชจ๋ CSS ์คํ์ผ ์์ฑ / ๊ฐ ์กฐํํ๊ธฐ
[HTMl/CSS] ์๋ฆฌ๋จผํธ์ ๋ชจ๋ CSS ์คํ์ผ ์์ฑ / ๊ฐ ์กฐํํ๊ธฐ
2024.05.08์ธ์๋ก ๋๊ธด ์์์ ์ ์ฉ๋ ๋ชจ๋ CSS ์์ฑ ์กฐํWindow.getComputedStyle(element, [pseudoElt]) const styles = getComputedStyle(element);// {0: 'accent-color', 1: 'align-content', 2: 'align-items', ...}console.log(styles); ์ธ์๋ก ๋๊ธด CSS ์์ฑ์ ๋ํ ๊ฐ ์กฐํCSSStyleDeclaration.getPropertyValue(property) const styles = getComputedStyle(element);// 'normal' (align-items์ ๋ํ ์์ฑ ๊ฐ normal ๋ฐํ)styles.getPropertyValue('align-items'); // '..
[HTML/CSS] backdrop-filter vs filter ์์ฑ ๋น๊ต
[HTML/CSS] backdrop-filter vs filter ์์ฑ ๋น๊ต
2024.05.08TL;DRbackdrop-filter : ์์ฑ์ ์ ์ฉํ ์์์ ๋ฐฐ๊ฒฝ์๋ง ํจ๊ณผ๊ฐ ์ ์ฉ๋จ. ์ฝํ
์ธ ๋ ์ํฅ ์๋ฐ์Tailwind : backdrop-blur-smCSS : backdrop-filter: blur(4px);filter : ์์ฑ์ ์ ์ฉํ ์์ ์ ์ฒด(์์์์ ํฌํจ)์ ํจ๊ณผ๊ฐ ์ ์ฉ๋จ. ์ฃผ๋ก ์ด๋ฏธ์ง ํ๊ทธ์ ์ฌ์ฉํจTailwind : blur-smCSS : filter: blur(4px);๐ก ์ฝํ
์ธ ๊ฐ ์๊ฑฐ๋ ๋ฐฐ๊ฒฝ์์ด ์ง์ ๋์ด ์์ง ์์ผ๋ฉด ํจ๊ณผ ์ ์ฉ ์๋๋ฏ๋ก ์ฃผ์ Blur ๋ฐฐ๊ฒฝ ๊ตฌํ๋ ์์ฑ ๋ชจ๋ ์ ์ฉ๋๋ ํจ๊ณผ๋ ๋์ผํ๋ filter ์์ฑ์ ์์ ์์๋ฅผ ํฌํจํ ์์ ์ ์ฒด์ ์ ์ฉ๋๋ฏ๋ก Blur ํจ๊ณผ๊ฐ ๋ค์ด๊ฐ ๋ฐฐ๊ฒฝ์ ๊ตฌํํ๋ ค๋ฉด background ์ถ๊ฐ ์์๋ฅผ ๋ณ๋๋ก ๋ง๋ค์ด์ผ ํ๋ค — ์ฐธ๊ณ ๊ธ .bac..
[HTML/CSS] Tailwind CSS ๋ค์ด๋๋ฏน ํด๋์ค ์ฌ์ฉ์ ์ฃผ์ํ ์
[HTML/CSS] Tailwind CSS ๋ค์ด๋๋ฏน ํด๋์ค ์ฌ์ฉ์ ์ฃผ์ํ ์
2024.05.08Tailwind CSS๋ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ฐํ์์ ํฌํจํ์ง ์๋๋ค. ์ด๋ ํด๋์ค ์ด๋ฆ์ ๋น๋ ํ์์ ์ถ์ถํ์ฌ ์ ์ ์ธ CSS ํ์ผ๋ง ๋ธ๋ผ์ฐ์ ๋ก ์ ์กํ๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ฆ, ๋ธ๋ผ์ฐ์ ์์ Tailwind CSS ๊ด๋ จ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํํ์ง ์๋๋ค. ๋๋ฌธ์ Tailwind CSS๋ ๋ฐํ์์ ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋๋ ๊ฐ์ ์์กดํ ์ ์๋ค. ๋ฐํ์์ ๋์ ์ผ๋ก ๊ฐ์ ๋ณ๊ฒฝํด์ผ ํ๋ ๊ฒฝ์ฐ Emotion ๊ฐ์ CSS-in-JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฑ์ ํ์ฉํด์ผ ํ๋ค.Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sor..
[DevTools] 1Password์์ SSH ํค ๊ด๋ฆฌํ๊ธฐ
[DevTools] 1Password์์ SSH ํค ๊ด๋ฆฌํ๊ธฐ
2024.05.081Password 8 ๋ฒ์ ๋ถํฐ SSH & Git ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค. ํ์ฌ Ed25519์ RSA ๋๊ฐ์ง ํ์
์ ์ง์ํ๋ฉฐ, ๊ธฐ์กด SSH ํค๋ฅผ ๋ถ๋ฌ์์ ์ ์ฅํ ์๋ ์๋ค. ์ฐธ๊ณ ๋ก *.pem ํ์ผ์ 1Password์ ๋ถ๋ฌ์์ ์ ์ฅํ ํ, ๊ฐ์ธํค๋ฅผ ๋ค์ ๋ค์ด๋ก๋ํด์ ์ฌ์ฉํ ๋ pem ํ์ฅ์๋ฅผ ์ถ๊ฐํด์ผ ํ๋ค. 1Password์ SSH & Git ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋ฉด SSH ๊ฐ์ธํค๋ฅผ ๋ก์ปฌ์ ์ ์ฅํ์ง ์๊ณ ๋ SSH ์ธ์ฆ์ ์งํํ ์ ์๋ค. ~/.ssh/config ํ์ผ์ ์ผ์ผ์ด SSH ํค ๊ฒฝ๋ก๋ฅผ ๋ช
์ํด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์๋ ๋ ์ ์๋ค. 1Password์์ ์์ฑํ SSH ํค๋ ๊ณต๊ฐํค์ ํ๊ฑฐ ํ๋ฆฐํธ(Finger Print)๋ฅผ ํจ๊ป ์์ฑํ๊ธฐ ๋๋ฌธ์ GitHub ๊ฐ์ ์๋น์ค์์ ๊ณต๊ฐํค ์๋์์ฑ ๊ธฐ๋ฅ๋ ์ฌ์ฉํ ..
[Algorithm] ํต ์ ๋ ฌ(Quick Sort) ์๊ณ ๋ฆฌ์ฆ ํบ์๋ณด๊ธฐ
[Algorithm] ํต ์ ๋ ฌ(Quick Sort) ์๊ณ ๋ฆฌ์ฆ ํบ์๋ณด๊ธฐ
2024.05.07ํต ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ ๊ฐ๋
ํต ์ ๋ ฌ์ ๋ถํ ์ ๋ณต ์๊ณ ๋ฆฌ์ฆ(๋ฌธ์ ๋ฅผ ๋ ์์ 2๊ฐ์ ๋ฌธ์ ๋ก ๋ถ๋ฆฌํด์ ํด๊ฒฐํ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์์ ์๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ)์ ํ๋๋ก ์ฐฐ์ค ์คํฐ๋ ๋ฆฌ์ฒ๋ ํธ์ด(Charles Antony Richard Hoare)๊ธฐ์ฌ๊ฐ ๊ฐ๋ฐํ๋ค. ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉํ๋ ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ์ผ๋ก ๋น ๋ฅธ ์ํ ์๋๊ฐ ํน์ง์ด๋ค. ๊ธฐ๋ณธ์ ์ธ ํต ์ ๋ ฌ์ ์๋ 3๋จ๊ณ๋ฅผ ๋ฐ๋ณตํ๋ฉฐ ์ ๋ ฌํ๋ค. ๊ธฐ์ค(Pivot; ํผ๋ฒ) ์์ ์ ํ — ์ฃผ๋ก ๋ฐฐ์ด์ ์ค๊ฐ ์์๋ฅผ ๊ธฐ์ค์ผ๋กํจ๊ธฐ์ค ์์๋ณด๋ค ์์ ์์๋ ์ผ์ชฝ์ผ๋ก ์ด๋, ๊ธฐ์ค ์์๋ณด๋ค ํฐ ์์๋ ์ค๋ฅธ์ชฝ์ผ๋ก ์ด๋์ด๋์ํจ ์ผ์ชฝ / ์ค๋ฅธ์ชฝ ์์๋ค์ ๋ํด 1~2๋ฒ ์์
๋ฐ๋ณต ๊ตฌํBasic Quick Sort๐ก ๊ตฌํํ๊ธฐ ์ฝ์ง๋ง ํญ์ ์๋ก์ด left / right ๋ฐฐ์ด์ ์์ฑํด ๋น๊ตํ ์์๋ฅผ ์ถ๊ฐํ๋ฏ๋ก ..
[Algorithm] ๋ถํ ์ ๋ณต / ๋ณํฉ ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ
[Algorithm] ๋ถํ ์ ๋ณต / ๋ณํฉ ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ
2024.05.07๋ถํ ์ ๋ณต (Devide & Conquer)๊ฐ๋
๋ถํ ์ ๋ณต์ “ํฐ ๋ฌธ์ ๋ฅผ ์์ ๋ฌธ์ ๋จ์๋ก ์ชผ๊ฐ๋ฉด์ ํด๊ฒฐํด๋๊ฐ๋ ๋ฐฉ์"์ด๋ค. ๋ฏธ๊ตญ ์ํ์ ํฐ๋
ธ์ด๋ง์ด 1945๋
์ ๊ฐ๋ฐํ ์๊ณ ๋ฆฌ์ฆ์ด๋ค. ํต์ํธ, ๋ณํฉ ์ ๋ ฌ์ด ๋ถํ ์ ๋ณต ๋ฐฉ๋ฒ์ ํตํด ๊ตฌํํ๋ค.์์ ์ ํ
์ดํ๋ฅผ ์ด์ฉํด ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ค. ํ
์ดํ ๋๋ผ์ด๋ธ์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ ํญ์ ์ฒ์๋ถํฐ ์์ฐจ์ ์ผ๋ก ์ฝ์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ๊ธฐ ์ด๋ ค์ ๋ค. ์ด๋ฐ ํ
์ดํ ๋๋ผ์ด๋ธ์ ๋ฌธ์ ์ ์ ๊ทน๋ณตํ๊ธฐ ์ํด ๋ณํฉ ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ์ด ํ์ํ๋ค. ๋ถํ : ๋ฌธ์ ๋ฅผ ๋ ์ด์ ๋ถํ ํ ์ ์์ ๋๊น์ง ๋์ผ ์ ํ์ ์ฌ๋ฌ ํ์ ๋ฌธ์ ๋ก ๋๋๋ค์ ๋ณต : ๊ฐ์ฅ ์์ ๋จ์์ ํ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ฉฐ ์ ๋ณตํ๋ค์กฐํฉ : ํ์ ๋ฌธ์ ์ ๋ํ ๊ฒฐ๊ณผ๋ฅผ ์๋ ๋ฌธ์ ์ ๋ํ ๊ฒฐ๊ณผ๋ก ์กฐํฉํ๋ค ์์๋ถํ ์ ๋ณต์ ๊ตฌ์กฐ๋ ๋์ผํ์ง๋ง ๋ ์์..
[Algorithm] ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ ๊ธฐ๋ณธ (๋ฒ๋ธ/์ ํ/์ฝ์
)
[Algorithm] ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ ๊ธฐ๋ณธ (๋ฒ๋ธ/์ ํ/์ฝ์ )
2024.05.06๐ก ์์์ ๋ชจ๋ input์ [10, 7, 9, 5, 1]๋ก ํต์ผ. ๋ฒ๋ธ / ์ ํ / ์ฝ์
์ ๋ ฌ ๋ชจ๋ ์ต์
์ ๊ฒฝ์ฐ O(n²) ์๊ฐ๋ณต์ก๋๋ฅผ ๊ฐ๋๋ค. ์๊ณ ๋ฆฌ์ฆ ์ฑ๋ฅ์ด ์ข์ง ์์ ๊ฑฐ์ ์ฐ์ง ์์ง๋ง, ์ ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฌํ ๋ ์ ์ฉ. ๋ฒ๋ธ ์ ๋ ฌ | Bubble Sort๊ฑฐํ์ด ์ผ์ด๋ ๊ฒ์ฒ๋ผ ๋ฐฐ์ด์ ๊ฐ ์์๋ค์ด ์์ฐจ์ ์ผ๋ก ์ ๋ ฌ๋ผ์ ๋ฒ๋ธ ์ ๋ ฌ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค. ๋ ์์๋ฅผ ๋ฌถ์ด์ ๋น๊ตํ ํ ํฐ ์ซ์๋ฅผ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐ์ด๋ธ๋ค. i๋ฒ์งธ ์ ๋ ฌ์ ๋ง์น ๋๋ง๋ค “๋ค์์ i๋ฒ์งธ” ์๋ฆฌ์ ์์๊ฐ ํ์ ๋๋ค. ์๊ฐ ๋ณต์ก๋ (์ฝ์
์ ๋ ฌ๊ณผ ๋์ผ)Worst Case(์ ๋ ฌ์ด ์ ํ ์๋์ ๋) : O(n²) — ์ค์ฒฉ ๋ฐ๋ณต๋ฌธ์ ์ฌ์ฉํ๋ฏ๋กBest Case(์ด๋ฏธ ์ ๋ ฌ๋์ ๋) : O(n) ์ฅ๋จ์ (์ฝ์
์ ๋ ฌ๊ณผ ๋์ผ)Stable ์ ๋ ฌ : ์ค๋ณต ๋ฐ์ดํฐ๋ ์์๋ฅผ..
[React] ๋ฆฌ์กํธ Suspense ํบ์๋ณด๊ธฐ
[React] ๋ฆฌ์กํธ Suspense ํบ์๋ณด๊ธฐ
2024.05.06React v18 ๋ฒ์ ๋ถํฐ Suspense๋ฅผ ๊ณต์์ ์ผ๋ก ์ง์ํ๋ค. Suspense๋ ์ปดํฌ๋ํธ ๋ ๋๋ง์ ํ์ํ ํน์ ์์
์ด ์๋ฃ๋์ง ์์์์ React์๊ฒ ์๋ ค์ฃผ๋ ๋งค์ปค๋์ฆ์ด๋ค. ์ด ํน์ ์์
์ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์๊ฒ ์ง๋ง Data Fetching ๊ฐ์ ๋น๋๊ธฐ ์์
์ธ ๊ฒฝ์ฐ๊ฐ ๊ฐ์ฅ ๋ง๋ค. Suspense๋ฅผ ์ด์ฉํ๋ฉด, ๋ฐ์ดํฐ๋ฅผ ๋ค ๋ถ๋ฌ์ค์ง ๋ชปํ ์ปดํฌ๋ํธ์ ๋ ๋๋ง์ ์ ์ ์ค๋จ์ํค๊ณ Loading ํ๋ฉด ๊ฐ์ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๋จผ์ ๋ณด์ฌ์ฃผ๋๋ก ํ ์ ์๋ค. ๐ก Suspense๋ React Query, SWR ๊ฐ์ Data Fetching ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํจ๊ป ์ฌ์ฉํ ์ ์๋๋ก ์ค๊ณ๋๋ค. Data Fetching ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ต์
์ธ์๋ฅผ ์ ๋ฌํ๋ ๋ฐฉ์์ผ๋ก Suspense ๊ธฐ๋ฅ์ ํ์ฑํ ํ ์ ์๋ค. ์๋ฅผ๋ค์ด useSWR์์ ์ธ..