๋ฉํ ๋ง 11๋ฒ์งธ
๐ F-lab ๋ฉํ ๋ง ๊ธฐ๋ก
โ ๋ฆฌ์กํธ๋ฅผ ์ ์ฌ์ฉํ ๊น?
- ์ปดํฌ๋ํธ ๋จ์์ ์ฝ๋ ์์ฑ : UI๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ๋ณ์ ์ธ ๋ทฐ ๋จ์์ธ ์ปดํฌ๋ํธ ๋จ์๋ก ์ฝ๋๋ฅผ ์์ฑํ๊ณ ์ด๋ฐ ์ปดํฌ๋ํธ๋ค์ ์กฐํฉํ์ฌ ์ดํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํด์ง๋๋ค. ์ ์ง๋ณด์ ๋ฐ ์ฌ์ฌ์ฉ์ฑ์ด ์์นํ๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
- JSX(JavaScript + XML)์์ ์กฐํฉ : ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ฅ ๋ฌธ๋ฒ์ผ๋ก์ ๋ฆฌ์กํธ์ ํจ๊ป ์ฐ์์ ๋, ์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์์ฐ์ฑ์ ๋์ธ๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
- Virtual DOM : ๊ฐ์๋์ ํตํด ์ ์ ์ธํฐ๋ ์ ์ด ์์ ๋๋ง๋ค ์ง์ Real DOM์ ์กฐ์ํ์ง ์์ต๋๋ค. ๋ฐ๋ผ์ ์ง์ DOM์ ์กฐ์ํ์ฌ ๋๋๋งํ์ ๋์ ๋นํจ์จ์ฑ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
๋ฌผ๋ก ์์ ํน์ง๋ค์ด ๋ฆฌ์กํธ๋ง์ ํน์ง์ผ๋ก ๋ณด๊ธฐ๋ ์ด๋ ค์ธ ์ ์์ง๋ง, ์์ ๊ฐ๋ ๋ค์ ์ฑ๊ณต์ ์ผ๋ก ์ ์ฉํ ํ๋ก ํธ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๊ณ ๋ณผ ์ ์์ต๋๋ค.
โ ๊ฐ์ DOM์ด๋? ๊ฐ์ DOM์ ์กฐ์ํ๋ค๋ ๊ฒ์ ๋ฌด์จ ์๋ฏธ์ธ์ง?
์ค์ DOM์ด ์๋ ๋ฆฌ์กํธ์์ ๊ตฌ์ฑํ ๊ฐ์ฌ์ DOM์
๋๋ค. ๊ฐ์ DOM์ ์กฐ์ํจ์ผ๋ก์จ, ์ค์ DOM์ ์กฐ์ํ ๋๋ง๋ค ์ผ์ด๋๋ ๋๋๋ง์ ๋นํจ์จ์ ํด๊ฒฐํ๊ณ , ๋ฐ์ดํฐ์ ๋ณํ(์ํ ๋ณํ)๊ฐ ์ผ์ด๋๋ node์ ํํด ๋๋๋ง์ ์งํํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์ด๋ค ์ ์ ์ interaction์ ์ํด 10๋ฒ์ ๋ณํ๊ฐ ์ผ์ด๋๋ค๋ฉด(๋ค์ ๊ทน๋จ์ ์ธ ์์)
- Real DOM : ์ด 10๋ฒ์ ๋ณํ์ ๋ํด 10๋ฒ์ ๋ฆฌํ๋ก์ฐ, ๋ฆฌํ์ธํธ ๋ฑ์ ๋ฆฌ๋๋๋ง ๊ณผ์ ์ด ๋ฐ์ํฉ๋๋ค.
- Virtual DOM : ๊ฐ์์ DOM์ ์ ์ฉํด๋ณธ ํ, ์ค์ DOM์์ ๋ณํ๊ฐ ์๋ ๋ถ๋ถ๋ง์ 1๋ฒ ๋๋๋งํฉ๋๋ค.
โ useState ํ ์ ์ด๋ป๊ฒ ๊ตฌํ์ด ๋์ด์๋์?
ํด๋ก์ ๋ฅผ ํตํด ์ด์ state๊ฐ์ ๊ธฐ์ตํ๊ณ ์ฐธ์กฐํ ์ ์๊ฒ ํ์ฌ ๋๋๋ง๋๋ง๋ค state ๊ฐ์ด ์ด๊ธฐํ๋์ง ์๊ฒ ๊ตฌํ๋์ด์์ต๋๋ค.
์ฐธ๊ณ
โ useEffect์์๋ event remove๋ ์ด๋ป๊ฒ ํ ์ ์์๊น์?
useEffect์ ์ธ์๋ก ์ ๋ฌ๋๋ ์ฝ๋ฐฑํจ์ ๋ด๋ถ์ ์ปดํฌ๋ํธ unmount ์, ์คํ์ํฌ ์ฝ๋ฐฑํจ์๋ฅผ returnํจ์ผ๋ก์จ event๋ฅผ ์ ๊ฑฐํ ์ ์์ต๋๋ค.
โ ํ์ ์คํฌ๋ฆฝํธ๋ ์ ํ์ํ๊ณ ์ด๋ค ๋์ ํ์ํ ๊น์?
- ์ ์ ํ์ ์ ์ง์ํจ์ผ๋ก์จ ์ปดํ์ผ ๋จ๊ณ์์ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ธฐ ์ฝ๋ค.
- IDE์ ๊ฐ์ ๋๊ตฌ์ ํ์ ์ ์ ๊ณตํ๊ฒ ๋จ์ผ๋ก์จ, ์๋ฐ์คํฌ๋ฆฝํธ๋ณด๋ค ๋ ๋์ ์์ค์ ์ฝ๋ ์ด์์คํธ, ํ์ ์ฒดํฌ, ๋ฆฌํฉํ ๋ง ๋ฑ์ ์ง์๋ฐ์ ์ ์๋ค.
- ์ธํฐํ์ด์ค, ์ ๋ค๋ฆญ ๋ฑ์ ํตํด ๊ฐ๋ ฅํ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ ์ง์์ ๋ฐ์ ์ ์๋ค.
์ฝ๋์ ๊ธธ์ด๊ฐ ๊ธธ์ด์ง์๋ก ์์ ์ฅ์ ๋ค์ด ๋ ๋ถ๊ฐ๋๋ฏ๋ก, ๋๊ท๋ชจ ํ๋ก์ ํธ ์์ ํ์๋ผ๊ณ ๋ณผ ์ ์์ต๋๋ค.
โ ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React-Query)๋?
react์์์ ๋น๋๊ธฐ ๋ก์ง์ ์ฝ๊ฒ ๋ค๋ฃจ๊ฒ ํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- ๋น๋๊ธฐ ์์ฒญ์ ๋ฐ์ดํฐ ๋ฌด๊ฒฐํจ์ ๋ํด ๊ฐ๋ฐ์๊ฐ ์๋ react ์ฑ์ด ์ฑ ์์ง๊ฒ ํ๋ค.
- ๋น๋๊ธฐ ์์ฒญ ๋ฐ์ดํฐ๊ฐ view์์ ํ์ํ๊ธฐ ์ ์ ๋น๋๊ธฐ ์์ฒญ์ด ๋์ํจ์ผ๋ก์จ ๋ฐ์ดํฐ๋ฅผ ์ฐธ์กฐํ ์ ์๊ฒ ํด์ค๋ค.
- ์์ฒญ ์๊ฒฐ ์งํ ๋ฐ์ดํฐ ์ฐธ์กฐ ํน์ ์์ธ์ฒ๋ฆฌ๊ฐ ์ด๋ฃจ์ด์ก๋ ๋น๋๊ธฐ ์์ฒญ์์ ๋ฒ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์์ ์บ์ฑ, ๋ฆฌํจ์นญ์ ์งํํ๋ฉฐ ์์ฒญ ์์ ์ด ๋ฐ์ดํฐ ์ฐธ์กฐ ์ง์ ์ด ์๋๋๋ผ๋ view์์ ๋ฐ์ดํฐ๊ฐ ํ์ํ ๋ ์ต์ ๋ฐ์ดํฐ๋ฅผ ์ฐธ์กฐํ ์ ์์์ ๋ณด์ฅํ๊ฒ ํด์ค๋ค.
- context๋ฅผ ์ฌ์ฉํด ๋น๋๊ธฐ ์๋ฒ ์ํ๋ฅผ ์ ์ญ์ผ๋ก ๊ด๋ฆฌํ ์ ์๊ฒ ํด์ค๋ค.(์๋ฐํ ๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ ์ ์ญ ์ํ๋ฅผ
ํด๋ผ์ด์ธํธ ์ํ
์์๋ฒ ์ํ
๋ก ๊ตฌ๋ถํ๋ค.)
โ MSW๋ ๋ฌด์์ด๊ณ ์ด๋จ ๋ ์ฌ์ฉํ ๊น์?
MSW๋ Mock Service Worker์ ์ฝ์๋ก, ์๋น์ค ์์ปค๋ฅผ ์ฌ์ฉํ์ฌ ๋คํธ์ํฌ ํธ์ถ์ ๊ฐ๋ก์ฑ๋ api mocking ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๊ฐ ๊ฐ๋ฐ ์, ๋ฐฑ์๋ api์ธ ์ฒํ๋ฉฐ ํด๋ผ์ด์ธํธ ์์ฒญ์ ๋ํ ์๋ต์ ์ ๊ณต๋ฐ์ ์ ์์ต๋๋ค. ์ฃผ๋ก ์๋ฒ๊ฐ ๊ฐ๋ฐ๋์ง ์์ ์ํ์์ ์์ฒญ/์๋ต์ ํ ์คํธํ ๋ ์ฌ์ฉํฉ๋๋ค.
โ yarn berry๋ ๋ฌด์์ด๊ณ ์ฅ์ ์ด ๋ญ๊น?
Yarn berry๋ Node.js๋ฅผ ์ํ ์๋ก์ด ํจํค์ง ๊ด๋ฆฌ ์์คํ ์ ๋๋ค. ๊ธฐ์กด NPM์ด ๊ฐ๊ณ ์๋ ๋ฌธ์ ์ ๋ค์ ํด๊ฒฐ์ต๋๋ค. ๊ธฐ์กด npm์ ๋ฌธ์ ์ ๋ค์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ๋นํจ์จ์ ์ธ ์์กด์ฑ ๊ฒ์
- ํ๊ฒฝ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ ๋์
- ์ค์น์ ๋นํจ์จ์ฑ
- ์ฉ๋ ์์ฒด๊ฐ ๋๋ฌด ์ปค์ ํญ์ git์ .gitignore๋ก ์ ๋ก๋ํ์ง ์๊ณ ๊ทธ์ ๋ฐ๋ผ ํด๋น ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ํฌํฌํ๋ฉด ๋ค์ ๋ชจ๋๋ค์ ์ค์นํด์ผํจ
- ์ ๋ น ์์กด์ฑ
- ์ค๋ณต ์ค์น๋๋ ๋ชจ๋์ ํจ์จ์ ์ฌ๋ฆฌ๊ธฐ ์ํด ๋ค๋ฅธ ํจํค์ง์ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์ ์๋๋ฐ, ์คํ๋ ค ์ด ์ ์ด ๋ค๋ฅธ ํจํค์ง๋ฅผ ์ ๊ฑฐํ์ ๋ ์๋ฆฌ์์ด ์ฌ์ฉํ๋ ์์กด์ฑ์ด ์ฌ๋ผ์ง๊ฒ ๋์ด ๋จ์ ์ผ๋ก ์์ฉ
์์ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ๊ธฐ ์ํด yarn berry๋ Plug n Play(PnP)
, ZipFS(Zip FileSystem)
,Zero-Install
๋ฑ์ ์ฌ์ฉํฉ๋๋ค.
โ CSS in JS(styled component)์ atomic CSS(tailwind)์ ๊ฐ๊ฐ์ ์ฅ๋จ์ ์ด ๋ฌด์์ผ๊น์?
- ing
Reference
๊ฐ์ DOM ํ์ ์คํฌ๋ฆฝํธ ๋ฆฌ์กํธ ์ฟผ๋ฆฌ ๋ฆฌ์กํธ ์ฟผ๋ฆฌ - ํด๋ผ์ด์ธํธ ์ํ ๊ด๋ฆฌํ๊ธฐ MSW
-
- โ ๋ฆฌ์กํธ๋ฅผ ์ ์ฌ์ฉํ ๊น?
- โ ๊ฐ์ DOM์ด๋? ๊ฐ์ DOM์ ์กฐ์ํ๋ค๋ ๊ฒ์ ๋ฌด์จ ์๋ฏธ์ธ์ง?
- โ useState ํ ์ ์ด๋ป๊ฒ ๊ตฌํ์ด ๋์ด์๋์?
- โ useEffect์์๋ event remove๋ ์ด๋ป๊ฒ ํ ์ ์์๊น์?
- โ ํ์ ์คํฌ๋ฆฝํธ๋ ์ ํ์ํ๊ณ ์ด๋ค ๋์ ํ์ํ ๊น์?
- โ ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React-Query)๋?
- โ MSW๋ ๋ฌด์์ด๊ณ ์ด๋จ ๋ ์ฌ์ฉํ ๊น์?
- โ yarn berry๋ ๋ฌด์์ด๊ณ ์ฅ์ ์ด ๋ญ๊น?
- โ CSS in JS(styled component)์ atomic CSS(tailwind)์ ๊ฐ๊ฐ์ ์ฅ๋จ์ ์ด ๋ฌด์์ผ๊น์?