
ํ๋ก์ ํธ ๊ฐ์ ๊ฐ๋จํ ์๊ฐ Ed Sheeran ํฌํ์ด์ง์ ๋๋ค. Ed Sheeran์ ๋ ธ๋, ํฌ๋ค๋ผ๋ฆฌ ์ฑํ ์ด ๊ฐ๋ฅํ๊ณ , ๊ทธ์ ๋ ธ๋๋ฅผ ๋ค์ ์ ์์ต๋๋ค. ํ๋ก์ ํธ ๋ชฉ์ ํ์ ์ข์ํ๋ ๋ฎค์ง์ ์ธ Ed Sheeran์ ํฌํ์ด์ง๊ฐ ์๋ค๋ ๊ฑธ ์๊ณ , ํฌ๋ค๋ผ๋ฆฌ ์ํต์ด ๊ฐ๋ฅํ๋ฉฐ ๊ทธ์

๋์์ธ ์ฐธ๊ณ ํ์ ์๋๋ฎค์ง์ฝ๋ฆฌ์์ ์๋ Ed Sheeran ํ์ด์ง๊ฐ ์์๋ค๊ณ ์๊ฐํ๋ ํฐ๋ผ ์ด ํ์ด์ง ๋์์ธ์ ์ฐธ๊ณ ๋ก ํ๊ธฐ๋ก ํ๋ค. (์ Discography๋ News ์น์ ์ ํ ํ ๋น์ด์๋ ๊ฒ์ด๋์ใ _ใ ๋ด๊ฐ ๋ฐ๋์ ์ฑ์๋๊ณ ๋ง๋ฆฌ๋ผ)

์น ํฐํธ ๊ทธ๋์ ์น ํฐํธ๋ CDN์ผ๋ก๋ง ํด์๋๋ฐ, ์ธ๋ถ ๋งํฌ๋ก ์ฐ๊ฒฐ๋ ํ์ผ์ ๋ค์ด๋ก๋๊ฐ ์๋ฃ๋์ง ์์์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ํด๋น ์์์ ์ฌ์ฉํ๋ ์ฝํ ์ธ ์ ๋ ๋๋ง์ ์ฐจ๋จํ ์ ์๋ค๊ณ ๋ ํ๋ค. ์ด๋ฒ ๊ธฐํ์ ์ง์ Local๋ก ๋ค์ด๋ก๋ํด ํฐํธํ์ผ์ ์ ์ฉํด๋ณด๋๋ก ํ์! NanumBa


๋ฌดํ์คํฌ๋กค

๋ฌดํ์คํฌ๋กค

google o Authgoogle cloud platform์์ ํด๋ผ์ด์ธํธID๋ PW ๋ฐ๊ธ์๋ฃ!๊ณต์๋ฌธ์์ ๋ฐ๋ฅด๋ฉด ํด๋ผ์ด์ธํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ก๋ํด์ผ ํ๋ค๊ณ ํ๋ฏ๋ก, index.html <head>ํ๊ทธ ์์ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํด์คฌ๋ค.์ฐธ๊ณ ์ฌ์ดํธ: React๋ฅผ ์ฌ์ฉ
๋ฉ๋ด์ ๋ค์ด๊ฐ๋ฉด 6๊ฐ์ง ๋ ธ๋ ์ค ๋๋ค์ผ๋ก ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ ๋ง๋ค๋ ค๊ณ ํ๋ค. ๋ฐ๋ก API๋ ๋ด๊ฐ ๋ง๋ ์ง์ง ์๋ฒ๋ ์๊ธฐ์, json-server ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํด ๊ฐ๋จํ ์๋ฎฌ๋ ์ด์ ์ ๋ ํ ์ ์๋ REST API Mock Server๋ฅผ ์ด์ฉํ๋ ค๊ณ ํ๋ค. ๊ณต์๋ฌธ์๋ฅผ

HOMEํ๋ฉด์ Discography ์น์ ์ ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋๋ฅผ ์ ๋ง๋ค์ด๋์์ swiper ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํด์ ๊ตฌํํ๊ธฐ๋ก ํ๋ค. ์ด์ ์ ํํํ ๋ ํ ๋ฒ ์ฌ์ฉํด๋ณธ ์ ์ด ์์ด์ ์ข ๋ ์น๊ทผํ๊ธฐ์ ์๊ฐ์ ๋ฐ๋ก swiper๋ฅผ ์ด์ฉํด๋ณด๊ธฐ๋ก ๊ฒฐ์ ํ๋ค.Swiper ์ต์ ๋ฒ์ 10.

๋ฌดํ์คํฌ๋กค ์ฌ์ง์ด ๊ณ์ ๋ฐ๋ณต๋๋ค๋ ๊ฑธ ๊นจ๋ฌ์๋ค. display๊ฐ 20๊ฐ์ฉ๋ง ๋ณด์ฌ์ฃผ๊ณ , ํ์ด์ง๊ฐ ๋์ด๊ฐ์ง ์์ผ๋ฉด์ ์๊ธฐ๋ ๋ฌธ์ ์๋ค.

ํํ์ด์ง ์ ์ญ์์ ์คํฌ๋กค ๋์ด์ ๋ฐ๋ผ ํค๋์ ์์์ ๋ค๋ฅด๊ฒ ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ณ ์ถ์๋ค. ์ ์ญ ์ํ๊ด๋ฆฌ๋ฅผ ์ํด Redux/toolkit์ ์ฌ์ฉํ๋ฉด์ ์ค๋ ๋ค์ ํ๋ฒ ์ ๋ฆฌํ๋ ๊ธ! 1. headerSlice ์์ฑ headerSlice์์๋ show ๋ผ๋ ๋ถ๋ฆฌ์ธ ์

๋ฐฑ์๋๊ฐ ์์ผ๋ฉด JWT ๊ฐ ๋ณ์กฐ๋์ง ์์๋์ง ํ์ธํ ์ ์๊ธฐ์ ์ฌ์ฉ์๋ฅผ ์์ ํ ์ธ์ฆํ๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํ๊ฒ ์ง๋ง, ์ง๊ธ์ ์ง์ง ์๋น์ค๋ผ๊ธฐ๋ณด๋ค๋ ์ฌ์ฉ์ ์ธ์ฆ์ ๊ตฌํํด๋ณด๋ ค๋ ๊ฒ์ด ๋ชฉ์ ์ด๊ธฐ์ json-server-auth ์ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค. ๋ก๊ทธ์ธ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ๋ ์ฌ๋ฌ๊ฐ์ง์ธ

# Protected Router ๋ก๊ทธ์ธํ ์ ์ ๋ง ์ ๊ทผํ ์ ์๋ protected Router๋ฅผ ๊ตฌํํด๋ณด๊ณ ์ถ์๋ค. protected Router๋ฅผ ๊ฒ์ํด๋ณด๋ (๋ด๊ฐ ์ฐพ์๋ดค์ ๋น์๋) ๋ง์ ์ฌ๋๋ค์ด contextAPI๋ฅผ ํตํด AuthProvider๋ฅผ ์ฌ์ฉํ๋๋ฐ, ๊ทธ

์ฌ๋ด์ด์ง๋ง ๊ทธ๋ฅ ๋๋ฌด ๊ท์ฌ์์ ์๋ํ๊ณ ์ถ์ด์ ์ฐ๋ ๊ธ์๋ ๊ธฐ์กด์ ์ฐ๋ ํฐํธ ํ๋๋ก๋ง ์ฌ์ดํธ ๋ด ๊ธ๊ผด ์ ์งํ๋ ค๊ณ ํ๋๋ฐ,๋ฐ๋ฐํ ๊ฑฐ ๊ฐ์์ ํฐํธ๋ฅผ ํ๋ ์ถ๊ฐํ๊ธฐ๋ก ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋\~~๋ฌด ๋ง์์ ๋ ๋ค!!!!!!!>,<fonts ํด๋์ ์นํฐํธ๋ฅผ ๋ค์ด๋ฐ์ ๋ค ๊ธ๋ก๋ฒ ์ค

Ed Sheeran ๋ช ๊ณก๋ค์ ์ ์ ๊ฐ ํฌํํ ์ ์๋ ์ค์๊ฐ ์ธ๊ธฐ์ฐจํธ ํ์ด์ง๋ฅผ ๊ตฌํํ๋ ค๊ณ ํ๋ค! ๋ฐ๋ก API๋ ๋ด๊ฐ ๋ง๋ ์ง์ง ์๋ฒ๋ ์๊ธฐ์, json-server ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํด ๊ฐ๋จํ ์๋ฎฌ๋ ์ด์ ์ ๋ ํ ์ ์๋ REST API Mock Server๋ฅผ ์ด์ฉํ๋ ค๊ณ

๊ตฌ๊ธ ๋ก๊ทธ์ธ์ ๊ตฌํํด๋ณด๊ณ ๋๋ ์นด์นด์ค ๋ก๊ทธ์ธ๋ ๊ตฌํํ ์ ์์ง ์์๊น ๋ผ๋ ์์ ๊ฐ์ด ๋ค์๋ค. ๋ถํธ์บ ํ ํ์ด๋ ํ๋ก์ ํธ์์ ์ฐ๋ฆฌ ํ์ ์์ฒด ํ์๊ฐ์ ์์ด ์นด์นด์ค ๋ก๊ทธ์ธ์ ์ฌ์ฉํ๊ธฐ๋ก ํ์๋๋ฐ, ๊ทธ ๋ ๋ฌด์จ ์ฐ์ ์์์ธ์ง ๊ตฌํํ๋ ๋ฐ ์์ด ๋ด๋นํ๋ ํ์์ด ๊ต์ฅํ ์ ๋ฅผ ๋จน์๋

Ed Sheeran ๋ช ๊ณก๋ค์ ์ ์ ๊ฐ ํฌํํ ์ ์๋ ์ค์๊ฐ ์ธ๊ธฐ์ฐจํธ ํ์ด์ง๋ฅผ ๊ตฌํํ๋ ค๊ณ ํ๋ค!๋ฐ๋ก API๋ ๋ด๊ฐ ๋ง๋ ์ง์ง ์๋ฒ๋ ์๊ธฐ์, json-server ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํด ๊ฐ๋จํ ์๋ฎฌ๋ ์ด์ ์ ๋ ํ ์ ์๋ REST API Mock Server๋ฅผ ์ด์ฉํ๋ ค๊ณ ํ

์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋์ ์ฌ์ฉ์๊ฐ ๋น ํ๋ฉด๋ง ๋ณด๊ณ ์๋๋ค๋ ๊ฑธ ๊นจ๋ฌ์๋ค. UX ํฅ์์ ๋์ด๊ธฐ ์ํด Skeleton๊ณผ loading spinner๋ฅผ ์ ์ฉํ๊ธฐ๋ก ํ๋ค. Mui์์ ์ด๋ฏธ ์ ๊ณตํด์ฃผ๊ณ ์๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด import ํด์๋ค. ๋ผ๊ณ ์์ฑํ๊ณ TableBody ์์ ๋ค์๊ณผ ๊ฐ์ด ์ง์ด๋ฃ์๋๋ฐ ์๊พธ๋ง Warning: validateDOMNes...

https://dribbble.com/shots/6862618-Minimalistic-Player-Widget ์์ ํ๋ ์ด๋ฆฌ์คํธ ๋์์ธ ์ฐธ๊ณ

๋์ ์ต์ ์ถ๊ฐ๋ ์์ด์ฝ๋ค์ ๋ค์ด์์ง ์๊ธฐ๋ ํ๋ค.๋ ๊ฐ์ ๊ฒฝ์ฐ์, ์์ด์ฝ์ ์์ ํ๋ ๋ฐฉ๋ฒ์ ํํ๋ค.์ ๋ก๋์ค..
๋ฐฐํฌํ๊ฒ ๋๋ฉด์ ๊นจ๋ฌ์ ๊ฑด๋ฐ, json-server๋ json-server-auth๋ ์ด๋๊น์ง๋ Mock Server์๊ธฐ ๋๋ฌธ์ ์ค์ ํ๋ก๋์ ์๋ ์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ด์๋ค!๋คํํ, JSON ์๋ฒ๋ฅผ ํธ์คํ ํ ์ ์๋ ์๋น์ค์ธ Glitch๋ฅผ ๋ฐ๊ฒฌํ๋ค.Glitch ์๋น์ค

์ฝ ํ ๋ฌ๊ฐ vscode๋ก ๊ฐ๋ฐํ๊ณ local์์ ์๋ฌด ๋ฌธ์ ์์์ ํ์ธํ๊ณ ๋๋์ด ๋ฐฐํฌ๋ฅผ ์๋ฃํ๋ค. ๋ฐฐํฌ ๋ฐฉ๋ฒ๋ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ง๋ง, ์ผ๋จ ๋ฐฐํฌ ๋ฐฉ๋ฒ์ด ๊ฐ๋จํ๊ณ , ๋ฐฐํฌ ํ ์์ ํด๋ ๋ฐ๋ก ๊นํ ํธ์ฌ๋ก ์ฐ๋์ด ๊ฐ๋ฅํ netlify๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ํ๋ค. ๊ทธ๋ฆฌ๊ณ ... ๋ฐฐํฌ ํ