์ธ์คํ๊ทธ๋จ ํด๋ก ์ฝ๋ฉ ํ๋ก์ ํธ ์์ ์ค, ๋๋ณด๊ธฐ ๋ฒํผ์ ํ ๊ธ ํด๋ฆญ์ ๋ฉ๋ด์ฐฝ์ด ๋จ๊ณ ๋ซํ๋๋ก ๋ง๋ค์ด๋์ ์ํ์ด๋ค. ์ฌ๊ธฐ์ ๋๋ ๋ฉ๋ด์ฐฝ ์ธ์ ์์ญ์๋ ํด๋ฆญํ ์ ๋ฉ๋ด์ฐฝ์ด ๋ซํ๋๋ก ํ๊ณ ์ถ์ดํ๋ค. ์ฐพ๋ ๋ด์ฉ์ค, ๋จ์ํ๊ฒ ์ ์ฒด์์ญ์ ํ๊ทธ๋ก ๊ฐ์ผ ํ ํด๋น ์ ์ญ ํ๊ทธ์ onClick
next ํ๋ก์ ํธ๋ฅผ ์์ํ๋ ค ์ด๊ธฐ ์ธํ ์ค, ๋ค์๊ณผ ๊ฐ์ eslint ์๋ฌ ๋ฌธ๊ตฌ๊ฐ ๋ด๋ค.์ด๊ธฐ eslintrc.json ๋ ๋ค์๊ณผ ๊ฐ์ด ์๋์ผ๋ก ์ค์ ๋์ด์๋ ์ํฉ์ด๋ค.next.js ์ด๊ธฐ ์ธํ (eslint, prettier) ๊ด๋ จ ๊ธ์ ์์นํ์๋๋ฐ, ์์ ๋ถ๋ถ๋ง์ผ๋ก ์๋ฒฝํ๊ฒ
์คํฌ๋กค ๊ธฐ๋ฅ์ ๋ง์์ผํ๋ ์ํฉ์์ ๋๋ถ๋ถ์ body ์ overflow-y: hidden ์ ์ฃผ๋ ๋ฐฉ๋ฒ์ด ์ ์๋์ง๋ง, ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ด๋ฅผ ์ฒ๋ฆฌํด์ผํ๋ค.์ฒ์์ ์๋์ ๊ฐ์ด ์ด๋ฒคํธ๋ฅผ ์ฃผ์์ง๋ง ์๋ํ์ง ์์๋ค ใ ๋๋ฒ์งธ ์๋๋ก ์๋์ ๊ฐ์ด ๋ค๋ฅธ ์ด๋ฒคํธ์๋ ์
์ฌ์ฉ์ ์ ๋ ฅํผ์ ์ฌ๋ฌ ๋จ๊ณ๋ก ์์ฑํ ์ ์๋ ๋ถ๋ถ์ ๋ ์ด์ด ํ์ ์์ผ๋ก ๋์ด์ง๋๊ฒ์ด ์๋, ๋ธ๋ผ์ฐ์ ์์์๋ ๋ค๋ก๊ฐ๊ธฐ, ์์ผ๋ก ๊ฐ๊ธฐ๊ฐ ๊ฐ๋ฅํ ๋๋ฉํ์ด์ง ํ์์ผ๋ก ๋ง๋ค๊ณ ์ถ์๋ค. ์๋์ ๊ฐ์ ์ฌํญ๋๋ฌธ์ด์๋ค.4๊ฐ์ ํ์ด์ง๋ก ๋ถ๋ฆฌํ๋ฉด ํ์ด์ง ์ด๋ ์ ์ด์ ์ ์ ๋ ฅํ ์ฌ์ฉ์์ ์
์ด๋ฏธ ํํ์ด์ง ์คํฌ๋กค์ด ๊ตฌํ๋์ด์๋ ์ํํน์ ํ์ด์ง๋ด์์ ์ฌ๋ผ์ด๋๊ฐ ์ธ๋ก๋ก ์คํฌ๋กค๋๋ ๊ตฌ์กฐ๋ก ๋ง๋ค์ด์ผ ํ๋๋ฐ, ํํ์ด์ง ์คํฌ๋กค ๊ธฐ๋ฅ๊ณผ ๊ฒน์ณ ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ๊ตฌํํ๋๋ฐ ์ฝ์ง ์์๋ค..ํด๋น ํ์ด์ง์ ๋๋ฌํ๋ฉด body ์ ์คํฌ๋กค์ ๋ง์ ํ ์ฌ๋ผ์ด๋๋ฅผ ์คํํ๊ฒ ํ๊ณ , ์ฌ๋ผ์ด๋
select ๋ฐ์ค์์ ํ๋ชฉ์ ์ข ๋ฅ ๊ฐ์๋ฅผ ์ ๋ ฅํ๋ฉด, ๊ฐ์์ ๋ฐ๋ผ input ์นธ์ด ์ถ๊ฐ๋๋ ๊ธฐ๋ฅ์ ๊ตฌํํด๋ณด์๋ค. (ํ๋ชฉ์ 4๊ฐ๊น์ง ์ ๋ ฅ ๊ฐ๋ฅ)๊ฐ์๋ฅผ ๋ณ๊ฒฝ์, ๊ฐ์๊ฐ ์ ์ด์ง๋ฉด ์ ์ด์ง ๊ฐ์๋งํผ ๋ค์์๋ถํฐ input ์ญ์ , ์ ๋ ฅ๊ฐ์ด ๊ฐ์ด ์ ์ถ๋ ์ ์์ผ๋ฏ๋ก ๊ทธ์ ๋ฐ๋ฅธ valu
pagination ์ bullets ์์๋ฅผ css ์ปค์คํ ํ๋๊ฒ์ด ์๋, ํน์ดํ ๋ชจ์์ ์์ ๋ค๋ฅธ ๋ฒํผ์ pagination ์ผ๋ก ๋ง๋ค๊ณ ์ถ์ด svg ๋ฅผ ์ฌ์ฉํ๋ค. ํ์ง๋ง ๋ง์ ๋๊ด์ด ์์๋๋ฐ, ๊ธฐ์กด ๋ด์ฅ๋ pagination ์ ์ด๋ค๋ฉด ์คํ์ผ๋ง ๋ฐ๊พธ๋ฉด ๋์ง๋ง ์์
์์๋ฃฉ ์ด๋ฉ์ผ ์๋น์ค์ ์๋ช ์ ๋ฑ๋กํ ๋, ์ด๋ฏธ ๋ง๋ค์ด์ง html ์ ๊ทธ๋๋ก ์๋ช ์ ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ ํ ์ ์๋ ๊ธฐ๋ฅ์ ๋ง๋ค๊ณ ์ ํ๊ณ ์ด๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํ๋ คํ๋ค.์ผ์ชฝ form ์ ์ด๋ฆ, ๋ฒํธ ๋ฑ์ ์ ๋ ฅํ๋ฉด ์ค๋ฅธ์ชฝ ํ๋ฉด์ ๊ทธ๋๋ก ์ ๋ณด๊ฐ ์คํ์ผ์ด ์ ํ์ง ์ฑ ๋ฐ์๋จ์์ฑ๋
ํ์๊ฐ์ ํญ์์ ๋น๋ฐ๋ฒํธ๋ฅผ ์ ๋ ฅ ํ ํด๋น ๋น๋ฐ๋ฒํธ๊ฐ ๋ง๋์ง ํ ๋ฒ ๋ ํ์ธํ๋ โ๋น๋ฐ๋ฒํธ ํ์ธโ ์ธํ์ ์์ฑํ๋ค. react-hook-form ํ๊ฒฝ์์ useController ๋ฅผ ํตํด Input ์ปดํฌ๋ํธ๋ก ๋ง๋ ์ํฉ์ด๋ค.๋น๋ฐ๋ฒํธ๊ฐ ๋ง์ง ์์ ์ '๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง
์ฝ๊ด๋์ ํ์ด์ง๋ฅผ ๋ง๋ค๋, ์์ฝ๋์ธ ํํ๋ก ์ฝ๊ด๋ด์ฉ์ ํด๋ฆญํ๋ฉด ํ์ธํ ์ ์๋๋ก ํ๊ณ ์ฒดํฌ๋ฐ์ค์ ์ ๋ชฉ์ ๋ณด์ด๋ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๊ณ ์ถ์๋ค.โ ์ด์ฉ์ฝ๊ด์์ ๋๋ฅผ ์ ์๋ ์ ๋ชฉ๋ฒํผ๊ณผ ์ฒดํฌ๋ฐ์ค๋ ๊ทธ๋๋ก ๋ ์ํ๋ก, ์ปจํ ์ธ ๋ง ์ด๋ฆฌ๊ณ ๋ซํ๋ ๊ตฌ์กฐํ๋์ ๊ธฐ๋ฅ์ ํ๋ ์ปดํฌ๋ํธ ๋ด ์กด์ฌํ
ํ ์คํธ๋ฅผ ๋ณต์ฌํ๋ ๋ฒํผ ๊ธฐ๋ฅ์ด ์์ด ๋ฆฌ์กํธ ํ๊ฒฝ ๋ณต์ฌ๊ธฐ๋ฅ์ ์ง์ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ฉํด ์๋์ ๊ฐ์ด ์์ ํ์๋ค.ํ์ง๋ง ํด๋น ๋ฒํผ์ด ๋ค๋ฅธํ์ด์ง์์๋ ์ค๋ณต ์ฌ์ฉ๋์ด ์ปดํฌ๋ํธ๋ก ๋ค์ ์ฌ๊ตฌ์ฑํ์ฌ ์์ ํด๋ณด์๋ค.๋ณต์ฌ๊ฐ ๋์๋ค๋ ์๋ฆผ์ ๋์ด ํ 2์ด ๋ค์
next ํ๋ก์ ํธ์์ ์ธ๋ถ์์ ๊ฐ์ ธ์ค๋ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ๋ ์์ ์ค ์ด๋ฏธ์ง๊ฐ ์๋จ๋ ํ์์ด ๋ฐ์ํ๋ค.์ด๋ฏธ์ง url ์ ์ ๊ฐ์ ธ์์ ธ ์๋ฒ์ชฝ ๋ฌธ์ ๋ ์๋๊ฒ ๊ฐ์๊ณ , src๊ฒฝ๋ก๊ฐ โ/\_next/img~ ์ ๊ฐ์ด ์ ์์ ์ด์ง ์๊ฒ ๋ ๋๋ง๋์ด์์๋ค.๊ตฌ๊ธ๋ง ๊ฒฐ๊ณผ ๊ทธ ์์ธ์, N
TailwindCSS ๋ฅผ ์ฌ์ฉํ๋๋ฐ ์๊พธ className={} ๊ฐ์ฒด ํํ๋ก ์๋์์ฑ๋๋ ์ ์ด ๋๋ฌด ๋ถํธํด์ ์ค์ ์ ๋ฐ๊พธ๊ณ ์ ํ๋ค. ๋จผ์ ํ์ฅํ๋ก๊ทธ๋จ์ด ์์ธ์ธ๊ฐ ์ถ์ด ๋ชจ๋ ๋นํ์ฑํ ์์ผ๋ดค์ง๋ง, ์ฌ์ ํ ์๋์์ฑ ๊ธฐ๋ฅ์ ๊ทธ๋๋ก์๊ณ ์ด๋ ๋ด์ฅ๋ ๊ธฐ๋ฅ์ด๋ ๊ฒ์ ์ ์ถํ ์ ์์
๋ฌธ์ ์ํฉ: ๊ด๋ฆฌ์๊ฐ ์ ๋ฌด์ผ์ง์ ๋๊ธ์ ๋ฑ๋กํ๋ ๊ธฐ๋ฅ์ ๋ง๋๋ ์ค ๋๊ธ์ด ๋ฑ๋ก๋์ด ํด๋น ๋๊ธ์ด ์ํ ๋ฆฌ์คํธ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ ๋์๋๋ฐ, ๋ณ๊ฒฝ๋ ๋ฐ์ดํฐ๊ฐ ํด๋ผ์ด์ธํธ ์ธก์ผ๋ก ๋ฐ๋ก ๊ฐฑ์ ๋์ง ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ์ด ๋๋ฌธ์ ์ฌ์ฉ์๊ฐ ๋๊ธ์ ์ด ๋ฐ๋ก ์งํ ํ๋ฉด์ด ์ ๋ฐ์ดํธ ๋์ง ์
์ด์ ์ vscode ํ๊ฒฝ์์ git ์ ์ฌ์ฉํ ๋๋ ์ผ์ผํ ํฐ๋ฏธ๋์ git add, commit, reset ๋ฑ ๋ช ๋ น์ด๋ฅผ ์ ๋ ฅํ์ฌ ๊ด๋ฆฌํ์๋ค. ํ์ง๋ง webstorm ํธ์ง๊ธฐ๋ฅผ ์ฌ์ฉํ ์ดํ, ํ์ฌ ์ ๋ฐ ๋ช ๋ น์ด๋ค์ ์น ํ์์์ด ๊ฐํธํ๊ฒ git ์ ๋ค๋ฃฐ ์ ์๋ค. ์ด๋ฐ ํธ๋ฆฌ
ํน์ ํ์ด์ง์ SNS ๋ฑ ์ธ๋ถ ๊ณต์ ๋ฅผ ์ํด URL ๋งํฌ๋ฅผ ์์ฑํ๊ณ ์ถ์๋ค. ๋งํฌ๋ฅผ ํด๋ฆญํ๋ฉด ํน์ ํ์ ์ด ์ด๋ฆฐ ์ํ๋ก ํ์ด์ง๊ฐ ๋์ด์ง๋ ๊ตฌ์กฐ์ฌ์ผ ํ๋๋ฐ, ํด๋ณด์ง ์์ ์์ ์ด๋ผ ์ ๋ฅผ ์ข ๋จน์๋ค.
ํ์ด์ง ์์ ์ ํ๋ ์ค ํ์ ์ฐฝ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ณ ์์๋ค. ๊ทธ๋ฆฌ๊ณ ๋ซ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ ๊ธฐ๋ฅ์์ ํด๋ฆญ๋ ๋ฒํผ(event.target)์ ๋ถ๋ชจ๋ฅผ ์ฐพ์ ํด๋น ๋ฒํผ์ ์์์ผ๋ก ๊ฐ์ง ํ์ ์ ๋ซ๋ ๊ธฐ๋ฅ์ ์์ ๋ ์ค ์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.
๋ชฌ์คํฐ ๊ฒ์์ RPG ๊ฒ์์ผ๋ก, ๊ฒ์์๋ ํฌ๊ฒ ๋ ๊ฐ์ง ๋ชจ๋๊ฐ ์๋ค. ๋ชจํ, ํด์, ์ข ๋ฃ ์ค์์ ์ ํํ๋ ์ผ๋ฐ ๋ชจ๋์ ๋ชจํ์ ๋ ๋์ ์ ์ ๋ง๋๊ฒ ๋ ๋ ๋์ ํ๋ ์ ํฌ ๋ชจ๋์ด๋ค. ์ ํฌ ๋ชจ๋์์๋ ์ ์ ๊ณต๊ฒฉํ๊ฑฐ๋ ์ฒด๋ ฅ์ ํ๋ณตํ๊ฑฐ๋ ๋๋ง๊ฐ๋ค.์น๊ฒ์ ๋งํฌhtml, css ์ฝ๋
planetscale ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ฐ๊ฒฐํ๊ณ ์ pscale connect ๋ฅผ ํ๋๋ฐ ์ฐ๊ฒฐ์ด ์๋๊ณ ๋ค์๊ณผ ๊ฐ์ ์๋ฌ๊ฐ ๋ฐ์ํ๋๋ฐ, ๊ตฌ๊ธ๋ง ๊ฒฐ๊ณผ ๊ทธ ์ด์ ๋ฅผ ๊ณต์๋ฌธ์์์ ๋ฐ๋ก ์์๋๋ค.์ฐธ๊ณ : https://planetscale.com/docs/concepts/da
์ ๋ก์ด์ NodeBird ๊ฐ์ ํ๋ก์ ํธ๋ฅผ ์ง์ ๋ฆฌ๋ด์ผ ํ๋์ค์ ๋ค์๊ณผ ๊ฐ์ ๋ฒ๊ทธ๋ฅผ ๋ฐ๊ฒฌํ๋ค.โ ๊ฒ์๋ฌผ ์์ฑ ์ค ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ๋ ๊ธฐ๋ฅ์ type ์ด file ์ธ input ์ onChange ์ด๋ฒคํธ๋ฅผ ๊ฑธ๊ณ ์ ๋ก๋ ๋ฆฌ๋์๊ฐ ๋์คํจ์น๋๋ ๊ตฌ์กฐ๊ฒ์๋ฌผ์ ์์ฑํ๊ธฐ ์ํด โre