์ฌ์ค 41๋ฒ ๋ฌธ์ ๋ ์ด์ ํด๊ฒฐํ๋ ค๊ณ ์ด์ ๋ถํฐ ์ผ ๋์๋๋ฐ, ๋์ ํ ์ ๊ทผ ๋ฐฉ๋ฒ์ด ๋ ์ค๋ฅด์ง ์์๋ค. ์์ฆ ์ฝํ๋ฆฟ ์ค์ผ ์ด๋ ต์ง? ๋ผ๊ณ ์๊ฐํ๋ฉด์ ์ผ๋จ ๊บผ ๋์๊ณ , ์ค๋ ์์นจ ๋ค์ ํผ์ณ๋ณด์๋ค. ์ค๋ ์์นจ๋ ์ด์ ์ ๋น์ทํ ๋ฐฉ์์ ์ ๊ทผ ๋ฐฉ๋ฒ์์ ๋ฒ์ด๋์ง ๋ชปํ๋ค๊ฐ, ๋ ํผ๋ฐ์ค๋ฅผ ๊ทธ๋ฅ ๋ด ๋ฒ๋ฆด๊น ๊ณ ๋ฏผ๋ ์ ๊น ํ๋ค๊ฐ, ๊ฐ์๊ธฐ ๋ฑ! ํด๊ฒฐ๋ฐฉ๋ฒ์ด ๋ ์ฌ๋๋ค. ๊ทธ๊ฑธ๋ก ์ญ ์งํํ๋๋ ๊ฒฐ๊ตญ ํ๋ ค๋ฒ๋ ธ๋ค. ๊ทธ๊ฒ๋ ์์ฃผ ๋น ๋ฅด๊ฒ... ์ด์ง ํ๋ฌดํ๋ค. ๋์๊ฒ ํ๋ฃจ์ ๊ธฐํ๋ฅผ ๋ ์ค ๊ฒฐ๊ณผ์ธ ๊ฒ์ผ๊น. ๋ ํผ๋ฐ์ค ์ฝ๋๋ฅผ ๋ดค๋๋ฐ ๋ด ์ฝ๋์ ๊ฑฐ์ ๋๊ฐ์๋ค. ์๊ฐํด๋ณด๋ ์ ๋ง ์ฌ์ด ๋ฌธ์ ์๋ค. ์ ์ด๋ฐ ๋ฌธ์ ์ ์ฒ์๋ถํฐ ์ซ์๋ฒ๋ ธ์ง?
countIslands.js
๋ฆฌ์กํธ ๊ต์ฌ 5์ฅ(ref), 6์ฅ(์ปดํฌ๋ํธ ๋ฐ๋ณต), 7์ฅ(์ปดํฌ๋ํธ์ ๋ผ์ดํ์ฌ์ดํด ๋ฉ์๋)๋ฅผ ํ์ตํ๋ค. 6์ฅ์ ์ด๋ฏธ ๋ฐฐ์ ๋ ๋ด์ฉ์ด๋ผ ์์ฃผ ์ฌ๋ฐ๊ฒ ์งํ์ ํ๋๋ฐ, 5์ฅ๊ณผ 7์ฅ์ด ๋์ ํ ์ดํด๊ฐ ๋์ง ์์๊ณ , ๋๋ ทํ๊ฒ ์ด๋ค ๊ธฐ๋ฅ ๊ตฌํ ์ ํ์ํ ๊ฐ๋
์ธ์ง ์กํ์ง๊ฐ ์์ ๋ ์ง์ค์ด ๋์ง ์์๋ค.
์ปดํฌ๋ํธ์ ๋ผ์ดํ์ฌ์ดํด ๋ฉ์๋๋ฅผ ์ ๋๋ก ์ ๋ฆฌํด๋ ๋ธ๋ก๊ทธ ๊ธ์ ์ฐ์ ํตํด๋๋ค. ๊ตฌํํ ๋๋ ์ด๋ฒคํธ ๊ด๋ฆฌ๋ Hooks ๋ฑ์ด ์ค์ํ๊ฒ ์ง๋ง, ๋ฆฌ์กํธ์ ๋ํ ๋ฅํ ๊ฐ๋
์ ์๊ณ ์๋ ๊ฒ๋ ์ค์ํ๋ค๊ณ ์๊ฐํ๋ค. (๋ฉด์ ๋ ๋ฌผ์ด๋ณผ ๊ฒ ๊ฐ๋ค.)
๋ฒจ๋ก๊ทธ ํธ๋ ๋ฉ์ ๋ณด๋ค๊ฐ, ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ทจ์ ํ ๋ถ์ ๊ธ์ ์ฝ๊ฒ ๋์๋ค. ๋ด๊ฐ ํ๋ก ํธ์๋ ์ง๋ฌด์ ๊ด์ฌ์ด ๋ง๊ธฐ ๋๋ฌธ์ ์ฐธ๊ณ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ ์ฝ๊ธฐ ์์ํ๊ณ , ๋ณด๋ ๋ด๋ด ์ทจ์ค์ ๊ณผ์ ์ ๊ฐ์ ์ ์ผ๋ก ์ฒดํํ ์ ์์ด ์จ ๋งํ๋ ๊ธฐ๋ถ์ด์๋ค. ๊ณผ๊ฑฐ์ ๋ฌธ๊ณผ ์ทจ์ค์ ํด๋ณธ ๊ฒฝํ์ด ๋ ์ค๋ฅด๋ฉฐ ์ ๋ง ์ ๋ง ์จ์ด ๋งํ๋ค.
๋ฌผ๋ก ๋ด์ฉ๋ค์ ๋์์ด ๋ง์ด ๋์๋ค. ๋๋ ์ด์ ๊ฐ๋ฐ ๊ณต๋ถ๋ฅผ ์์ํ์ง 4๊ฐ์ ๋ฐ์ ์ ๋๊ธฐ ๋๋ฌธ์, ์์ง ์ทจ์ค์ ํ ์ ์์ ์ ๋๋ก ์ฌ๋ฌ๋ชจ๋ก ์ฑ์๋์ง๋ ์์ ์์ง ๋ณธ๊ฒฉ์ ์ธ ์ทจ์ ์ค๋น๋ฅผ ํ๊ณ ์์ง๋ ์๋ค. ํ์ง๋ง ๋์ค์ ์ทจ์ค์ ํ ๋ ํ์ํ ๊ฒ๋ค์ ๋ฏธ๋ฆฌ ์๊ณ ์์๋ ๊ด์ ์์, ๋ด๊ฐ ์ด๋ค ๋ถ๋ถ๋ค์ ์ค์ํ๊ฒ ๊ด๋ฆฌํด์ผ ํ๊ณ , ์ค๋นํด์ผ ํ ์ง์ ๋ฐฉํฅ์ฑ ๋ฑ์ ์ก์ ์ ์์๋ค.
์ค๋ ๊ตฌ๊ธ๋ง์ ํ๋ฉฐ ๋ค๋ฅธ ๊ฐ๋ฐ์๋ค์ ๋ธ๋ก๊ทธ๋ฅผ ๋ณด๋ค๊ฐ ๋๋ฌด๋๋ ๋ด ์คํ์ผ์ธ ๋ธ๋ก๊ทธ๋ฅผ ๋ฐ๊ฒฌํ๋ค. ์ฌ์ค ์ด๋ฏธ ํฐ์คํ ๋ฆฌ์์ ๋ฒจ๋ก๊ทธ๋ก ์ด์ฌ ์จ ๊ฑด๋ฐ, ๋ ์ด์ฌ๋ฅผ ํด์ผํ๋ ์ถ์๋ค. ์์ง ๊ฐ๋ฐ ๊ฒฝ๋ ฅ 3๊ฐ์์ธ๋ฐ ๋ฐ๊พธ๋ ค๋ฉด ์ง๊ธ ๋ฐ๊พธ๋ ๊ฒ ์ข์ง ์๋....
์ด์ ๋๋ฌด๋๋ ๋ด ์คํ์ผ์ด์๋ ๋ธ๋ก๊ทธ๋ฅผ ์ฐพ๊ฒ ๋์๊ณ , ์ต๊ทผ์ ๋ฒจ๋ก๊ทธ์ ๋ํ ๋ถ๋ง์ด ์ฐจ์ธฐ ์ฐจ์ธฐ ์์ฌ๊ฐ๋ฉด์ ๋ธ๋ก๊ทธ ์ด์ฌ๋ฅผ ํ๊ธฐ๋ก ๊ฒฐ์ ํ์๋ค. ๋ฐ๋ก gatsby๋ฅผ ํ์ฉํ ๊นํ๋ธ ๋ธ๋ก๊ทธ์๋๋ฐ, ๋ธ๋ก๊น
์ ํ๋ฉด ์ปค๋ฐ๋ ๋๊ณ , ๊ธฐ์กด์ ์๋ ํ
๋ง์ ๋ฆฌ์กํธ๋ก ๋ด๊ฐ ์ํ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ ํฌ๋งท์ ์์ ํ ์ ์๋ค๋ ๊ฒ ๋๋ฌด๋๋ ๋งค๋ ฅ์ ์ด์๋ค.
๊ทธ๋ฌ๋ ๊ทธ ๊ณผ์ ์ ์ํ์น ์์๋ค. image๋ฅผ ์ฒ๋ฆฌํ๋ sharp๋ผ๋ ๋ชจ๋์ด ๊ณจ๋จธ๋ฆฌ๋ฅผ ์ฉํ๋ค. npm install ๋ง์ ๋์ง ์์๊ธฐ ๋๋ฌธ์ด๋ค. node ๋ฒ์ ์ downgradeํ๊ณ ๋ณ์ ๋ณ ์ง์ ๋ค ํด์ ๊ฒฐ๊ตญ install๊น์ง ๊ฐ์ง๋ง, ๊นํ๋ธ์์ ์๋ ๋ฐฐํฌ๋ฅผ ํ๋ ์ค์ ์ ํ๋ค๊ฐ ๋งํ๊ณ , ์ด๋ค ๋ธ๋์น์ ์ด๋ป๊ฒ ์ฌ๋ ค์ ์ด๋ป๊ฒ ํฌ์คํ
์ ํด์ผํ๋ ์ง๋ ์์ ํ ํผ๋์ค๋ฝ๊ณ ์์ผ๋ฒ๋ ค์ ๊ฒฐ๊ตญ์ ๋ค ๋ฐ์ด๋ฒ๋ฆฌ๊ณ ํฌ๊ธฐํ๋ค. 6์๊ฐ ๋ฐ์ด ์ง๋ ์๊ฐ์ด์๋ค. ๊ทธ๋์ ์ ๋๋ก ํ์ต๋ ํ์ง ๋ชปํ์ผ๋ฉฐ ํํ๋ง ์๊ฐ ์๋ค. ํ์ง๋ง ๋๋ ํฌ๊ธฐํ์ง ์์ ๊ฒ์ด๋ค. ์ฐ์ ์ ๋ค๋ฅธ ํ์ต์ด ๋ ์ค์ํ๊ธฐ ๋๋ฌธ์ ์ด๋ฒ์ ํฌ๊ธฐํ์ง๋ง, ๋ค์์ ์๊ฐ์ด ์๊ธฐ๋ฉด ๋ค์ ๋์ ์ ํ ๊ฒ์ด๋ค.
์ง๋๋ฒ์ ๋ฏผ์ฐ๋์ ์ถ์ฒ์ผ๋ก ํด๋ฆฌ๊ณค ๋ฐ์
์ ์ฐธ์ฌํ๊ฒ ๋์๋ค. ์๊ฐ๋ณด๋ค ๋ง์ ์ฌ๋๋ค์ด ์๊ณ , ํด๋ฆฌ๊ณค์ ํ
์คํธ๋ท๊ณผ, ๋ฆฌ์กํธ๋ฅผ ์ด์ฉํด ๋ฏผํ
ํ๋ ์ปจํธ๋์ ์์ฑํ์ฌ ์คํ์จ ํ
์คํธ๋ท์ NFT๋ฅผ ์ฌ๋ฆฌ๋ ๊ณผ์ ์ ์งํํ๋ค. ๋ถํธ์บ ํ ๊ณผ์ ์ค์์ ์ด๋๋ฆฌ์ ํ
์คํธ๋ท์ผ๋ก ์์ฃผ ์ค์ต์ ์งํํด๋ดค๊ธฐ ๋๋ฌธ์ ์ด๋๋ฆฌ์์์ ํด๋ฆฌ๊ณค์ผ๋ก ๋ฐ๊ผ์ ๋ฟ ๊ทธ ๊ณผ์ ์ด ๊ทธ๋ค์ง ๋ฏ์ค์ง ์์๋ค.
๋๋๊ณ ํจ๊ป ์ฐธ์ฌํ ๋๊ธฐ๋ถ๋ค 3๋ถ๊ณผ ํจ๊ป ๋ทํ์ด ์๊ฐ์ ๊ฐ์ก๋ค. ๋๋ ์คํ๋ ค ์ด ์๊ฐ์ด ๋ ๊ธฐ์ต์ ๋จ๋๋ค. NFT์ ๋ํ ์ดํด๋๊ฐ ๋์ ๋๊ธฐ๋ถ๋ค๊ณผ ํ ํฐ ์ด์ฝ๋
ธ๋ฏธ์ ๋ํ ์ง์งํ ์ฑ์ฐฐ์ ์๊ฐ(?)์ ๊ฐ๊ณ ๋ค๋ค ์ด๋ค ๊ฒ์ ์งํฅํ๋์ง, ์ด๋ป๊ฒ ๊ทธ๊ฒ์ ์งํฅํ๊ฒ ๋์๋์ง๋ฅผ ํ ๋ก ํ์๋ค. ์๋ ์น๊ตฌ๋ค๊ณผ ์ข
์ข
์ ์ง์งํ ์๊ธฐ๋ง ํ๋๋ฐ, ํ์ด๋ถ๋ค์ ์ง์งํ ์๊ธฐ๋ฅผ ๋ค์ผ๋ฉฐ ๋์ ๋ฐฉํฅ์ฑ๋ ๋ค์ ํ๋ฒ ์ ๊ฒํด ๋ณด๋ ๊ณ๊ธฐ๊ฐ ๋์๋ค.
๋๋ ํ์ต ๊ธฐ์ต๋ ฅ์ด ์ ์ข์ ๊ฒ ๊ฐ๋ค. 1-2์ฃผ ์ ์ ๋ฐฐ์ด ๋ด์ฉ๋ค์ด ์ ๊ธฐ์ต์ ๋จ์ง ์๋๋ค. ๊ทธ ์ง์์ ์ป๋๋ฐ ๋ค์ธ ์๊ฐ์ด ์๊น๋ค. ๋ด๊ฐ ์๋ ์ ์ฝ์ธ ๊ฐ์นํฌ์๋ฅผ ์ํด ๋ธ๋ก์ฒด์ธ์ ๋ฐฐ์ฐ๋ฉฐ ์์ดํจ๋์ ๊ธฐ๋กํ๋๋ฐ, ์ต๊ทผ์ ๊ทธ ๋ด์ฉ์ ๋ณด๋ฉด์ ๊น์ง ๋๋๋ค. ์ต๊ทผ์ ๊ณต๋ถํ ๋ด์ฉ๋ค๊ณผ ๋๋ฌด ๊ฒน์ณค๊ธฐ ๋๋ฌธ์ด๋ค. ์ต๊ทผ์ ๋ธ๋ก์ฒด์ธ ์ด๋ก ๊ณต๋ถ๋ฅผ ํ ๋ ์ ํ ์๊ฐ์ด ๋์ง ์์๊ณ , ์ฒ์ ๋ณด๋ ๋ด์ฉ๋ค์ด์๋ค. ์.. ์ด๋์ ๋ด๊ฐ ๊น์ด๊ฐ ์๋๊ฑธ๊น? ์์ด๋ ๊ฒ ์์ด์?
์ค๋ ๋๋์ด ํฌ๋๋ฆฌ์คํธ๋ฅผ ๋ง๋๋ ์ค์ต์ ํ๋ค. 1. ํ ์ผ ์
๋ ฅ ํ ๋ฆฌ์คํธ์ ์ถ๊ฐํ๋ ๊ธฐ๋ฅ 2. ๋ฆฌ์คํธ์์ ์ญ์ ํ๋ ๊ธฐ๋ฅ 3. ์ฒดํฌ๋ฐ์ค๋ฅผ ์ฒดํฌํ๋ฉด ๋น๊ธ๊ณผ ํจ๊ป ์ฒดํฌ ํ์ (๋๋ ๊ทธ ๋ฐ๋)๊ฐ ๋๋ ๊ธฐ๋ฅ ๋ฑ์ ๊ตฌํํ๋ค. ์ด์ ๊น์ง๋ ์ด๋ค Hooks๋ค์ด ์๊ณ , css๋ ์ด๋ป๊ฒ ์ค์ ํ๊ณ ๋ฑ์ ๋ฐฐ์์ ์ด์ง ์ง์ผ์ ์๋๋ฐ, ๋๋์ด ๊ทธ๋ด๋ฏํ ์ค์ต์ ํ๊ฒ ๋์ด ์ฌ๋ฐ์๋ค.
์ง๋๋ฅผ ๋นจ๋ฆฌ ๋๊ฐ์ ์ผ๋ฅธ ๋ธ๋ก๊ทธ ๋ง๋๋ ์ค์ต๊น์ง ์งํํ๊ณ ์ถ๋ค.
ํ๋ก์ ํธ ๊ธฐ๊ฐ๊น์ง ๋ฒ์จ ํ ์ฃผ ๋จ์๋ค. ๊ธ์์ผ์ ๋๊ธฐ๋ถ๋ค์ ๋ง๋๊ณ ๋ ์ดํ๋ก ๋ง์์ด ๋ง์ด ๊ธํด์ก๋ค. ํ๋ก์ ํธ๊ฐ ์์๋๊ณ ์ญํ ๋ถ๋ด์ ํ ๋ ์ธ๋ชจ์๋ ์ฌ๋์ด๊ณ ์ถ์๋ฐ ์ธ๋ชจ๊ฐ ์์๊น๋ด ๋ถ์ํด์, ๊ทธ๋๋ง ์ ํ ์ ์๋ ๋ฆฌ์กํธ๋ฅผ ์ผ๋ฅธ ๋๋ด๋ฒ๋ฆฌ๊ณ ์ถ๋ค. ํ ์ฃผ ์์ ๋ฆฌ์กํธ ์ฑ
์ ๋๊น์ง ๋ผ๋ ๊ฒ ๋์ ๋ชฉํ๋ค.