DFS๊ฐ๋ ์ ์ฌ์ฉํด์ ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ์ด๋ณด์.<๊ทธ๋ฆผ 1>๊ณผ ๊ฐ์ด ์ ์ฌ๊ฐํ ๋ชจ์์ ์ง๋๊ฐ ์๋ค. 1์ ์ง์ด ์๋ ๊ณณ์, 0์ ์ง์ด ์๋ ๊ณณ์ ๋ํ๋ธ๋ค. ์ฒ ์๋ ์ด ์ง๋๋ฅผ ๊ฐ์ง๊ณ ์ฐ๊ฒฐ๋ ์ง์ ๋ชจ์์ธ ๋จ์ง๋ฅผ ์ ์ํ๊ณ , ๋จ์ง์ ๋ฒํธ๋ฅผ ๋ถ์ด๋ ค ํ๋ค. ์ฌ๊ธฐ์ ์ฐ๊ฒฐ๋์๋ค๋ ๊ฒ
์์ ํ์ ์ข ๋ฅ ์ค BFS, DFS์ ๋ํด์ ์์๋ณด์. DFS(๊น์ด ์ฐ์ ํ์) ์๋์ชฝ level๋ก ๋ด๋ ค๊ฐ๋ค๊ฐ ๋์ด์ ์๋ level์ด ์์ผ๋ฉด ๊ฐ์ฅ ๊ฐ๊น์ด ๋ถ๋ชจ ๋ ธ๋๋ก ๊ฑฐ์ฌ๋ฌ ์ฌ๋ผ๊ฐ ๋ค ํ์ํ์ง ์์ ๋ค๋ฅธ ์์ ๋ ธ๋๋ฅผ ํ์ํ๋ ๋ฐฉ์์ด๋ค. ํ์ ์์ ๋ ธ๋๋ฅผ ์คํ์ ์ฝ์
๋ ๋ค๋ฅธ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ 'Recoil'์ ๋ํด์ ์์๋ณด์. Recoil? ํ์ด์ค๋ถ์์ ์ง์ ๋ง๋ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. Recoil ์ฌ์ฉํ๊ธฐ ์ ์ญ์์ ์ฌ์ฉํ ์ ์๋๋ก root์ recoilRoot ๊ฐ์ธ์ฃผ๊ธฐ atom ๊ธฐ์กด์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ฐ์ด๋
๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ server์์ ๋น๋๊ธฐ ๋ก์ง์ฝ๋๋ฅผ ์ค์ฌ๋ณด์.state๋ฅผ ๊ด๋ฆฌํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก server์ client ์ฌ์ด์ ๋น๋๊ธฐ ๋ก์ง๋ค์ ์ฝ๊ฒ ๋ง๋ค์ด์ฃผ๋ ๋๊ตฌ์ด๋ค.๊ทธ๋์ React Query๋ฅผ ์ฌ์ฉํ๋ฉด ๋ญ๊ฐ ์ข์๋ฐ?์ฒซ๋ฒ์งธ, ์ผ๋ จ์ ์ฝ๋๋ฅผ ํ ์ค์ฌ์ค๋ค. ๋ฐ์ด
์์ ํ์ ์๊ณ ๋ฆฌ์ฆ์ ๋ํด ๊ณต๋ถํด๋ณด์. ์์ ํ์ ๋ชจ๋ ๊ฒฝ์ฐ์ ์๋ฅผ ํ์ํ์ฌ ๊ฒฐ๊ณผ๋ฅผ ์ฐพ์๋ด๋ ๋ฐฉ๋ฒ์ด๋ค. ๋ชจ๋ ํ์ํ๊ธฐ ๋๋ฌธ์ ์ ๋ต์ 100% ์ฐพ์๋ผ ์ ์์ง๋ง, ๊ฒฝ์ฐ์ ์์ ๋ฐ๋ผ ์คํ์๊ฐ์ด ๋น๋ก๋๋ค. ์ฆ, ํ์ ๋ฒ์๊ฐ ๋๋ค๋ฉด ๊ทธ๋งํผ ์ฐพ์๋ด๋ ์ผ์ ํด์ผํ๊ธฐ ๋๋ฌธ์ ํจ์จ์
B๋ฅผ A์ฒ๋ผ ๋ณ๊ฒฝํด์ A๋ก ์ฌ์ฉํ์.์ฌํ๊ฐ ๋ ์ ์์ด ๋ค๋ฅธ ๊ณณ์์ ๊ธฐ๊ณ๋ฅผ ์ถฉ์ ํ๋ ค๋ฉด ์ ์์ ๋ฐ๊ฟ์ฃผ๋ ์ด๋ํฐ๊ฐ ํ์ํ๋ค.ํ๋ก๊ทธ๋๋ฐ์์๋ ๋ค๋ฅธ ํด๋์ค์ ์ธํฐํ์ด์ค๋ฅผ ํด๋ผ์ด์ธํธ์์ ์ฌ์ฉํ๊ณ ์ ํ๋ ๊ฒฝ์ฐ, ์ฆ, ๋ค๋ฅธ ์ธํฐํ์ด์ค๋ก์ ๋ณํ์ด ํ์ํ ๋ ์ด๋ํฐ๊ฐ ํ์ํ๋ค.์ด๋ ์ฌ์ฉ
"import { Module } from" ๊ณผ "import Module from" ์ ์ฐจ์ด์ ์ ๋ํด ์์๋ณด์. import, export ๋ฌธ์ JavaScript ๋ชจ๋์์ ํจ์, ๊ฐ์ฒด, ์์ ๊ฐ์ ๋ด๋ณด๋ด๊ฑฐ๋ ๋ถ๋ฌ์ฌ ๋ ์ฌ์ฉํ๋ค.์ฌ๋ฌ ๊ฐ๋ค์ export/importํ
๋ค๋ฅธ ๋ ๋ฐฐ์ด์ ํ ๋ฐฐ์ด์ฒ๋ผ ๋ง๋ค์ด๋ณด์.ํ๋์ฝ๋ฉ๋ ๋ถ๋ถ์ ๋งต์ ๋๋ ค์ ์์๊ฒ ๋ง๋ค์ด๋ณด์.๋ชฉํ: ์๋ก ๋ค๋ฅธ ๋ ๋ฐฐ์ด์ ๊ฐ์ง๊ณ ํ๋์ ๋งต์ ๋๋ ค ํ๋ฉด์ ๋ํ๋ด์ผ ํ๋ค. \-> zip array ํ์ฉํ๊ธฐ์์์ ๊ฐฏ์๊ฐ ์ ํด์ ธ ์๋ ๋ฐฐ์ด, ํํํํ์ฐ์ ๋ฐ์ดํฐ์์ ํ์ํ ๋ถ๋ถ์
๋ฆฌ๋์ค๋ฅผ ํธ๋ฆฌํ๊ฒ ์ฌ์ฉํ ์ ์๊ฒ ๋์์ฃผ๋ ๐์ข ํฉ์ ๋ฌผ์ธํธ '๋ฆฌ๋์ค ํดํท'์ ๋ํด ์์๋ณด์.๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ๋ค๋ณด๋ฉด ์ก์ ํ์ ,์ก์ ์์ฑํจ์, ๋ฆฌ๋์ ๋ฑ ๋ฐ๋ณต๋๋ ์ฝ๋,์ฆ ๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋๋ฌธ์ ํผ๋ก๊ฐ์ ๋๋ ์ ์๋ค.์ด๋ ๋ฆฌ๋์ค ํดํท์ ์ฌ์ฉํ๋ฉด ์ฝ๋๋ฅผ ์ข ๋ ๊ฐ๊ฒฐํ๊ฒ ๋ง๋ค
'๋ฆฌ๋์ค ๋ฏธ๋ค์จ์ด'๋ฅผ ์ฌ์ฉํด์ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํด๋ณด์. ๋ฆฌ๋์ค ๋ฏธ๋ค์จ์ด๋? ๋ฏธ๋ค์จ์ด๋ ์ก์ ๊ณผ ๋ฆฌ๋์ ์ฌ์ด์ ์ค๊ฐ์๋ก, ์ก์ ์ ๋์คํจ์นํ์ ๋ ๋ฆฌ๋์์์ ์ด๋ฅผ ์ฒ๋ฆฌํ๊ธฐ์ ์์ ์ฌ์ ์ ์ง์ ๋ ์์ ๋ค์ ์คํํ ์ ์๊ฒ ํด์ค๋ค. ๋ฆฌ๋์ค๋ ์ก์ ๊ฐ์ฒด๊ฐ ์์ฑ๋๊ณ , ๋์คํจ์น๋ฅผ
๋ฆฌ์กํธ ๊ฐ๋ฐ ๋ผ์ดํ๋ฅผ ๋์์ค ui ์ปดํฌ๋ํธ ๊ฐ๋ฐํ๊ฒฝ '์คํ ๋ฆฌ๋ถ'์ ๋ํด์ ์์๋ณด์. Storybook ์คํ ๋ฆฌ๋ถ์ ๊ฐ์ข ๋ผ์ฐํ ๊ณผ ์คํ ์ดํธ๋ค๋ก ์ฐ๊ฒฐ๋์ด์๋ ๋ฆฌ์กํธ presentational component๋ค์ ๋ ธ๋ฉ๋ผ์ด์ฆ์์ผ ๋ ๋ฆฝ๋ ํ๊ฒฝ์์ ๋์๊ฐ๊ฒ ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด
IDL์ ๋น๊ตํ๊ณ , ๊ทธ ์ค 'protocol buffer'์ ๋ํด ์์ธํ ์์๋ณด๊ณ ์ฌ์ฉํด๋ณด์. IDL(Interfaece Definition Language) ํ๋กํ ์ฝ ๋ฒํผ๋ฅผ ์๋ ค๋ฉด ๋จผ์ IDL์ ๋ํ ๊ฐ๋ ์ ์์์ผ ํ๋ค. ์ด๋ฏธ ์๊ณ ์๋ ๊ฐ๋ ์ธ ํ๋กํ ์ฝ์ ์๋ฒ์ ํด๋ผ
๋ฆฌ์กํธ ํ์ด์ง์ฒ๋ฆฌ๋ฅผ ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ๋น๊ตํ๊ณ ์ํฉ์ ๋ง๋ ๋ผ์ฐํฐ๋ฅผ ์ ์ฉํด๋ณด์. Redirect(with public route& private route) ์ฌ์ฉ์์ ๋ก๊ทธ์ธ ์ํ๋ ๊ถํ์ ๋ฐ๋ผ ์ ๊ทผํ ์ ์๋ ๊ฒฝ๋ก๊ฐ ๋ค๋ฅด๋ค. ์ด ๊ณผ์ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด์ Priva
์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ธ ์ต๊ทค๋ฌ,๋ทฐ์ ๋ฌ๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๋ฆฌ์กํธ๋ ์์ฒด์ ์ผ๋ก ์ํ๊ด๋ฆฌ ๋๊ตฌ๋ฅผ ์ ๊ณตํ์ง ์๊ธฐ ๋๋ฌธ์ ์ํ๊ด๋ฆฌ๋ฅผ ์ํด์ 'Redux'์ ์ฌ์ฉ๋๋ค. ๋ฆฌ์กํธ์ redux๋ฅผ ์ ์ฉํ์ฌ ์ฌ์ฉํด๋ณด์. ์ปดํฌ๋ํธ ๊ตฌ์กฐ ๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ ๋ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ํจํด์ ํ
for๋ฌธ๊ณผ while๋ฌธ์ ์ฐจ์ด์ ์ ๋ํด ์ ํํ ์์๋ณด์.๋ฐ๋ณต๋ฌธ์ for, while์กด์ฌ์ ๋ํด์๋ ์์์ง๋ง ์ด๋ค ๊ฒฝ์ฐ์ ๊ตฌ๋ถํด์ ์ฐ๋์ง ๋ชฐ๋๊ธฐ ๋๋ฌธ์ ์ค์ง for๋ฌธ๋ง ์ฌ์ฉํด์๋ค. ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๋ฅผ ํ๋ค๊ฐ while๋ฌธ์ ์ฌ์ฉํด์ผํ๋ ์ด์ ๋ฅผ ๋ฑ ์ฐพ์์ ์ ๋ฆฌํด์ผ๊ฒ ๋ค๊ณ ์๊ฐํ๋ค
๋ฆฌ์กํธ์ ์ํ๊ด๋ฆฌ ๋๊ตฌ redux๋ฅผ ์ ์ฉํด๋ณด์. ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ธ ์ต๊ทค๋ฌ,๋ทฐ์ ๋ฌ๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ ๋ฆฌ์กํธ๋ ์์ฒด์ ์ผ๋ก ์ํ๊ด๋ฆฌ ๋๊ตฌ๋ฅผ ์ ๊ณตํ์ง ์๊ธฐ๋๋ฌธ์ 'Redux'์ ์ฌ์ฉ๋๋ค. ๋ฆฌ๋์ค์ ๊ตฌ์ฑ 1.store ๋ฐ์ดํฐ๋ค์ ์ ์ฅํด๋๋ ๊ณต๊ฐ์ผ๋ก ํ ์ ํ๋ฆฌ์ผ์ด์ ๋น
keyof typeof๋ฅผ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ ์์ ์ ๋ํด ์์๋ณด์.์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ณ์์ ๋ฐ์ดํฐ ํ์ ์ ๋ฐํํ๋ typeof ์ฐ์ฐ์๊ฐ ์กด์ฌํ๋ค.ํ์ ์คํฌ๋ฆฝํธ๋ ๋ณ์ ๋๋ ์์ฑ์ ์ ํ์ ์ฐธ์กฐํ๊ธฐ ์ํด typeof๋ฅผ ์ฌ์ฉํ๋ค.๊ธฐ๋ณธ์ ํ๋ณด๋ค๋ ๋ค๋ฅธ ์ ํ ์ฐ์ฐ์์ ๊ฒฐํฉํ์ฌ t
null ํ์ ์ค๋ฅ๋ฅผ ํด๊ฒฐํ๊ณ ์ ๋ฆฌํด๋ณด์.null ํ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ ๊ฒฝ์ฐ, ํผ์ฐ์ฐ์๊ฐ Nullish(null or undefined)๊ฐ์ด ์๋์ ๋ช ์ํด์ผ ํ๋๋ฐ if์กฐ๊ฑด๋ฌธ์ ์ฌ์ฉํ๊ฑฐ๋, non-null assertion๋ฅผ ์ฌ์ฉํ์ฌ ํด๊ฒฐํ ์ ์๋ค.null์ด ์๋