nft minting, staking ํ์ด์ง๋ฅผ ๋ง๋ค๋ฉฐ NFT dApp ๋ง๋๋ ์ผ๋ จ์ ๊ณผ์ ๋ค์ ์ ๋ฆฌํด๋ณด์. minting page nft์์ ๋งํ๋ ๋ฏผํ ์ ๋๊ฐ์ง ๋ป์ด ์๋ค. ํ๋๋ ํ๋งค์ ์ ์ฅ์์ ๊ฐ์ํํ๋ก NFT๋ฅผ ๋ง๋ค์ด ๋ธ๋ค๋ ๋ป์ด๊ณ , ๋ค๋ฅธ ํ๋๋ ๊ตฌ๋งค์ ์ ์ฅ์์ NFT๋ฅผ ๊ตฌ๋งคํ๋ค๋ ๋ป๋ ๋๋ค. ์ง๊ธ ๋ค๋ฃจ๊ณ ์๋ dapp์ ๋ฏผํ ํ์ด์ง๋ NFT๋ฅผ ๊ตฌ๋งคํ ์ ์๋ ํ์ด์ง๋ฅผ ๋งํ๋ค. minting ๊ณผ์ 1. web3 ์ง๊ฐ ์ฐ๊ฒฐ web3 ์ง๊ฐ์ dpp๊ณผ ์ํธ์์ฉํ๊ณ ์ด๋๋ฆฌ์ ๋ธ๋ก์ฒด์ธ์์ ๊ฑฐ๋๋ฅผ ์ํํ๋๋ฐ ์ฌ์ฉ๋๋ค. ์ง๊ฐ ์์ฒด๊ฐ ์ํธ์์ฒด๋ฅผ ๋ณด๊ดํ๋ ๊ฒ์ ์๋๊ณ , ๋์งํธ ์์ฐ์ ์ก์ธ์คํ ์ ์๋ ์ ๋ณด๋ฅผ ์ ์ฅํ๋ค. web์์๋ ์ง์ ์ ์ผ๋ก ์ค๋งํธ ์ปจํธ๋ํธ์ ์ํธ์์ฉํ ์๋ ์๋ค. ๊ทธ๋์ JSON-
v13 ๋ณ๊ฒฝ์ฌํญ์ ๋ํด ์์๋ณด์. app/ Directory *app/ ๋๋ ํ ๋ฆฌ ๊ตฌ์กฐ๋ beta๋ฒ์ ์ด๊ธฐ ๋๋ฌธ์ ์ค์ ํ๋ก๋์ ๋ ๋ฒจ์์๋ ๊ถ์ฅ๋์ง ์๋๋ค. ๊ธฐ์กด์๋ pages ๋๋ ํ ๋ฆฌ ์์ ํ์ผ์ ์์ฑํ์ฌ Automating Routing์ ์คํํ์ง๋ง, 13๋ฒ์ ๋ถํฐ๋ app/์ด๋ผ๋ ์๋ก์ด ๋๋ ํ ๋ฆฌ๊ฐ ๋ฑ์ฅํ์๋ค. ํ์ผ ์์คํ ๊ธฐ๋ฐ์์ ๋๋ ํฐ๋ฆฌ ๊ธฐ๋ฐ ๋ผ์ฐํ ์์คํ ์ผ๋ก ์ ํํ์๋ค. ํ์ฌ๋ pages์ app ๋๋ ํ ๋ฆฌ๊ฐ ๊ณต์กดํ๋ ๋ฒ ํ ๋ฒ์ ์ผ๋ก ์ ๊ณต๋๋ค. app ๋๋ ํ ๋ฆฌ ์์๋ layout.js, page.js, head.jsํ์ผ์ด ์กด์ฌํ๋ค. *dev server๋ฅผ ๋๋ฆฌ๋ฉด ์๋์ ์ผ๋ก head.js์ layout.js๋ฅผ ์์ฑํด์ค๋ค.  Next.js๋ next.js๋ react์์ SSR์ ์ฝ๊ฒ ๊ตฌํํ ์ ์๋๋ก Vercel์์ ๋ง๋ ํ๋ ์์ํฌ์ด๋ค. Next.js๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์ด๊ธฐ ์น์ฌ์ดํธ๋ ์ฌ์ฉ์๊ฐ ๋ค๋ฅธ ํ์ด์ง๋ก ์ด๋ํ ๋๋ง๋ค ์๋ฒ์ ์์ฒญ์ ํด์ ์๋ก์ด html์ ๋ถ๋ฌ์ ๋งค๋ฒ ์๋ก๊ณ ์นจ๋๋ ๋ฐฉ์์ด์๋ค. ์ด๋ฅผ ๋ณด์ํ๊ณ ์ ๋์จ ๊ฒ์ด ๋จ์ผ ํ์ด์ง๋ก ์ต์ด ํ ๋ฒ ํ์ด์ง ์ ์ฒด๋ฅผ ๋ก๋ํ๋ SPA์ CSR๋ฐฉ์์ด๊ณ , ๋ํ์ ์ธ SPA ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ react ์ด๋ค. ํ์ง๋ง, ๊ฒ์์์ง ์ต์ ํ(seo)๋ฌธ์ ๋ ์ด๊ธฐ ํ์ด์ง ๋ก๋ฉ์ด ์ค๋ ๊ฑธ๋ฆฐ๋ค๋ ๋ฌธ์ ์ ์ด ์กด์ฌํ๋ค. ๊ฒ์์์ง๋ด์ js๋ฅผ ํด์ํ๊ธฐ ํ๋ค๊ธฐ ๋๋ฌธ์ html์์ ํฌ๋กค๋ง์ ํ๋๋ฐ, CSR๋ฐฉ์์ client์์ ํ์ด์ง๋ฅผ ๊ตฌ์ฑ
firebase ์ฌ์ฉํด์ ๊ฒ์ํ CRUD๊ธฐ๋ฅ์ ๋ง๋ค์ด๋ณด์. Firebase v9 firebase๋ ๋ฒก์๋ ๊ธฐ๋ฅ์ ํด๋ผ์ฐ๋ ์๋น์ค ํํ๋ก ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๋ฐฑ์๋์์ด ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ๋ ์ฌ์ฉํ๋ฉด ์ ์ฉํ๋ค. firebase๊ฐ ๋ฒ์ ์ ๋ฐ์ดํธ๋ฅผ ํ๋ฉด์ ๋ฌธ๋ฒ ๋ฑ์ ๋ง์ ๋ณํ๊ฐ ์๊ฒผ๋ค. firebase SDK ์ค์ ๋ฐ ๊ตฌ์ฑ firebase ํ๋ก์ ํธ ์์ฑ ํ Firebase๋ฅผ ์ด๊ธฐํํ์ฌ ์ฌ์ฉํ๋ ค๋ ์ ํ์ SDK๋ฅผ ์ฌ์ฉํ๊ธฐ .env ํ๊ฒฝ๋ณ์๋ ๋ ธ์ถ๋๋ฉด ๋ณด์์ ์ํํ๊ธฐ๋๋ฌธ์ envํ์ผ์ ํ์ฉํด์ผ ํ๋ค. ๋ณ์๋ช ์ ์์ฑ์ ๋ฌด์กฐ๊ฑด REACT_APP์ผ๋ก ์์ ํ๋ก์ ํธ ์ต์๋จ์ ์์นํ ๊ฒ ๊ฐ๋ฐ ํ๊ฒฝ์์ ๊ฐ๋ฐ์๋ฒ๊ฐ ์คํ์ค์ธ ๊ฒฝ์ฐ ํ๊ฒฝ๋ณ์ ๋ณ๊ฒฝ์ ์๋ฒ๋ฅผ ์ฌ์์ํด์ผ ์ ์ฉ๋จ create addDoc ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌํํ๋ค. addDoc(' ํค๋ฅผ ํตํด ๊ฐ์ ธ์จ DB ' , ' payload ') read read๋ query, getDocs ๋ฉ์๋๊ฐ ์๋ค.
์ฐจ์ธ๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ 'zustand'์ ๋ํด ์์๋ณด์. ์ Zustand์ธ๊ฐ? ํ๋ก ํธ ๋ถ์ผ๋ ๋ณํ๊ฐ ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๋ค. ๊ทธ ์ค์์๋ ํนํ ์ํ๊ด๋ฆฌ๋ ๋ค์ํ ํด๋ค์ด ๋ฑ์ฅํ๊ณ ๋ฐ์ ํด ๋๊ฐ๊ณ ์๋ค. ๊ฐ์ฅ ์ค๋๋๊ณ ์ ๋ช ํ ์ํ๊ด๋ฆฌ๋ฅผ ๋ ์ฌ๋ฆฌ๋ฉด ๋จ์ฐ '๋ฆฌ๋์ค'์ผ ๊ฒ์ด๋ค. ํ์ง๋ง ์์ฆ์๋ ์ฌ๋ฌ๊ฐ์ง ์ด์ ๋ก '๋ฆฌ๋์ค'๋ณด๋ค๋ ๋ค๋ฅธ ๋๊ตฌ๋ฅผ ์ ํํ๋ ์ถ์ธ๋ค. ๋ฆฌ๋์ค์ ๋จ์ ๊ฐ๋ ์ด๋ ์ฌ์ฉ๋ฒ ๋ฑ ๋ฌ๋ ์ปค๋ธ๊ฐ ๋์ ํธ์ด๊ธฐ ๋๋ฌธ์ ๋น ๋ฅธ ์์ผ๋ด์ ๋์ ํด์ผ ํ๋ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ข์ ์ ํ์ด ์๋๋ค. ๋ณด์ผ๋ฌ ํ๋ ์ดํธ ์ฝ๋(์ก์ ํ์ , ์ก์ ์์ฑํจ์, ๋ฆฌ๋์)๊ฐ ๋ง๋ค. ์์ ๊ธฐ๋ฅ์ด๋ผ๋ ๋ฆฌ๋์ค๋ฅผ ๊ตฌํํ๋ ์๊ฐ ๋ช ๊ฐ์ ํ์ผ๋ค์ ์ค๋นํด์ผ ํ๋ค. npm trend ์ฃผ๋ชฉ๋ฐ๊ณ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก 'jotai
๋ฉํ๋ง์คํฌ ํ ์คํธ ๋คํธ์ํฌ์ ์ง๊ฐ์ฃผ์, ์๊ณ ๋ฅผ ํ๋ฉด์ ๋ฟ๋ ค๋ณด์. Web3-react๋? ๋ฆฌ์กํธ์์ web3์ Dapp๊ณผ ๊ด๋ จ๋ ํน์ ๋ฐ์ดํฐ๋ฅผ ์ต์ ์ํ๋ก ์ ์งํด์ฃผ๋ state machine์ผ๋ก ๊ธฐ๋ณธ ๋ธ๋ก์ฒด์ธ API๊ฐ ethers.js์ธ react ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. *web3js web3.js๋ ๋ด๋ถ์ ์ผ๋ก HTTP๋ IPC(ํ๋ก์ธ์ค ์ฌ์ด์์ ํต์ ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ธฐ์ )๋ฅผ ํตํด JSON-RPC API๋ฅผ ํธ์ถํ๋๋ก ๋์ด์๋ค. ์ด๋๋ฆฌ์ ๋คํธ์ํฌ๋ ๋ ธ๋๋ก ๊ตฌ์ฑ๋์ด ์๊ณ , ๊ฐ ๋ ธ๋๋ ๋ธ๋ก์ฒด์ธ์ ๋ณต์ฌ๋ณธ์ ๊ฐ์ง๊ณ ์๋ค. ์ด๋๋ฆฌ์ ๋ ธ๋๋ค์ JSON-RPC๋ก๋ง ์ํตํ ์ ์๊ธฐ ๋๋ฌธ์ web3.js๋ก ๊ฐ๋ฐ์๋ค์ด ์ฝ๊ฒ ๊ฐ๋ฐํ ์ ์๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์ธํฐํ์ด์ค๋ก ์ํธ์์ฉํ ์ ์๋๋ก ๋์์ฃผ๋ ์ญํ ์ ํ๋ค.
๋ ๋ค๋ฅธ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ 'Recoil'์ ๋ํด์ ์์๋ณด์. Recoil? ํ์ด์ค๋ถ์์ ๋ง๋ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ๋ํ์ ์ธ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ 'redux'๋ react๋ง์ ์ํ ์ํ๊ด๋ฆฌ ๋๊ตฌ๊ฐ ์๋๊ธฐ์ react์ ์ต์ ํ๋์ง๋ ์์๊ณ , ๋ฌ๋์ปค๋ธ๋ ๋์๋ค. ์ด์ ๋นํด recoil์ hook์ ์จ๋ดค๋ค๋ฉด ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋ ์์ค์ด๋ค. Recoil ์ฌ์ฉํ๊ธฐ ์ ์ญ์์ ์ฌ์ฉํ ์ ์๋๋ก root์ recoilRoot ๊ฐ์ธ์ฃผ๊ธฐ atom ๊ธฐ์กด์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ฐ์ด๋ store์ ์ ์ฌํ ๊ฐ๋ ์ผ๋ก, ์ํ์ ๋จ์๋ฅผ ๋งํ๋ค. atom์ ์ํ๊ฐ ์ ๋ฐ์ดํธ๋๋ฉด, atom์ ๊ตฌ๋ ํ๊ณ ์๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ค์ state๊ฐ ์๋ก์ด ๊ฐ์ผ๋ก ๋ฆฌ๋ ๋๋ง๋๋ค. useRecoilValue ์ปดํฌ๋ํธ์ atom์ ์ฐ๊ฒฐํ๊ธฐ ์ํ ๋๊ตฌ useSetRecoilState vaule๋ฅผ ์์ ํ ์ ์๋ ํจ์๋ก, setState์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์๋ํ๋ค. use
๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ server์์ ๋น๋๊ธฐ ๋ก์ง์ฝ๋๋ฅผ ์ค์ฌ๋ณด์. React Query? state๋ฅผ ๊ด๋ฆฌํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก server์ client ์ฌ์ด์ ๋น๋๊ธฐ ๋ก์ง๋ค์ ์ฝ๊ฒ ๋ง๋ค์ด์ฃผ๋ ๋๊ตฌ์ด๋ค. ๊ทธ๋์ React Query๋ฅผ ์ฌ์ฉํ๋ฉด ๋ญ๊ฐ ์ข์๋ฐ? ์ฒซ๋ฒ์งธ, ์ผ๋ จ์ ์ฝ๋๋ฅผ ํ ์ค์ฌ์ค๋ค. ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํ ์ผ๋ จ์ ํ์์ ์ธ ์ฝ๋๋ค์ด ์๋ค. ์๋ฅผ๋ค์ด, ์๋ฒ์ ํต์ ํ๊ธฐ ์ํด์ fetchํจ์๋ฅผ ๋ง๋ค๊ณ , ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ๋ด์ state๋ฅผ ๋ง๋ค์ด์ฃผ๊ณ , ๋ฐ์์ค๋ ์ํ์ ๋ฐ๋ผ loading ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด state๋ฅผ ๋ง๋ค๊ณ ์ธํ ํด์ฃผ๋ ๋ฑ์ ์ธํธ ์ฝ๋๋ค์ด ์๋ค. ํ์ง๋ง, react query์ ํจ๊ป๋ผ๋ฉด ์ฝ๋๋ฅผ ํ๊ธฐ์ ์ผ๋ก ์ค์ผ ์ ์๋ค. ๋๋ฒ์งธ, **๋ฐ์ดํฐ๋ฅผ ์บ์์ ์ ์ฅํด๋
๋ค๋ฅธ ๋ ๋ฐฐ์ด์ ํ ๋ฐฐ์ด์ฒ๋ผ ๋ง๋ค์ด๋ณด์. ํด๊ฒฐ์ํฉ ํ๋์ฝ๋ฉ๋ ๋ถ๋ถ์ ๋งต์ ๋๋ ค์ ์์๊ฒ ๋ง๋ค์ด๋ณด์. ๋ชฉํ: ์๋ก ๋ค๋ฅธ ๋ ๋ฐฐ์ด์ ๊ฐ์ง๊ณ ํ๋์ ๋งต์ ๋๋ ค ํ๋ฉด์ ๋ํ๋ด์ผ ํ๋ค. -> zip array ํ์ฉํ๊ธฐ zip ๊ธฐ๋ณธ ์์ ์์์ ๊ฐฏ์๊ฐ ์ ํด์ ธ ์๋ ๋ฐฐ์ด, ํํํํ zip ์ ์ฉํ๊ธฐ ์ฐ์ ๋ฐ์ดํฐ์์ ํ์ํ ๋ถ๋ถ์ ๋ฝ์ ๋ฐฐ์ดํํ๋ก ๋ง๋ค์ด์ค๋ค. ์ฒซ๋ฒ์งธ ๋ฐฐ์ด์ map์ ๋๋ ค์ ๋ฐฐ์ด์ ์ฒซ๋ฒ์งธ ์์๋ก ๋ฃ์ด์ฃผ๊ณ , ๋๋ฒ์งธ ์์๋ก ์ธ๋ฑ์ค๊ฐ์ ํตํด ๋๋ฒ์งธ ๋ฐฐ์ด์ ๊ฐ์ ๋ฝ์์ฃผ๋ ํํํํ๋ก ๋ฆฌํดํด์ค๋ค. ๋ฆฌํฉํ ๋ง ํ๋ฒ ๋ ๊ฐ๊ฒฐํ๊ฒ! ์์ฑ๋ ํ๋ฉด ์ : 3 ์๋ : 1 ์ผ์ชฝ : 0 ์ค๋ฅธ์ชฝ : 1
ref๋ฅผ prop์ผ๋ก ์ ๋ฌํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์. ref forwardRef ์์๋ณด๊ธฐ ์ด์ ์ ref๊ฐ๋ ์ ๋ํด ๊ฐ๋จํ๊ฒ ์ง๊ณ ๋์ด๊ฐ์. react๋ฅผ ์ฌ์ฉํ ๋ DOM์ ์ ๊ทผํด์ผ ํ๋ ์ํฉ์ด ์ข ์ข ๋ฐ์ํ๋ค. js์์ ํน์ DOM์ ์ ๊ทผํ๊ธฐ ์ํด์ getElementById์ ๊ฐ์ DOM Selector๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ react์์๋ ref๋ฅผ ์ฌ์ฉํ๋ค. ์์ ์์์ ๊ฐ์ด ๋ถ๋ชจ์ปดํฌ๋ํธ์์ inputRef๊ฐ์ฒด๋ฅผ ์์์ธ Input์ปดํฌ๋ํธ์ ref prop์ผ๋ก ๋๊ธด๋ค. ์์ Input์ปดํฌ๋ํธ๋ ref๋ก ๋์ด์จ inputRef ๊ฐ์ฒด๋ฅผ ๋ค์ ๋ด๋ถ์ ์๋ ์๋ ๋จผํธ์ ref prop์ผ๋ก ๋๊ฒจ์ฃผ๊ฒ ๋๋ค. ํ์ง๋ง ์คํ์์ผ๋ณด๋ฉด ref๋ prop์ด ์๋๋ค ๋ผ๋ ์ค๋ฅ๊ฐ ๋ฌ๋ค. ๋ฆฌ์กํธ์์๋ key,ref์ฒ๋ผ ํน์๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋์ด ์ผ๋ฐ์ ์ธ ์ฉ๋๋ก ์ฌ์ฉํ ์ ์๋ prop์ด ์๊ธฐ ๋๋ฌธ์ด๋ค. ์ด๋ React์ปดํฌ๋ํธ์์ ref๋ฅผ prop์ผ๋ก ์ฌ์ฉํ๋ ค๋ฉด react์
useSelector, useDispatch, useCreate๋ฅผ ์ฌ์ฉํด์ ๋ฆฌ๋์ค ์ํ๋ฅผ ์กฐํํ๊ณ ์ฌ์ฉํด๋ณด์. useSelector useSelector Hook์ ์ฌ์ฉํ๋ฉด connectํจ์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ ๋ฆฌ๋์ค์ ์ํ๋ฅผ ์กฐํํ ์ ์๋ค. ๊ฐ๋ ์ ์ผ๋ก mapStateToProps์ ๋น์ทํ๋ค. connectํจ์์ useSelector ์ฐจ์ด์ connect ํจ์๋ ํด๋น ์ปจํ ์ด๋ ์ปดํฌ๋ํธ์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋ ๋ ํด๋น ์ปจํ ์ด๋ ์ปดํฌ๋ํธ์ props๊ฐ ๋ฐ๋์ง ์์๋ค๋ฉด ๋ฆฌ๋ ๋๋ง์ด ์๋์ผ๋ก ๋ฐฉ์ง๋์ด ์ฑ๋ฅ์ด ์ต์ ํ๋๋ค. ์ด์๋นํด, useSelector๋ฅผ ์ฌ์ฉํ์ฌ ๋ฆฌ๋์ค ์ํ๋ฅผ ์กฐํํ์ ๋๋ ์ฑ๋ฅ ์ต์ ํ๊ฐ ์ด๋ฃจ์ด์ง์ง ์๊ธฐ๋๋ฌธ์ React.memo๋ฅผ ์ปจํ ์ด๋ ์ปดํฌ๋ํธ์ ์ฌ์ฉํด์ค์ผํ๋ค. export default React.memo(Container); useDispatch useDispatch Hook์ ์ปดํฌ๋ํธ ๋ด๋ถ์์ ์คํ ์ด์ ๋ด์ฅํจ์ dispatch๋ฅผ
๋ฆฌ๋์ค๋ฅผ ํธ๋ฆฌํ๊ฒ ์ฌ์ฉํ ์ ์๊ฒ ๋์์ฃผ๋ ๐์ข ํฉ์ ๋ฌผ์ธํธ '๋ฆฌ๋์ค ํดํท'์ ๋ํด ์์๋ณด์. Redux Toolkit์ด๋? ๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ๋ค๋ณด๋ฉด ์ก์ ํ์ ,์ก์ ์์ฑํจ์, ๋ฆฌ๋์ ๋ฑ ๋ฐ๋ณต๋๋ ์ฝ๋,์ฆ ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋๋ฌธ์ ํผ๋ก๊ฐ์ ๋๋ ์ ์๋ค. ์ด๋ ๋ฆฌ๋์ค ํดํท์ ์ฌ์ฉํ๋ฉด ์ฝ๋๋ฅผ ์ข ๋ ๊ฐ๊ฒฐํ๊ฒ ๋ง๋ค์ด ์ค ์ ์๋ค. ๋ฆฌ๋์ค ํดํท์ ๋ฆฌ๋์ค์ ์ข ํฉ์ ๋ฌผ์ธํธ๋ก redux thunk, immer, createaction ๋ฑ์ด ๋ด์ฅ๋์ด ์๋ค. configureStore toolkit์ ์ฌ์ฉํ๊ธฐ ์ ์๋ createStore()๋ฅผ ํธ์ถํ๊ณ root reducerํจ์๋ฅผ ์ ๋ฌํ์ฌ redux store๋ฅผ ์ฌ์ฉํ๋ค. Toolkit์ configureStore๋ createStore๋ฅผ ํ์ฉํAPI๋ก createStore๋ฅผ ๋ํํ์ฌ ๋ง๋ค์ด์ง ํจ์์ด๊ธฐ๋๋ฌธ์ ๊ธฐ๋ณธ์ ์ผ๋ก createStore์ ๋์ผํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค.(store ์์ฑ) (no toolkit) (with toolkit) crea
'๋ฆฌ๋์ค ๋ฏธ๋ค์จ์ด'๋ฅผ ์ฌ์ฉํด์ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํด๋ณด์. ๋ฆฌ๋์ค ๋ฏธ๋ค์จ์ด๋? ๋ฏธ๋ค์จ์ด๋ ์ก์ ๊ณผ ๋ฆฌ๋์ ์ฌ์ด์ ์ค๊ฐ์๋ก, ์ก์ ์ ๋์คํจ์นํ์ ๋ ๋ฆฌ๋์์์ ์ด๋ฅผ ์ฒ๋ฆฌํ๊ธฐ์ ์์ ์ฌ์ ์ ์ง์ ๋ ์์ ๋ค์ ์คํํ ์ ์๊ฒ ํด์ค๋ค. ๋ฆฌ๋์ค๋ ์ก์ ๊ฐ์ฒด๊ฐ ์์ฑ๋๊ณ , ๋์คํจ์น๋ฅผ ํตํด ์คํ ์ด์ ์ํ ๋ณํ๋ฅผ ์๋ฆฌ๋ฉด ๋ฆฌ๋์๋ ์ ํด์ง ๋ก์ง์ ๋ฐ๋ฅธ ์ก์ ์ ์ฒ๋ฆฌํ ํ ์๋ก์ด ์ํ๊ฐ์ ๋ฐํํ๋ ๋๊ธฐ์ ์ธ ํ๋ฆ์ ํตํด ์ด๋ค์ง๋ค. ํ์ง๋ง ์ธ๋ถ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ ๋น๋๊ธฐ์ ์ธ ์์๋ค์ ์ฒ๋ฆฌํด์ผ ํ ๊ฒฝ์ฐ๊ฐ ์์ํ ๋ฐ ์ด๋ ์ฌ์ฉํ๋ ๊ฒ์ด '๋ฆฌ๋์ค ๋ฏธ๋ค์จ์ด'์ด๋ค.  ์ฌ์ฉ์์ ๋ก๊ทธ์ธ ์ํ๋ ๊ถํ์ ๋ฐ๋ผ ์ ๊ทผํ ์ ์๋ ๊ฒฝ๋ก๊ฐ ๋ค๋ฅด๋ค. ์ด ๊ณผ์ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด์ PrivateRoute๋ฅผ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด, ๋ก๊ทธ์ธํ ์ ์ ์๊ฒ๋ ์ธ์ฆ์ด ์๋ฃ๋ ๊ฒฝ์ฐ์๋ง ์ ๊ทผํ ์ ์๋ ํ์ด์ง(๋ง์ดํ์ด์ง)๋ฅผ, ๊ทธ๋ ์ง ์์ ์ฌ์ฉ์๊ฐ ์ ๊ทผํ๊ณ ์ ํ๋ค๋ฉด ๋ค๋ฅธ ํ์ด์ง๋ก redirection(ํ์๊ฐ์ ํ์ด์ง)ํ๋ค. ์ปดํฌ๋ํธ ๋ํ ๋ ๋๋งํ ์ปดํฌ๋ํธ๋ฅผ prop์ผ๋ก ๋๊ฒจ๋ฐ์ ํ, ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋ ํ ํฐ์ผ๋ก ์ธ์ฆ์ด ํ์ธ๋ ์ ์ ๋ค๋ง ํด๋น ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌํดํด์ฃผ๋๋ก ํ๋ค. ์ปดํฌ๋ํธ ๊ตฌ์กฐ ๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ ๋ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ํจํด์ ํ๋ ์ ํ ์ด์ ์ปดํฌ๋ํธ + ์ปจํ ์ด๋ ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฆฌํ๋ ๊ฒ์ด๋ค. ์ด ํจํด์ ์ฌ์ฉํ๋ฉด ์ฝ๋์ ์ฌ์ฌ์ฉ์ฑ์ด ๋์์ง๋ ์ฅ์ ์ด ์๋ค. ํ๋ ์ ํ ์ด์ ๋ ์ปดํฌ๋ํธ: ๋จ์ํ props๋ฅผ ๋ฐ์์ ํ๋ฉด์ ui๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ๋ง ํ๋ ์ปดํฌ๋ํธ ์ปจํ ์ด๋ ์ปดํฌ๋ํธ: ๋ฆฌ๋์ค์ ์ฐ๋๋์ด ์๋ ์ปดํฌ๋ํธ๋ก ๋ฆฌ๋์ค๋ก๋ถํฐ ์ํ๋ฅผ ๋ฐ์์ค๊ฑฐ๋ ๋ฆฌ๋์ค ์คํ ์ด์ ์ก์ ์ ๋์คํจ์นํ๊ธฐ๋ ํ๋ค.
ํ์ ์ปดํฌ๋ํธ ๊ฐ์ ์ํ ์ ๋ฌ์ Context API๋ฅผ ํตํด ์คํํด๋ณด์. ๋ด๊ฐ ์ํ๋ ์์ ์ ํ์ ์ปดํฌ๋ํธ(quiz, result) ๊ฐ์ ๋ฐ์ดํฐ ์ ์ก์ด๊ณ , ๊ฒ์ํด ๋ณธ ๊ฒฐ๊ณผ ์ ์ญ์ํ๊ด๋ฆฌ๋ฅผ ํ ์ ์๊ฒ ํด์ฃผ๋ context api๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค๋ ๊ฒ์ ์๊ฒ ๋์๋ค. Context API๋? ์ ์ญ์ํ๊ด๋ฆฌ๋ก ์ ๋ช ํ ๋ฆฌ๋์ค์ ๋ง์ฐฌ๊ฐ์ง๋ก ๊ธ๋ก๋ฒํ๊ฒ ์ํ๊ด๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค. Context ApI๋ ๋ฐ๋ก ์ค์นํ์ง ์์๋ ๋ฆฌ์กํธ์์ ๊ธฐ๋ณธ์ผ๋ก ์ง์ํ๋ API๊ธฐ ๋๋ฌธ์ ํธ์ถํด์ ์ฐ๊ธฐ๋ง ํ๋ฉด๋๋ค. *Context API vs Redux Context๋ ์๋จ์ผ ๋ฟ ์ํ๊ด๋ฆฌ ์์ฒด๋ useState์ useReducer ๋ก ํ๊ฒ ๋๋ค. ๋ฆฌ๋์ค์์ ์ฃผ์ ์ฐจ์ด๋ '์ฑ๋ฅ'์ด๋ค. Redux๋ ์ปดํฌ๋ํธ์์ ์ ์ญ์ํ์ ํน์ ๊ฐ์ ์์กดํ๊ฒ ๋ ๋ ํด๋น ๊ฐ์ด ๋ฐ๋ ๋์๋ง ๋ฆฌ๋ ๋๋ง์ด ๋๋๋ก ์ต์ ํ๊ฐ ๋์ด์๊ธฐ ๋๋ฌธ์ ์ ์ญ์ํ ์ค ์์กดํ์ง ์๋ ๊ฐ์ด ๋ฐ๋๊ฒ ๋ ๋์๋ ์ปดํฌ๋ํธ์์ ๋ญ๋น ๋ ๋๋ง์ด ๋ฐ์ํ์ง
๋ฐ์ดํฐ๋ก ๋ฐ์์จ ๋ฌธ์์ด์ ์ค๋ฐ๊ฟ์ ์ ์ฉํด ์ํ๋ ํํ๋ก ๋ง๋ค์ด๋ณด์. API๋ฅผ ํตํด ๋ฐ์์ค๋ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๋ ์ํฉ. ์ํ๋ ๊ตฌ์กฐ ์ค์ ๋ ๋๋ง๋ ๊ตฌ์กฐ ์๋ ์ ๊ท์์ ํ์ฉํ replace ๋ฉ์๋ ๋ฐฑ์๋์๊ฒ ๋์ด์ฐ๊ธฐ ํ ๋ถ๋ถ๋ง๋ค ๋ฅผ ๋ฃ์ด๋ฌ๋ผ๊ณ ๋ถํํ๊ณ , repalce๋ฉ์๋๋ก ์ ๋์ด์ฐ๊ธฐ๋ก ๋ฐ๊พธ๋ ค๋ ์๋๋ฅผ ํ๋ค. ๋ ๋๋ง์ด ๋์ง ์๋๋ค... next... ํด๊ฒฐ๋ฐฉ๋ฒ step1. ๋ฐ์ดํฐ ํํ ํ์ ํ๊ธฐ ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ฉด ๋ชจ๋ ๋ฌธ์์ด๋ก ์ฒ๋ฆฌ๋์ด ๋ค์ด์ค๋ ๊ฒ์ ํ์ธํ ์ ์์๋ค. ๋ด๊ฐ ๋ง๋ค์ด์ผ ๋ ํํ๋ ์ด๋ค. step2. ๊ธฐ์ค์ผ๋ก split ํด์ฃผ๊ธฐ step3. React jsx์ ์ ์ฉํ๊ธฐ map์ผ๋ก ์์ ํ๋ ํ๋๋ฅผ ๋๋ฉด์ ์ฌ์ด์ ๋ก ๋์ด์ฐ๊ธฐ๋ฅผ ๋ง๋ค์ด์ฃผ์๋ค.
httpํต์ ์ ์ํ API๋ก ๊ธฐ์กด์ ์ฌ์ฉํด์ค๋ fetch ๋์ 'axios'๋ฅผ ๋ฆฌ์กํธ์ ์ฌ์ฉํด๋ณด์. Axios Promise๋ฅผ ์ฌ์ฉํ๋ http๋น๋๊ธฐ ํต์ ๋ชจ๋๋ก, ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ํจํค์ง ์ค์น๊ฐ ํ์ํ๊ณ , npm i axios -g ํ์ํ ๊ณณ์ importํ์ฌ ๋ชจ๋์ ๋ถ๋ฌ์์ผํ๋ค. import axios from 'axios' fetch๊ณผ ๋ฌ๋ฆฌ, axios๋ json์ ์๋์ผ๋ก ๋ณํํด์ฃผ๊ธฐ ๋๋ฌธ์ jsonํ ์ฝ๋๊ฐ ๋ถํ์ํ๋ค. axios์ ๋น๋๊ธฐ ์ฒ๋ฆฌํ๊ธฐ ์์์ ๋งํ๋ฏ์ด axios๋ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก HTTP๋ฐ์ดํฐ ์์ฒญ์ ํ๊ธฐ ๋๋ฌธ์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ณผ์ ์ด ํ์ํ ๋๊ฐ ์๋ค. async await ์ฌ์ฉ `Warning: An effect function must not return anything besides a function, which is used for clean-up. ` useEffectํจ์๋ ๋ค๋ฅธ ํจ์๋ฅผ ๋ฐํํ๋ฉด ์๋๋ค.
useState + ํ์ดํ useState()์ ๊ฐ์ด Generics๋ฅผ ์ฌ์ฉํ์ฌ ํด๋น ์ํ๊ฐ ์ด๋ค ํ์ ์ ๊ฐ์ง๊ณ ์์์ง ์ค์ ํ๋ฉด ๋๋ค. ํจ์ํ ์ปดํฌ๋ํธ๋ ํ์ ์คํฌ๋ฆฝํธ์์ด ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ๊ฒ๊ณผ ๋ณ ์ฐจ์ด๊ฐ ์๋ค. hooks๋ class ์ปดํฌ๋ํธ์ ๋ฌ๋ฆฌ, useState๋ฅผ ์ฌ์ฉํ ๋ Generics๋ฅผ ์ฌ์ฉํ์ง ์์๋ ํ์ ์คํฌ๋ฆฝํธ๊ฐ ํ์ ์ ์ ์ถํ๊ธฐ ๋๋ฌธ์ ์๋ตํด๋ ์๊ด์๋ค. useState + Generics๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ๊ทธ๋ ๋ค๋ฉด useState๊ฐ ํ์ ์ ์ง์ ํด์ผํ ๋๋ ์ธ์ ์ผ๊น? ์ํ๊ฐ null์ผ ์๋ ์๊ณ , ์๋์๋ ์์๋ Generics์ ์ฌ์ฉํ ์ ์๋ค. useState์์ ๋น๋ฐฐ์ด์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ํ์ดํ ๋ฌธ์ ๋ฅผ ์ผ์ผํจ๋ค. ts๋ด์์ ํด๋น ๋ฐฐ์ด์ด ์ด๋ค ํ์ ์ผ๋ก ์ด๋ฃจ์ด์ง ๋ฐฐ์ด์ธ์ง ์ถ๋ก ํ์ง ๋ชปํ๊ณ 'never'๋ฅผ ๋ณด์ฌ์ค๋ค. ์ด ๊ฒฝ์ฐ์๋ Generics๋ฅผ ์ฌ์ฉํ์ฌ ํด๊ฒฐํ๋ค. ์ด์ธ์๋ ์ํ์ ํ์ ์ด ๊น๋ค๋ก์ด ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง ๊ฐ์ฒด์ด๊ฑฐ