2024-03-19.md

๐Ÿก

DIL: ๋ชจ๋˜ ๋ฆฌ์•กํŠธ ๋”ฅ ๋‹ค์ด๋ธŒ, 3์ฃผ์ฐจ-2

์Šคํ„ฐ๋””: ์›”๊ฐ„ CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
์˜ค๋Š˜ ์ง„ํ–‰: ๊ฐœ์ธ๊ณต๋ถ€

DIL-week3-2_2024-03-19

| DIL ์ฃผ์ฐจ | ๋ฒ”์œ„ | ๋‚ด์šฉ | ์˜ค๋Š˜์ฐจ ์ง„๋„ | | -------- | ------ | ------------------------------------------------------ | ----------- | | 3์ฃผ์ฐจ | 6, 7์žฅ | ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ๋„๊ตฌ ๋””๋ฒ„๊น…, ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•œ ๋ถ„์„ | 432p~437p |

์˜ค๋Š˜ ์ฝ์€ ๋‚ด์šฉ์„ markdown์œผ๋กœ ๊ฐ„๋‹จํžˆ ๋ฉ”๋ชจ
์ฝ์€ ์‹œ๊ฐ„: 11์‹œ50๋ถ„~12์‹œ 20๋ถ„

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ํ™œ์šฉํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ถ„์„

  • ๋ฆฌ์•กํŠธ: react dev tools
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ: ๋ธŒ๋ผ์šฐ์ € ๊ฐœ๋ฐœ์ž ๋„๊ตฌ

ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ

  • ์‹œํฌ๋ฆฟ๋ชจ๋“œ์—์„œ ์—ฌ๋Š” ๊ฒƒ ๊ถŒ์žฅ
    • ๋ธŒ๋ผ์šฐ์ € ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ด ๋””๋ฒ„๊น…์— ๋ฐฉํ•ด๋จ
      • window ๊ฐ์ฒด ์ฐ์–ด๋ณด๋ฉด ์ „์—ญ๊ฐ์ฒด ์ฐจ์ด์  ํ™•์ธ ๊ฐ€๋Šฅ
    • ์ˆœ์ˆ˜ ์›น ํŽ˜์ด์ง€ ๊ด€๋ จ ์ •๋ณด๋งŒ ํ™•์ธํ•˜์ž

Element

  • HTML, CSS
    • ํŠน์ • ์š”์†Œ ๊ฐ•์กฐ
    • hot reloading์„ ๊ฑฐ์น˜์ง€ ์•Š์•„๋„ DOM ์ˆ˜์ •ํ•ด์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Œ
  • ์ค‘๋‹จ ์œ„์น˜
  • styles: (์Šคํƒ€์ผ ์ •๋ณด), computed (CSS ์ ์šฉ ๊ฒฐ๊ณผ๊ฐ’), layout (Grid, Flexbox), event listeners