์ ์ ์๋ ์ค๋ฅ์ธ๋ฐ ๊ฐ์๊ธฐ ๋ ์ ๊ฒ์ํด๋ณด๋ ๊ตฌ์ ์๋๋ ๋ชจ๋ฅธ๋ค๋ ์์์ ์ข์ ํ๊ณ ์์๋ค ใ ใ ์ฌ์ง์ด ์ค์นํ์ผ์๋ next ์ ๋น์ฐํ ๋ค์ด์์ด์ผํ๋ pagesํด๋๋ ์๊ณ .. ์๋ฌด๊ฒ๋ ์กด์ฌํ์ง ์์ ์ํ..!๋ถ๋ช ๋ฒ์ ๋ฌธ์ ๊ฐ์ ์ฐพ์๋ดค๋๋ฐ ๋๋ฌด์ง ๋ชจ๋ฅด๊ฒ ์ด์ ์ด๊ฒ์ ๊ฒ ๊ฒ์ํ๋ ์ค
api๊ฐ ํ์ํ ๊ฒฝ์ฐ๊ฐ ๋งค์ฐ๋งค์ฐ! ๋ง๋ค... ๊ฒฐ๊ตญ ์คํ api ๋ฅผ ํ์ฉํ๊ฑฐ๋ ์ง์ ๋ฐฐ์ฐ๋๊ฒ ๊ฐ์ฅ ์ข๋ค.์ง์ ๋ฐฐ์ฐ๋๊ฒ ์ ๋ง ๋๋ฌธ์ด ๋ ๊ฒ๊ฐ์ง๋ง, ์์ง ํ๋ก ํธ๋ ์ต์ํ์ง ์์๋ฐ api๊น์ง ์๋๋ฉด ์ ๋ง ํฐ์ผ๋ ๊ฒ ๊ฐ์์ , ๊ณต๊ณต๋ฐ์ดํฐ ํฌํธ์ ํ์ฉํด๋ณด๊ธฐ๋ก ํ๋ค!https
๊น ์ด๊ธฐ์ธํ ์ ๋ง๊ฒ ํด๋ดค์ง๋ง ใ ใ ๋๋ฌด์ง ๋ญ๊ฐ ๋ฌธ์ ์ง ๋ชฐ๋ผ์ ์์นญํด๋ณด๋ ๋ฐ์ดํฐ ์ ์ค๋ฌธ์ ๋๋ฌธ์ git push --set-upstream origin main ๊ฐ ๋จนํ์ง ์๋๊ฑฐ๋ผ๊ณ ํ๋ค git push -u origin +main ๋ฅผ ํด์ฃผ๋ฉด๋๋ค๊ณ ํ๋ค.์ค๋ฅ ํด๊ฒฐ ๋!
git clone์ ๋ฐ๊ณ npm run serve๋ก ์คํ์ ์์ผ์ฃผ์๋๋ฐ์ด๋ฐ ์๋ฌ๋ค์ด ๋จ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค ์ด๊ฒฝ์ฐ๋npm cinpm run servenpm ci ๋ก ๊ธฐ์กด์ ๊น๋ ค์๊ฑฐ๋ ์ ๋ฐ์ดํธ ๋์ด์๋ ํจํค์ง๋ฅผ ์ฌ์คํ ํด์ฃผ๋ฉด ์ ์์ ์ผ๋ก ์คํํ ์ ์๋ค!
Vue๋ก ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๋ง์ฃผ์น ๊ฐ์ฅ ํฐ ์์ ๋ ์ฐจํธ์๋ ๊ฒ ๊ฐ๋ค.๊ตฌ๊ธ๋ง์ ํ๋ฉด์ ์ ๋ง์ ๋ง ์๋์ค๋๊ฒ ๋ฐ๋ก ์ด ์ฐจํธ์ ๊ด๋ จ๋ ์ค๋ช ์ด์๋๋ฐ, ์ค์ ๋ก ์ฌ์ฉ์ ํ๋ฉด์์ ๋ง์ด ๋ณด์ฌ์ฃผ์ง ์์ง๋ง ๊ด๋ฆฌ์ ํ๋ฉด์์ ๋ฌด์กฐ๊ฑด ๋ค์ด๊ฐ์ผํ๋ ์์์ด๊ธฐ๋๋ฌธ์ ์ด๋ฐ์ ๋๋ฌด๋๋ฌด ๊ณ ์ํ๋๊ฒ ๊ธฐ
๋ถ๋ช ์ข ์์ฑ ๋ฌธ์ ์ธ๋ฐ ๊ฐ๋ฐ์ ํ๋ค๋ณด๋ฉด ์์ ํ๋ค ์ค๊ฐ์ ๋ฒ์ ๋ฌธ์ ๋๋ฌธ์ ์ด๋ฐ๋ ๊ฒฝ์ฐ๊ฐ ๋๋ฌด ๋ง๋ค...npm install --forcenpm install --legacy-peer-depsnpm config set legacy-peer-deps true๋ฒ์ ์ด ๋ฌ๋ผ ์ข ์์ฑ์
mac์ ๊ธฐ๋ณธ์ ์ผ๋ก ํน์ ๋ฒ์ ์ด์์ด ๋์ด์ผ ์ค์น ๋ฐ ์คํ์ด ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ์๋์ฐ ์ปด์ ์ฌ์ฉํ๊ฒ ๋์๋ค. (mac ํ๋ธ๋ฅ ์ค์น์ ์ง์์ ์ผ๋ก ์๋ฌ๊ฐ ๋ฐ์ํ๋ค๋ฉด... ์๋ก ์ฌ์ผ ํ๋ค๋...ใ ใ ใ )ํ์ฌ ๋ฒ์ ์ด ์๋ LTS๋ฒ์ ์ ๋ค์ด๋ก๋ ๋ฐ๋๋ค. (์ต์ ๋ฒ์ ์ ๊ณต์๋ฒ์ ์ด๊ธด ํ
๊ตฌ๊ธ์์ ์ ๊ณตํด์ฃผ๋ squoosh ์ฌ์ดํธ๋ฅผ ํ์ฉํด ๊ธฐ์กด ์ด๋ฏธ์ง๋ฅผ ์น์ด๋ฏธ์ง๋ก ๋ณํํ์ฌ ์ด๋ฏธ์ง์ฌ์ด์ฆ๋ฅผ ์ต์ ํ์์ผ์ค ์ ์๋ค.https://squoosh.app/ํด๋น squoosh ์ฌ์ดํธ๋ฅผ ํ์ฉํ๋ฉด์ค๋ฅธ์ชฝ ํ๋จ์ ์ถ์ํ ํ๋ฆฌํฐ์์ฌ๋ถ์ ์ฌ์ด์ฆ ์ฌ๋ถ๊ฐ ๋ํ๋๋ค.๊ธฐ์กด kB
์ฌ๋ฌ์ด๋ฏธ์ง๋ ๋ค์ค์ด๋ฏธ์ง ๋๋ ์์์ ์ฌ์ฉํ ๊ฒฝ์ฐ, ์คํฌ๋กค์ ๋ฐ๋ผ ๊ฐ์งํ๋ ๋ฐฉ๋ฒ์ ๋๋ฌด๋๋ ์์ด์ ์ธ ๋ฐฉ๋ฒ์ด๋ผ ์คํ๋ ค ์ต์ ํ๋ ํ๋ฉด๊ตฌํ์ ๋ฐฉํด๊ฐ ๋ ์ ์๋ค.์ด๋ด๋ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ฐ๋กIntersectionObserver๋ผ๋ ๊ธฐ๋ฅ์ด๋ค.IntersectionObserver๋ ๋ทฐ
๋ชจ๋ ํ์ด์ง์์ ์ฌ๋ฌ๊ฐ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ ๋ถ ํ์ํ์ง ์๋ค.๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ์ฐ๊ฒ๋๊ณ , ๋ ๋๋ง์๊ฐ์ด ๋ ์ค๋๊ฑธ๋ฆฌ๊ธฐ ๋๋ฌธ์ ํ์ด์ง๋ณ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋๋ ์ ์ฌ์ฉํด์ฃผ๋๊ฒ์ด ์ต์ ํ์ ์ฉ์ดํ๋ค.ํ์ด์ง๋ฅผ ๋ก๋ํ๋ค๋ณด๋ฉด ์ ?๋ญ ๋๋ฌธ์? ๋ก๋ฉ์ด ์ค๋๊ฑธ๋ฆฌ๋์ง ์๋ฌธ์ด ๋ค๋๊ฐ ๋ง๋ค.
๋ง ๊ทธ๋๋ก '๊ฒ์ผ๋ฅธ ์ด๋ฏธ์ง'๋ฅผ ๋ปํ๋ค!์ฆ, ์๋ฒ๋ ์ฌ์ดํธ๊ฐ ์คํ๋ ๋ ๋ชจ๋ ์ด๋ฏธ์ง๋ค์ ํ๋ฒ์ ๋ถ๋ฌ์ค๋ ๊ฒ์ด ์๋, ํ์ด์ง ๋ ๋ฉ์ ๋ฐ๋ผ ์ฒ์ฒํ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ด๋ค.์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๊ธฐ ์ง์ ์ ์ ์ ๊ฐ ํ์ด์ง๋ฅผ ๋ ๋นจ๋ฆฌ ์ ํ ์ ์๊ณ , ๋ฐ์ดํฐ์ ๋ญ๋น๋ฅผ ์ค์ผ ์ ์๋ค.
์๋ง์ ์๋ฌ๋ฅผ ์ ํ๋ฉด์ ๊ทธ๋ฆฌ๊ณ ๊ทธ ํด๊ฒฐ๊ณผ์ ์ ๊ฒช์ผ๋ฉด์, ์ค์ค๋ก๊ฐ ์กฐ๊ธ ๋ ์ฑ์ฅํ๋จ ๊ฒ์ ๋ฟ๋ฏํจ๊ณผ ์์ฌ์ด ๋ ์๊ธฐ๊ธฐ ์์ํ๋ค. ์ฒ์์ ์ ๊ณต์๋ ์๋ ์ฉ๋ฆฌ๊ฐ ๋ญ ํ ์ ์๊ฒ ๋๋ ์์ ๋ฌด์๊ฐ ์ซ์ด์ ๋ ์ฐพ์๋ณด๊ณ ํํค์น๊ณ ๋ ธ๋ ฅํ๋ ๊ฑด๋ฐ, ์ด๋์๊ฐ '๋ฌด์'๊ฐ '์ธ์ '์ผ๋ก ๋ฐ๋์
๊น ํด๋ก ์์ ์ ํ๋ ์คnpm ci๋ฅผ ๋๋ ์ ๋ฟ์ธ๋ฐ ๊ฐ์๊ธฐ ์ค์น์ค ์ค๋ฅ๊ฐ ๋ฌ๋คnode-sass npm ERR! command failedํด๋น ์ค๋ฅ๋ sass ๋ฒ์ ์ด ํธํ๋์ง ์์์ ์ผ์ด๋๋ ๋ฌธ์ ๋ผ๊ณ ํ๊ธฐ์ node๋ฅผ ์๋ก ์ค์นํ๊ฑฐ๋ ๊ทธ๋ฅ node-sass ๋ฅผ ์ ๋ฐ์ดํธ ํด
์ด๋ฉ์ผ (@) ํ์์ ์ฒดํฌํ๋ ์ ๊ท์ ํํ์ ๊ท์ ํํ์ regEmail์ ๋ด์์ค ํ test๋ฅผ ํ์ฉํด ์ด๋ฉ์ผ์ ์ ํจ์ฑ์ ๊ฒ์ฌํด์ฃผ๋ฉด ๋๋ค
scroll-behavior ํญ๋ชฉ์ smooth๋ฅผ ๋ฃ์ด์ฃผ๋ฉด์ ์ฒด ์คํฌ๋กค์ด๋ ํ๋ฉด์ด ๋ถ๋๋ฝ๊ฒ ์ด์ด์ง๋ค.์์>
ํ์ฌ์์ ์ข์๊ธฐํ๊ฐ ์๊ฒจ vue๋ก ์นด์นด์ค๋งต api ๋ฅผ ์ฌ์ฉํ๊ฒ ๋์๋ค. ์ง๋๋ ํ๋ก ํธ์๋์๊ฒ ๊ฝ์ด๋ ๋ค๋ฆ์๋ค๊ณ ํ์ จ๋๋ฐ ใ ใ ใ ๋ง๋๋ง์ธ์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ด์จ๋ 1๋ ์ฐจ๋ ์๋ ๋ด๊ฒ๋ ์ข์๊ธฐํ๋ผ๊ณ ์๊ฐํ๋ค ์นด์นด์ค ์ฃผ์ >https://apis.map.kakao.com/
last.fm open API ์ฌ์ฉํ๊ธฐhttps://www.last.fm/api๐ Get an API account ์ ํ๐ ๊ณ์ ์์ฑ ๋ฐ ๋ก๊ทธ์ธ๐ ํด๋น ๊ณ์ ๋ฉ์ผ์๊ฐ๋ฉด ํ์ธ๋ฉ์ผ์ ๋ณผ ์ ์๋ค!๐ ๊ณ์ ํ์ธ ํ, ํ๋ฒ ๋ ์ด๋ https://ww
๋ฆฌ์กํธ ํ๋ก์ ํธ ์ค์นnpx create-react-app ํ๋ก์ ํธ ๋ช cd ํ๋ก์ ํธ ๋ช npm startgit ์ ํ๋ก์ ํธ pushํ๊ธฐ์์๋๋ก ์งํํ๊ธฐgit init ๐ ๋ด git ๋ด๋ถ์ Repository ์์ฑ!๐ ํด๋น ์ด๋ฏธ์ง์ฒ๋ผ Repository ๋ด๋ถ์ ๋ค์ด๊ฐ๋ฉด
์ ๋ฃ์ง๋ง ๊ฒฝ๋ ฅ๊ด๋ฆฌ์ ์ข์ ํํ์ด์งhttps://career.sw.or.kr/