๐ŸŒ• 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