๋ถ๋ฅ ์ ์ฒด๋ณด๊ธฐ (38) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ ํ๋ก ํธ์๋ ๊ธฐ์ ๋ฉด์ ์ง๋ฌธ ๋๋์ด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ์ทจ์ ์ ์ฑ๊ณตํ๋ค. ๊ทธ๋์ ์ฌ๋ฌ ๊ธฐ์ ๋ค์ ์ฌ์ฉ๋ฒ ์์ฃผ๋ก ์ตํ๋ํฐ๋ผ ๋ง์ ๊ธฐ์ ๋ฉด์ ์ ๋ณด๋ ์๊ฐ๋ณด๋ค ๋ ์ด๋ ค์ ๋ค. ๊ทธ๋์ ์์ผ๋ก ๊ธฐ์ ์ ์ตํ ๋ ๊ผญ ์ด๋ก ์ ์ธ ๋ถ๋ถ๋ ์ดํดํ๋ฉด์ ๊น์ด ๊ณต๋ถํด์ผ๊ฒ ๋ค๊ณ ๋๊ผ๋ค. ์๋ฌดํผ ๋ฉด์ ์ ์ค๋นํ๋ฉด์ ๊ณต๋ถํ๋ ๋ด์ฉ๋ค์ ๊ฐ๋จํ ๊ธฐ๋กํด ๋ณด์. ์ง๋ฌธ ํญ๋ชฉ์ ๋ด๊ฐ ์์ ํ ํ๋ก์ ํธ ๊ธฐ์ ์คํ ์์ฃผ์ด๋ค. React ๋ฆฌ์กํธ ์ฅ๋จ์ ์ฅ์ : ๋ฆฌ์กํธ๋ ๊ธฐ๋ฅ ๋จ์, UI ๋จ์๋ก ์บก์ํํ์ฌ(๋ฌถ์ด์) ์ฝ๋๋ฅผ ๊ด๋ฆฌํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฌ์ฉ์ฑ์ด ๋์ต๋๋ค. ๋ํ ๊ฐ์ ๋์ ์ฌ์ฉํด ์ด๋ฒคํธ ๋ฐ์ ์ UI๋ฅผ ๋น ๋ฅด๊ฒ ๋๋๋งํ์ฌ ์ฌ์ฉ์์๊ฒ ์ข์ ํผํฌ๋จผ์ค๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค. ๋จ์ : ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋๋๋ง ํ๊ธฐ ๋๋ฌธ์ ์ด๊ธฐ ๋ก๋ฉ์๊ฐ์ด ๊น๋๋ค. ๊ทธ๋ฆฌ๊ณ SEO๊ฐ ์ ์ ํ์ง ์์ ์ ์์ต๋๋ค. ๊ทธ ์ด์ .. heroku ์๋๋ฐฐํฌ ์ค๋ฅ ๋ฐฐํฌํ ์น์ฌ์ดํธ์ ์๋ฌ๋ฅผ ๋ฐ๊ฒฌํด์ ์ถ๊ฐ ์์ ํ์๋๋ฐ ์๋๋ฐฐํฌ๊ฐ ๋์ง ์์๋ค. ๊ทธ๋์ ๋ญ๊ฐ ๋ฌธ์ ์ธ์ง ๋ชฐ๋ผ ํ์ฐธ ํค๋ฉ๋ค๊ฐ heroku ์๋ฆผ์ ๋ณด๋ ๋ณด์ ์ ๋ฐ์ดํธ๋ก ์ธํ ์ ์ฑ ๋ณ๊ฒฝ์ผ๋ก ๊นํ๋ธ์ ๋ญ๊ฐ ์ฐ๋์ด ์๋๋ค๊ณ ํ๋ค. ๊ตฌ๊ธ๋ง ํด๋ณด๋ heroku CLI๋ฅผ ์ค์นํด ๋ฐฐํฌ๋ฅผ ์งํํ๋ฉด ๋๋ ๊ฑฐ ๊ฐ์ ํด๋ณด๋ ์ ํด๊ฒฐ๋๋ค. ๋ค์ ํ๋ก์ ํธ ๋ฐฐํฌ ์์๋ ์ด๋ฐ ์ํฉ์ด ๋ ๋ฐ์ํ ์ ์์ผ๋ ์ผ๋จ ๊ธฐ๋กํด๋์. heroku login heroku git:remote -a git push heroku main // ๋ธ๋์น๋ main ๋๋ master react + express ํ๋ก์ ํธ ๋ฐฐํฌ ํ๊ธฐ (heroku ์ด์ฉ) ํ์ฌ react์ express๋ฅผ ์ด์ฉํ ํ๋ก์ ํธ๋ฅผ ์งํ์ค์ธ๋ฐ ๊ฑฐ์ ์์ฑ๋์ด๊ฐ์ ๋ฏธ๋ฆฌ ์ฐ์ต์ผ์ ๋ฐฐํฌ๋ฅผ ํด๋ณด์๋ค. ํผ์์ ๋ฐฐํฌํ๋ ๊ฒ์ ์ฒ์์ด๋ผ ์๋ง์ ์๋ฌ๋ฅผ ๋ง๋ฌ๊ณ ํด๊ฒฐํ๋๋ฐ ๊ฝค ๋ณต์กํ๋ค. ๊ทธ๋์ ๊ทธ ๊ณผ์ ์์๋ฅผ ๊ฐ๋จํ ๊ธฐ๋กํด๋ณธ๋ค. #. ํ๋ก์ ํธ ์ธํ ๋จผ์ heroku๋ฅผ ์ด์ฉํด ๋ฐฐํฌํ๋๋ฐ ๊นํ๋ธ ๋ ํ์งํ ๋ฆฌ๋ฅผ ์ฐ๋ํด์ผํจ์ผ๋ก ์๋ก์ด ๋ ํ์งํ ๋ฆฌ๋ฅผ ์์ฑํ๋ค. ๊ธฐ์กด์ client์ server๋ฅผ ๊ฐ๊ฐ์ ๋ ํ์งํ ๋ฆฌ๋ฅผ ๋ง๋ค์ด ๊ฐ๋ฐํ์ด์ ๋ชจ๋ ํด๋ก ํด์ ํ๋๋ก ํฉ์ณค๋ค. 1) server ํด๋ ์์ server.js ํ์ผ์ ์์ ์ด ํ์ํ๋ค. '/' ๊ฒฝ๋ก์ get ์์ฒญ ์ client ํด๋์ index.html ํ์ผ์ ๋ณด์ฌ์ฃผ๋๋ก ์ฝ๋๋ฅผ ์ถ๊ฐํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ธฐ์กด์ PORT ๊ฐ์ด 5000์ผ๋ก ๊ณ ์ ๊ฐ์ด์๋๋ฐ heroku์์ ์ฐ ํฌ.. session vs jwt ๋ก๊ทธ์ธ ๋ก๊ทธ์ธ์ ๊ตฌํํ๋๋ฐ ์์ฃผ ์ฌ์ฉ๋๋ ๋ฐฉ์์ผ๋ก ์ธ์ (Session)๋ฐฉ์๊ณผ ํ ํฐ(JWT)๋ฐฉ์์ด ์๋ค. ๊ทธ๋์ ๊ฐ๋จํ ์ด ๋๊ฐ์ง ๋ฐฉ์์ ์ด๋ป๊ฒ ๋ค๋ฅธ์ง๋ฅผ ๊ฐ๋จํ ์ ๋ฆฌํด๋ณด๊ณ , ๋ด๊ฐ JWT์ ์ด์ฉํด ๋ก๊ทธ์ธ์ ๊ตฌํํ ๋ฐฉ์๋ ๊ธฐ๋กํด๋ณด๋ ค ํ๋ค. #. http stateless ๋จผ์ http๋ connectionless(๋น์ฐ๊ฒฐ์ฑ), stateless(๋ฌด์ํ) ๋ผ๋ ๋๊ฐ์ง ํน์ฑ์ ๊ฐ์ง๊ณ ์๋ค. ๋น์ฐ๊ฒฐ์ฑ์ด๋ ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์ ์์ฒญ์ ๋ณด๋ด์ด ์๋ฒ๊ฐ ํด๋ผ์ด์ธํธ์ ์๋ต์ ๋ง์น ํ ์ฐ๊ฒฐ์ ๋์ด๋ฒ๋ฆฌ๋ ํน์ง์ ๋งํ๋ค. ์ฆ ํด๋ผ์ด์ธํธ์ ์๋ฒ๊ฐ ํ๋ฒ์ ํต์ ์ด ์ด๋ฃจ์ด์ง ํ ๊ทธ ์ฐ๊ฒฐ์ฑ์ด ๋์ด์ง๋ ๊ฒ. ๊ทธ๋ฆฌ๊ณ ๋ฌด์ํ๋ ๋น์ฐ๊ฒฐ์ฑ ํน์ง์ผ๋ก ์ธํด ์๋ฒ๊ฐ ํด๋ผ์ด์ธํธ ์๋ณํ ์ ์๋ ํน์ง์ ๋งํ๋ค. ํด๋ผ์ด์ธํธ์ ์๋ฒ๊ฐ ํ๋ฒ์ ํต์ ํ ์ฐ๊ฒฐ์ด ๋์ด์ง๊ธฐ ๋.. redux-saga๋ฅผ ์ด์ฉํ ๋น๋๊ธฐ ๊ตฌํ react, react-toolkit, redux-saga ์ด ์ธ๊ฐ์ง ์กฐํฉ์ผ๋ก ๋น๋๊ธฐ ์์ ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๊ธฐ๋กํด๋ณด์ - ๐ #. ๋ชฉํ: list ํ์ด์ง ์ง์ ์ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๊ธฐ 1) ๊ฐ์ฅ ๋จผ์ api ํธ์ถํ๋ ์ฝ๋๋ฅผ ์์ฑํด๋ณด์. axios๋ฅผ ์ด์ฉํด get ์์ฒญ์ ์๋ฒ์ ๋ณด๋ด๊ณ ์๋ฒ๊ฐ ์๋ตํด์ค ๋ฐ์ดํฐ๋ฅผ ๋ฆฌํดํ๋ค. // api code export const latestVideos = async () => { try { const result = await axios.get('/videos/latest'); if(result) return res.data; } catch(err) { console.log(err) } } 2) react-toolkit์ ์ด์ฉํด act.. React + Express ๋ฌดํ ์คํฌ๋กค ๊ธฐ๋ฅ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋ฌดํ ์คํฌ๋กค ๊ธฐ๋ฅ์ ๊ตฌํํด๋ณด์๋ค. ํ๋ก ํธ์์๋ ์ฒ์ ๊ตฌํํ๋ ๊ธฐ๋ฅ์ด์์ง๋ง ๋ฐฑ์๋๋ ์ฒ์์ด๋ผ ์ฌ๋ฌ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์๋ค. ๊ทธ๋์ ๊ทธ ๊ณผ์ ์ ๊ฐ๋ตํ ๊ธฐ๋กํ๊ณ ์ ํ๋ค. #. ๋ฌดํ ์คํฌ๋กค ๊ธฐ๋ฅ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ํ๋ฒ์ ๋ถ๋ฌ์ค๊ฒ ๋๋ฉด ๊ทธ๋งํผ ์ฌ์ฉ์์๊ฒ ๋ก๋ฉ๋์ด ๋ณด์ฌ์ง๋ ์๋๊ฐ ๋ฆ์ด์ง๊ฒ ๋๋ค. ๋ฐ๋ผ์ ์ฒ์ ๋ก๋ฉ๋์์ ๋ ์ฌ์ฉ์์๊ฒ ์ผ์ ๋ฐ์ดํฐ๋ง ๋จผ์ ์ ๊ณตํ๊ณ ์ดํ ์ฌ์ฉ์๊ฐ ๋ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ ค๊ณ ์คํฌ๋กค์ ์์ง์ด๋ ์ก์ ์ ์ทจํ๋ฉด, ๊ทธ๋ ์ถ๊ฐ๋ก ๋ ์ผ์ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํด์ฃผ๋ ๊ฒ์ ๋ฐ๋ณตํ๋ ๊ฒ์ด ๋ฌดํ ์คํฌ๋กค ๊ธฐ๋ฅ์ด๋ค. #. ๋ฐฑ์๋ ๊ตฌํ ๋ชฉํ: ํด๋ผ์ด์ธํธ์์ ๋ฐ์ดํฐ ์์ฒญ ์ ์๋ง๋ ๋ฐ์ดํฐ๋ฅผ ๋๊ฒจ์ฃผ๋ ๊ฒ! ๋ฐฑ์๋๋ฅผ ๊ตฌํํ๋๋ฐ ๊ฐ์ฅ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์๋ค. ๋ฐฑ์๋์์ ์ด๋ป๊ฒ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด์ฃผ๋๋์ ๋ฐ๋ผ ํ๋ก ํธ์๋์์ ๋ฐ์ด.. ์๋ฐ์คํฌ๋ฆฝํธ ๋๊ธฐ์ ๋น๋๊ธฐ #. ๋๊ธฐ๋ ์์ฒญ์ ๋ณด๋ธ ํ ์๋ต์ ๋ฐ์์ผ์ง๋ง ๋ค์ ๋์์ด ์ด๋ฃจ์ด์ง๋ ๋ฐฉ์์ด๋ค. ์ฆ A ์์ฒญ ํ ์๋ต์ ๋ฐ์ ๋๊น์ง ๋ค์ B ๋์์ ์คํ๋ ์ ์๋ ๊ฒ์ด๋ค. ๋๊ธฐ๋ ๋์์ ์ผ์ด๋๋ค๋ ๋ป์ด๋ค. ๋ฐ๋ผ์ ๋๊ธฐ๋ ์ ์ฒด ์์ ์ ํ๋ฆ์ด ํ๋์ ์ค๊ธฐ์ ๋ฐ๋ผ ์์ฐจ์ ์ผ๋ก ์คํ๋๋ค๊ณ ์๊ฐํ์! #. ๋น๋๊ธฐ๋ ์์ฒญ์ ์ฆ์ ์ฒ๋ฆฌํ์ง ์์๋ ๊ทธ ๋๊ธฐ ์๊ฐ๋์(์๋ต์ค๊ธฐ ์ ๊น์ง์ ์๊ฐ) ๋ค๋ฅธ ๋์์ด ์ด๋ฃจ์ด์ง๋ ๋ฐฉ์์ด๋ค. ์ฆ C ์์ฒญ ํ ์๋ต ๋ฐ์ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ด ์๋ ๋ค์ B ๋์๋ ๋ฐ๋ก ์คํ์ํค๋ ๊ฒ์ด๋ค. ๋ฐ๋ผ์ ๋น๋๊ธฐ๋ ์ ์ฒด ์์ ์ ํ๋ฆ์ด ํ๋์ ํฐ ์ค๊ธฐ ์์์ ์ฌ๋ฌ ๊ฐ๋๋ก ๋๋์๋ค๊ฐ ๋ค์ ํฐ ์ค๊ธฐ๋ก ๋ชจ์ด๋ ๋ณ๋ ฌ์ ์ผ๋ก ์คํ๋๋ค๊ณ ์๊ฐํ์! #. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋จ์ผ ์ค๋ ๋, ๋๊ธฐ์์ผ๋ก ๋์ํ๋ค. ์ฆ ํ ๋ฒ์ ํ๋์ ์์ ์ .. React + Redux(Redux-toolkit) + Redux-saga ํ์ฌ ๊ฐ์ธ ํ๋ก์ ํธ๋ก React์ Redux, Redux-saga๋ฅผ ์ด์ฉํด ๊ฐ๋ฐ ์ค์ด๋ค. ๊ทธ๋์ ๊ฐ๊ฐ ์ด๋ค ์ด์ ๋ก ์ด์ฉํ๋์ง ์ ๋ฆฌํ๊ณ ์ ๊ธ์ ์ ์ด๋ณธ๋ค. #. React ๋ฆฌ์กํธ๋ ๊ธฐ๋ฅ ๋จ์, UI ๋จ์๋ก ์บก์ํํ์ฌ ์ฝ๋๋ฅผ ๊ด๋ฆฌํ๊ธฐ ๋๋ฌธ์ ์ฌ์ฌ์ฉ์ฑ์ด ๋๋ค. ๋ํ Virtual DOM์ ํตํด ์ด๋ฒคํธ ๋ฐ์ ์ ์ค์ DOM๊ณผ ๋ณ๊ฒฝ์ฌํญ์ ๋น๊ตํ์ฌ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ์ฌ๋๋๋งํ๋ค. ๋ฐ๋ผ์ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋์์ ๋ ํจ์จ์ ์ผ๋ก ๋๋๋ง์ ์ํํ ์ ์์ด ์ํธ์์ฉ์ด ๋ง์ UI๋ผ๋ ์ฌ์ฉ์์๊ฒ ์ข์ ํผํฌ๋จผ์ค๋ฅผ ์ ๊ณตํ ์ ์๋ค. #. Redux / Redux-toolkit ๋ฆฌ์กํธ๋ ๋จ๋ฐฉํฅ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ์ ์๊ธฐ ๋๋ฌธ์ ์ปดํฌ๋ํธ ๊ตฌ์กฐ๊ฐ ๋ณต์กํ ์๋ก ๋ฐ์ดํฐ๋ฅผ ์ถ์ ํ๊ณ ๊ด๋ฆฌํ๋๋ฐ ์ด๋ ค์์ด ๋ฐ์ํ๋ค(*Props Drilling ์ด์). ์ด.. ์ด์ 1 2 3 4 5 ๋ค์