๐ช Programming
[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 });..
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
2024.05.12merge ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค(Rebase) โญ๏ธPR ๋ณด๋ด๊ธฐ ์ ๋ค๋ฅธ ์ฌ๋์ด ์๋ก์ด ์ปค๋ฐ์ ์ถ๊ฐํ ์ํ๋ผ๋ฉด ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํด ๋ก์ปฌ ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ์ต์ ํํ๊ณ (upstream โ origin ๋ ํฌ์งํ ๋ฆฌ ๋๊ธฐํ), ํ์ฌ ์์
์ค์ธ ๊ธฐ๋ฅ/๋ฒ๊ทธ ๋ธ๋์น์ base๋ฅผ develop ๋ธ๋์น์ ๋ง์ง๋ง ์ปค๋ฐ์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฆฌ๋ฒ ์ด์ค(Rebase) ์์
์ด ํ์ํ๋ค — ์ฐธ๊ณ ๊ธ1 | ์ฐธ๊ณ ๊ธ2 โถ ํ์ฌ ์ํ# ํ์ฌ ์์น feature-branch 8๋ฒ ์ปค๋ฐ1 - 2 - 3 - 5 (devlop) \ 4 - 6 - 7 - 8 (feature-branch)develop ๋ธ๋์น์ 1~2 ์ปค๋ฐ : ๋ก์ปฌ ๋ ํฌ์งํ ๋ฆฌ์ develop ๋ธ๋์น ์ปค๋ฐdevelop ๋ธ๋์น์ 3~5 ์ปค๋ฐ : ์๊ฒฉ(upstream) ๋ ํฌ์งํ ๋ฆฌ์์ ์๋ก..
[React] svg ํ์ผ → ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
[React] svg ํ์ผ → ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
2024.05.12๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ์ค์นyarn add "@svgr/cli"yarn add -D "@svgr/webpack" CLI ๋ช
๋ น์ด๐ก ๊ฒฝ๋ก๋ง ์
๋ ฅํ๋ฉด svg path๋ฅผ ์ง์ ํ๋ ๊ฒ๊ณผ ๋์ผ. -- double dash๋ ์ปค๋งจ๋ ์ต์
์ด ๋๋๋ค๋๊ฑธ ์๋ฏธํ๋ฏ๋ก(์ฐธ๊ณ ๊ธ) -- ๋ค์ ๊ฒฝ๋ก๋ฅผ ์
๋ ฅํ๋ฉด svg path๊ฐ ์ง์ ๋จ(์ต์
์ด ์๋ค๋ฉด ๊ตณ์ด ์๋ถ์ฌ๋ ๋จ).# config ํ์ผ์ด ์์ ๋ # svgr -d svgr ./assets/icons/raw/bulb.svg -d ./assets/icons/dist# config ํ์ผ์ด ์์ ๋# svgr --config-file -d svgr --config-file ./svgr.config.js ./assets/icons/raw/bulb.svg -d ./assets/icons/dis..
[React] ๋ฆฌ์กํธ Context API ๋ ๋๋ง ์ต์ ํํ๊ธฐ
[React] ๋ฆฌ์กํธ Context API ๋ ๋๋ง ์ต์ ํํ๊ธฐ
2024.05.11TL;DR๋ฆฌ์กํธ์์ ์ ๊ณตํ๋ ContextAPI๋ฅผ ์ฌ์ฉํ๋ฉด ์ํ๋ ์ํ(๊ฐ)๋ฅผ ์ ์ญ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค. ์ปดํฌ๋ํธ๋ผ๋ฆฌ ํน์ ์ํ๋ฅผ ๊ณต์ ํ ๋๋ ์ ์ฉํ๋ค. ํ์ง๋ง Context.Provider ํ์์์ ์ปจํ
์คํธ๋ฅผ ๊ตฌ๋
ํ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ ๊ฐ์ ๋ณ๊ฒฝํ ๋๋ง๋ค ๋ฆฌ๋ ๋๋ง ๋๋ค. Context.Provider ๊ฐ์ด ์
๋ฐ์ดํธ๋๋ฉด useContext ํ
์ด ์ต์ ์ปจํ
์คํธ ๊ฐ์ ์ฌ์ฉํด ์ปดํฌ๋ํธ ๋ฆฌ๋ ๋๋ฅผ ํธ๋ฆฌ๊ฑฐํ๊ธฐ ๋๋ฌธ์ด๋ค. ์ด์ฒ๋ผ ContextAPI๋ ๋ ๋๋ง ์ต์ ํ์ ์ผ์ผ์ด ์ ๊ฒฝ์จ์ผํ๋ ๋จ์ ์ด ์๋ค. ์ฌ๋ฌ ์ต์ ํ ๋ฐฉ๋ฒ์ค์์ ์ํ/๋์คํจ์น ๋จ์๋ก ์ปจํ
์คํธ๋ฅผ ์ชผ๊ฐ๋ ๋ฐฉ์์ด ๊ฐ์ฅ ๊ฐ๋จํ๋ค. ๋์ Provider๊ฐ ๋๋ฌด ๋ง์์ง๋ ๋จ์ (Wrapper Hell)์ด ์๋ค. Context ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ํด๋น Context.P..