Frontend ๊ฐœ๋ฐœ์ž - hyo.loui

WIL - [23.04.03 ~ 23.04.09] ๋ณธ๋ฌธ

WIL

WIL - [23.04.03 ~ 23.04.09]

hyo.loui 2023. 4. 9. 17:20

๐Ÿ“ WIL: Weekly I Learned

 


Work done this week

์ด๋ฒˆ ์ฃผ ๋๋‚ธ ์ผ!

  1. ํ‹ฐ์Šคํ† ๋ฆฌ ํฌ์ŠคํŒ… = ๋งค์ผ TIL ์ผ์ง€ (Study ๋‚ด์šฉ ๊ธฐ๋ก)
  2. ์ทจ์—… ์Šคํ„ฐ๋”” = ๋งค์ผ ๊ธฐ์ˆ ์งˆ๋ฌธ 2๋ฌธ์ œ, ์ด๋ ฅ์„œ ํ”ผ๋“œ๋ฐฑ
  3. React : ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ํ”„๋ก ํŠธ์—”๋“œ ์ฑŒ๋ฆฐ์ง€ = ๊ฐ•์˜ ์ˆ˜๊ฐ• ( ์›ํ‹ฐ๋“œ ์ฃผ๊ด€ Zoom ๊ฐ•์˜ )
  4. ๋งค์ผ ์Šคํ„ฐ๋”” ํ™œ๋™ = ์ž๋ฃŒ๊ตฌ์กฐ, ์•Œ๊ณ ๋ฆฌ์ฆ˜ ( ๋ฐœํ‘œ์ž๋ฃŒ ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ… ์ž‘์„ฑ )
  5. ๋งค์ผ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ ํ’€์ด = ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ( ๋งค์ผ 2๋ฌธ์ œ )

 


Study review

 

์ž๋ฃŒ๊ตฌ์กฐ, ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ๋ฐœํ‘œํ•˜๋ฉด์„œ ๋Š๋‚€์ ์€

๋‚ด๊ฐ€ ์ง€๊ธˆ๊นŒ์ง€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ํ’€์ด ๋ฐฉ๋ฒ•์ด ๋„ˆ๋ฌด ๋ง‰ ํ’€์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค.

 

์ด๋ ‡๊ฒŒ ๋งŽ์€ ๋ฐฉ๋ฒ•๋ก ๊ณผ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ์ˆ™์ง€ํ•˜๊ณ  ๊ณต๋ถ€ํ–ˆ๋‹ค๋ฉด

์ผ๊ด€์„ฑ์žˆ๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜ ํ’€์ด๋ฅผ ํ–ˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

 

ํ•˜์ง€๋งŒ, ๋‚˜๋งŒ์˜ ํ’€์ด ๋ฐฉ๋ฒ•๋Œ€๋กœ ์ง„ํ–‰ํ•˜๋ฉด์„œ

์ง€๊ธˆ๊นŒ์ง€ ์ƒ๊ฐํ•˜์ง€ ์•Š์•˜๋˜ ์ฐฝ์˜์ ์ธ ์ƒ๊ฐ๋„ ์กฐ๊ธˆ์”ฉ ๋ฌป์–ด๋‚˜์˜จ ๊ฒƒ ๊ฐ™๋‹ค.

 

์ด์ œ ๋ฌธ์ œํ’€์ด๋ฅผ ํ•˜๋ฉด์„œ ๋‚ด๊ฐ€ ํ•™์Šตํ–ˆ๋˜ ๊ฒƒ(์ด์ง„ํƒ์ƒ‰ํŠธ๋ฆฌ, DFS, BFS)์„ ๋Œ€์ž…ํ•˜๋Š” ์—ฐ์Šต์„ ํ•ด์•ผ๊ฒ ๋‹ค.


ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ์ฑŒ๋ฆฐ์ง€ review

 

React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ๊นŠ๊ฒŒ ์ƒ๊ฐํ•ด ๋ณด์ง€ ์•Š์€ ๋‚ด์šฉ(๊ฐ€์ƒ๋”, ์‹ค์ œ๋”)๋“ค์„ ๋‹ค๋ค˜๊ณ 

ํ•ต์‹ฌ์œผ๋กœ React v18.0 ์˜ ์‹ ๊ธฐ๋Šฅ์„ ๋Œ€์ž…ํ•ด์„œ ํฅ๋ฏธ๋กœ์šด ๊ฐ•์˜์˜€๋‹ค.

 

๋˜ํ•œ vite(๋น—)์„ ์ƒˆ๋กœ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค.

ํ”„๋ž‘์Šค์–ด๋กœ '๋น ๋ฅด๋‹ค'๋ผ๋Š” ๋œป์œผ๋กœ

์ด์ „๊นŒ์ง€๋Š” Create React App ์ด ๋ฆฌ์•กํŠธ์˜ ์ฃผ๋œ ๋นŒ๋“œํˆด ์ด์˜€๋‹ค๋ฉด,

์ƒˆ๋กญ๊ฒŒ ์ถœ์‹œ ํ•œ ๋นŒ๋“œํˆด์ด๋‹ค.

 

์ฃผ์š” ์žฅ์ ์œผ๋กœ๋Š” build ์‹œ ์ฒด๊ฐ์†๋„๊ฐ€ ์›นํŒฉ๋ณด๋‹ค ๋งค์šฐ ๋น ๋ฅด๋ฉฐ

์‹ค๋ฌด์—์„œ ๊ธ‰ํ•œ ๋ฒ„๊ทธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ hotfix๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ํ†กํ†กํžˆ ํšจ๊ณผ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์œผ๋ฉฐ,

 

์ฃผ์š” ๋‹จ์ ์œผ๋กœ๋Š” lazy component๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์—†๋‹ค.

dynamic import๋Š” rollup ์„ค์ •์„ ํ†ตํ•ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ lazy component์˜ ๊ฒฝ์šฐ vite/rollup ๊ตฌ์„ฑ์—์„œ ์ง€์›์ด ์•ˆ๋œ๋‹ค.

 


์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œํ’€์ด

 

๋งค์ผ 2๋ฌธ์ œ๋ฅผ ํ’€๋ฉด์„œ ๋Š๋‚€์ ์€ vanilla javascript์˜ ์ž์ฒด ๋ฉ”์„œ๋“œ๊ฐ€

๋งŽ์ง€๋งŒ, ๋ชฉ์ ์— ๋งž๊ฒŒ ์ž˜ ์‚ฌ์šฉํ•˜๊ณ  ์†์— ์ต์œผ๋ฉด ์•„์ฃผ ์‰ฝ๊ฒŒ ํ’€ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค.

 

0๋ ˆ๋ฒจ์„ ๋งˆ๋ฌด๋ฆฌํ•˜๊ณ  1๋ ˆ๋ฒจ๋กœ ๋„˜์–ด๊ฐ”๋Š”๋ฐ ์•„์ง ์ดˆ๋ฐ˜์ด๋ผ ๊ทธ๋Ÿฐ์ง€ ์ƒ๊ฐ๋ณด๋‹ค๋Š”

์กฐ๊ธˆ๋งŒ ์ƒ๊ฐํ•˜๋ฉด ํ’€ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

 

์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ์•ž์œผ๋กœ ํ’€์–ด๋‚˜๊ฐ€๋ฉด์„œ ํ•™์Šตํ•œ ์ž๋ฃŒ๊ตฌ์กฐ, ์ •๋ ฌ, ํƒ์ƒ‰์„ ๋Œ€์ž…ํ•ด์„œ ํ’€๋ฉด

์ข‹์œผ๋ จ๋งŒ ์•„์ง ๋ฐฐ์›Œ์•ผ ํ•  ๊ฒƒ๋“ค์ด ๋งŽ๋‹ค.

 


 

 

2023 ์˜ฌ ํ•œํ•ด๋„ ๋ชจ๋“  ๊ฒƒ์„ ์Ÿ์•„ ๋ชฐ์ž… ํ•ด๋ณด์ž!

 

๐Ÿฆพ ๋น ์ดํŒ…๊ทธ.