
๋ฌดํ์คํฌ๋กค ์ด๋ฒคํธ๊ฐ ๊ณ์ ๋์ํ๋ฉด์ ๋ฐ์ํ ๋ฌธ์ ์ ๊ทธ ํด๊ฒฐ ๊ณผ์ ์ ์ค์ ์ ์ผ๋ก ์ค๋ช ํ์ด์.
๊ฐ๋ฐ ์ค props์ ํ์ ์ด ๋ช ์๋์ง ์์ ๋ฐ์ํ ๋ค์ ์๋ฌ๋ฅผ ํด๊ฒฐํ์ต๋๋ค: handleSubmit' is missing in props validation PropTypes๋ฅผ ์ค์ ํ์ฌ ์ปดํฌ๋ํธ์ ์์ ์ฑ์ ๋์ด๊ณ , ํ์ ๊ด๋ จ ๋ฒ๊ทธ๋ฅผ ์ฌ์ ์ ๋ฐฉ์งํ์ต๋๋ค! ๐
React ์ปดํฌ๋ํธ์์ key prop์ ์ง์ ์ ๊ทผํ๋ ค ํ ๋ ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ๊ณ ๊ฐ ๋ฐ์ํ์ต๋๋ค ๐
๐จ ๋ฌธ์ ์ํฉ ํ๋ก์ ํธ ์งํ์์ React ์ปดํฌ๋ํธ์์ PropTypes ์ ์ ์ ๋ค์๊ณผ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ์ต๋๋ค!
๋ฏธ๋ ํ๋ก์ ํธ ํฌ์ผ๋ชฌ ๋๊ฐ์์ ์ค๊ฐ์ ์์นํ ํฌ์ผ๋ชฌ์ ์ญ์ ํ ๋ ์ ํ ์ธ๋ฑ์ค(selectedIdx)๊ฐ ๋ถ์ ์ ํ๊ฒ ๊ฐ์ํ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
React ์ปดํฌ๋ํธ์ return๋ฌธ ์์์ switch๋ฌธ์ ์ง์ ์ฌ์ฉํ๋ ค๋ค ๋ฐ์ํ ์๋ฌ..React ์ปดํฌ๋ํธ์ return๋ฌธ์ ์ ์ธ์ ์ด์ด์ผ ํจ!
React ํ๋ก์ ํธ์์ Kakao SDK๋ฅผ ์ฌ์ฉํ ๋ ๋ค์๊ณผ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ์ต๋๋ค

์ํ ๋ฑ๋ก/์์ ํ์ด์ง์์ ๊ธฐ์กด ์ํ ์ ๋ณด๋ฅผ ๋ถ๋ฌ์ฌ ๋, ์๋ฌด๋ฐ ๋ก์ง์ ํ์ง์์๋ alert ๊ฒฝ๊ณ ๋ฌธ๊ตฌ๊ฐ ๊ณ์ ๋จ๊ณ ๋ฌดํ ๋ฃจํ๊ฐ ๋ฐ์ํ๋ค...
Tanstack Query์ useQuery๋ฅผ ์ฌ์ฉํ๋๋ฐ ๋ฐํ๋ ๋ฐ์ดํฐ๊ฐ data.data์ ๊ฐ์ด ์ค์ฒฉ๋์ด ์์๋ค. return { data, error }; ์ฝ๋๊ฐ ๋ฌธ์ ๊ฐ ๋๋ ์ด์ ๋ ์ด์ค ๋ํ(double wrapping) ๋๋ฌธ์ด๋ค
zsh: command not found: yarn์ด์ ํฌ์คํธ, yarn์ ์๋ชป yarn install ํ๋๊ฒ์ด ํ๊ทผ์ธ์ง ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. yarn์ผ๋ก ์ค์ ๋ ์ธ๋ถ ํ๋ก์ ํธ๋ฅผ yarn ๋ช ๋ น์ด๋ฅผ ์์ํ๋.. ์๋์ ๊ฐ์ ๊ฒฝ๊ณ ๋ฉ์์ง๊ฐ ์ถ๋ ฅ๋์๋ค.

์ค๋ Next.js ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ํ๊ฒฝ๋ณ์ ์ฌ์ฉ ๋ฐฉ์์ ๋ํด ๋ค์ ํ๋ฒ ํ์ธํ๋ค. ๋ํ next js๋ ์ธ๋ถ ๋งํฌ๋ฅผ ์ฌ์ฉ ์์ ๋ฐ๋ก config ํ์ผ์ ์ ์ํด๋์ด์ผ ํ๋ค.
Next.js์์ use() ์ฐ๋ค๊ฐ generateMetadata()์์ ํฐ์ง ๊ฒฝํ๋ด. ์ ์ ๋๋์ง, ์ธ์ use() ์ฐ๊ณ ์ธ์ await ์จ์ผ ํ๋์ง ์ฌ๋ฌ์ฐจ๋ ์๋ํด๋ณด๋ฉด์ ์์๋ธ ๊ฒ๋ค ์ ๋ฆฌํด๋ดค์ด์
Next.js์์ next-themes๋ก ๋คํฌ๋ชจ๋ ๊ตฌํ ์ค ๋ฐ์ํ ํ์ด๋๋ ์ด์ ๋ถ์ผ์น ์ค๋ฅ ํด๊ฒฐ๊ธฐ. SSR๊ณผ CSR ์ฐจ์ด๋ก ์ธํ ๋ฌธ์ ์์ธ์ ๋ถ์ํ๊ณ suppressHydrationWarning์ ํ์ฉํ ํด๊ฒฐ ๊ณผ์ ์ ์ ๋ฆฌํ์ต๋๋ค.
ํ ํ๋ก์ ํธ๋ฅผ ์งํ์ค์ ๋ง๋ ํธ๋ฌ๋ธ ์ํ .. ๋ผ์ฐํฐ ํธ๋ค๋ฌ๋ฅผ ํธ์ถํ๋๋ฐ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค์ง ๋ชปํ๋ ๋ฌธ์ ๊ฐ ๋ฐ์..
๋ฌธ์ ํ์๊ณต์ ํ๊ธฐ ๋ชจ๋ฌ์ ์ฒ์ ํด๋ฆญํ ๋ ๋ชจ๋ฌ์ด ๋ฐ๋ก ๋ซํ๋ ํ์์ด ๋ฐ์ํ์ฌ ํด๊ฒฐ๊ณผ์ ์ ๊ธฐ๋กํ์์ต๋๋ค..
ํด๋ผ์ด์ธํธ ์ฌ์ด๋์์ ๊ณ์ ๋ณ ํ์ด์ง ๋ถ๊ธฐ ์ฒ๋ฆฌ ์ ์ด๊ธฐ ๋ ๋๋ง ๊น๋นก์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ๊ณผ์ . ๋น๋๊ธฐ ์ํ ํ๋จ์ผ๋ก ์ธํ ์๋ชป๋ UI ๋ ธ์ถ์ ๋ก๋ฉ ์ํ ๊ด๋ฆฌ๋ก ํด๊ฒฐํ๊ณ , ์๋ฒ ์ฌ์ด๋ ๋ฆฌ๋ค์ด๋ ํธ์ ํ์์ฑ์ ๊นจ๋ฌ์ ํธ๋ฌ๋ธ์ํ ์ ๋๋ค.
"๋ชจ๋ฐ์ผ์์ ์ ์ ๋๋ฉ์ด์ ์ด?" useState ์ด๊ธฐ๊ฐ ํ์ด๋ฐ ๋ฌธ์ ๋ฅผ lazy initialization์ผ๋ก ํด๊ฒฐํ React ๋ ๋๋ง ์ฌ์ดํด ์ดํด๊ธฐ.
TestPage์์ ์ ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค์ง ๋ชปํจํ์ด์ง ์๋ก๊ณ ์นจํ๋ฉด user store ๋ฐ์ดํฐ๊ฐ ์ฌ๋ผ์งLayout ์ปดํฌ๋ํธ์์ ๋ฐ๋ณต์ ์ธ API ํธ์ถ ๋ฐ์undefined๊ฐ ์ฐํ๋ ๋ฌธ์ ๋ฐ์
๋ฌธ์ ์ํฉ ์ฌ์ฉ์๊ฐ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ ํ ๊ฐํ์ ์ผ๋ก `blob:https://uuno.vercel.app/xxx:1 GET blob:https://uuno.vercel.app/xxx net::ERRFILENOT_FOUND`์ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ฉฐ ์ด๋ฏธ์ง๊ฐ ํ์๋์ง ์๋
"์ ์ ๋์ง?" Tailwind ๋์ ํด๋์ค๋ช ๋ฌธ์ ๋ฅผ JIT ์ปดํ์ผ ์ดํด์ ์ ์ ๋งคํ์ผ๋ก ํด๊ฒฐํ ์ฝ์ง๊ธฐ.
React Router๋ฅผ ์ฌ์ฉํ ํ๋ก์ ํธ์์ ์์ธ ํ์ด์ง(/product/:id)์์ ๋ฉ์ธ ํ์ด์ง(/)๋ก ๋ค๋ก๊ฐ๊ธฐ๋ฅผ ํ์ ๋, ํค๋ ๋ก๊ณ ํด๋ฆญ ์ ์คํฌ๋กค์ด ์ฌ์ฐจ ๋์ํ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค
uuno ํ๋ก์ ํธ๋ฅผ ์งํํ๋ค๊ฐ ๋ฐ์ํ ๋ฌธ์ ๋ค์ ๊ธฐ๋กํ๊ณ ์ ์ ๋ฆฌํด๋ณด์์ต๋๋ค.
ํธ๋ฌ๋ธ ์ํ : React ๋ฌดํ ๋ ๋๋ง ๋ฌธ์