โ˜•

๋ฉ˜ํ† ๋‹˜๊ณผ์˜ ์ปคํ”ผ์ฑ— #1

์‹œ์ž‘์ผ
Sep 24, 2023 21:00
ํƒœ๊ทธ
notion image
 

๋ฉ˜ํ† ๋‹˜์˜ ๊ท€ํ•œ ๋ง์”€๋“ค

 
  1. ์ž๊ธฐ์†Œ๊ฐœ ํƒ€์ž„
 
  • ํŠน์ • ๋„๋ฉ”์ธ์—์„œ์˜ ์ธํ„ด ๊ฒฝํ—˜ โ†’ ใ„ฑใ…Š
    • ๊ฒฐ๊ตญ ๋งŒ๋“œ๋Š”๊ฑด ์›น์ด๋‹ˆ๊นŒ
    • ์ถฉ๋ถ„ํžˆ ์ข‹์€ ๊ฒฝํ—˜ ๊ฐ€๋Šฅ

ํ”„๋กฑ์ด๋“ค์˜ ๊ถ๊ธˆํ•œ ์ 

๊ฐ€๋‚˜๋‹ค ์ˆœ์œผ๋กœ ์ •๋ ฌํ–ˆ์–ด์š” !!

๊น€๋ฏผ์ˆ˜

 

ํ˜„์žฌ ์ƒํ™ฉ

์ˆ˜์ง์ ์ธ ์กฐ์ง๋ฌธํ™”๊ฐ€ ์žˆ๋Š” ๊ณณ์€ ์ €์—๊ฒŒ ์••๋ฐ•๊ฐ์ด ํฌ๊ฒŒ ๋‹ค๊ฐ€์™€์„œ ๋‹ค์Œ ํšŒ์‚ฌ๋Š” ์ˆ˜ํ‰์ ์ธ ์กฐ์ง๋ฌธํ™”๋ฅผ ๊ฐ€์ง„ ๊ธฐ์—…์„ ๊ฐ€์„œ ๋‹ค์–‘ํ•œ ์˜๊ฒฌ ์ œ์‹œ ๋ฐ ์ž๊ธฐ ์„ฑ์žฅ, ์ž์œ ๋กœ์šด ๋ถ„์œ„๊ธฐ๋ฅผ ๋А๊ปด๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ง€์ธ์ด ๋ณ„๋กœ ์—†์–ด์„œ ์ธํ„ฐ๋„ท ๊ฒ€์ƒ‰๋งŒ ํ•ด์•ผํ•  ๋ฟ์ž…๋‹ˆ๋‹ค. ๋ฉ˜ํ† ๋‹˜์€ ๋‹ค์–‘ํ•œ ์Šคํƒ€ํŠธ์—…์„ ๊ฐ€์‹ ๊ฑธ๋กœ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์•Œ๊ธฐ๋กœ๋Š” ์Šคํƒ€ํŠธ์—…์˜ ์กฐ์ง๋ฌธํ™”๋Š” ๋Œ€์ฒด๋กœ ์ž์œ ๋กญ๊ณ  ์ˆ˜ํ‰์ ์ด๋ผ๊ณ  ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
 
  • ์Šคํƒ€ํŠธ์—…์˜ ์กฐ์ง๋ฌธํ™”๋“ค์€ ๋Œ€์ฒด๋กœ ์ž์œ ๋กญ๊ณ  ์ˆ˜ํ‰์ ์ด๋ผ๋Š”๊ฒŒ ์‚ฌ์‹ค์ธ์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
 
  • ํšŒ์‚ฌ๋ฅผ ๋“ค์–ด๊ฐ€์‹œ๊ธฐ ์ „์— ์–ด๋–ค๊ฒƒ์„ ์ค‘์š”์‹œ ํ•˜๊ฒŒ ๋ณด์‹œ๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค. ๊ทธ์— ๋”ฐ๋ฅธ ์ด์œ ๋„ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
 
  • ์–ด๋А ๊ณณ์„ ๊ฐ€๋“  ๋ฐฐ์šธ ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ, ํŠนํžˆ ๋ฐฐ์›€์ด ๋งŽ์€ ๊ณณ์€ ์–ด๋–ค ๊ณณ์ผ์ง€ ์•Œ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์„๊นŒ์š”..? (ex) ํ…Œํฌ ๋ธ”๋กœ๊ทธ๊ฐ€ ์žˆ๋Š” ๊ธฐ์—…)
 
  • ์Šคํƒ€ํŠธ์—…์€ ๊ฐœ๊ฐœ์ธ์˜ ์„ฑ์žฅ ๋˜ํ•œ ์ค‘์š”์‹œํ•˜๋Š”๊ฑธ๋กœ ์•Œ๊ณ  ์žˆ๋Š”๋ฐ ์‚ฌ์‹ค์ธ์ง€, ๋งŒ์ผ ์‚ฌ์‹ค์ด๋ผ๋ฉด ์–ด๋””์„œ ๊ทธ๋Ÿฐ ๊ฑธ ๋А๋ผ์…จ๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
 

๊ฐœ์ธ์ ์ธ ์งˆ๋ฌธ

 
  • ์ด์ „ ํšŒ์‚ฌ๋ฅผ ๋‹ค๋‹ˆ๋ฉฐ ๋ฌผ๊ฒฝ๋ ฅ์„ ์Œ“์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋–ณ๋–ณํ•˜๊ฒŒ ์„ฑ์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์–ด๋–ค๊ฑธ๊นŒ์š”?
  • ํ˜„์‹ค์ ์œผ๋กœ ๋Œ€ํ•™์œ ๋ฌด์— ๋”ฐ๋ฅธ ํ•œ๊ณ„๊ฐ€ ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
  • ํ•œ๊ตญ AWS์‚ฌ์šฉ์ž๋ชจ์ž„์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ์†Œ๋ชจ์ž„์— ๋Œ€ํ•ด์„œ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
  • ๋‹ค์‹œ๋‹ˆ๊ณ  ๊ณ„์‹œ๋Š” ๋‹น๊ทผ์— ๋Œ€ํ•ด ๋ฉ˜ํ† ๋‹˜์ด ๋А๋ผ์‹œ๋Š” ์žฅ๋‹จ์ ์€ ๋ฌด์—‡์ด ์žˆ๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฉ˜ํ† ๋‹˜์˜ ์ฃผ์œ„์— ์žˆ๋Š” ๋น„์ „๊ณต์ž๋Š” ์–ด๋–ค๊ฒŒ ์ƒ๋Œ€์ ์œผ๋กœ ๋ถ€์กฑํ•˜๋‹ค๊ณ  ๋А๋ผ์…จ๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
 
  • ๊ธฐํ•œ์‹œ์ผ ๋‚ด์— ์ฝ”๋“œ ์ž‘์„ฑ ํ•˜๋Š”๊ฒƒ, ๊ทธ๋ฆฌ๊ณ  ์„ฑ๋Šฅ์„ ์šฐ์„ ์‹œ ํ•ด์•ผ ํ•˜๋Š”๊ฒƒ .. ์ €๋Š” ํ›„์ž์—ฌ์„œ ํšŒ์‚ฌ์—์„œ ์ข…์ข… ์••๋ฐ•์ด ๋“ค์–ด์˜ฌ ๋•Œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ์จ ๋ณต๋ถ™์ด ๋งŽ์•„์กŒ๋Š”๋ฐ, ํƒ€ํ˜‘์ ์„ ๋งž์ถฐ์•ผ ํ• ๊นŒ์š”..? ์ข‹์€ ๋ฐฉ์•ˆ์ด ์žˆ์„๊นŒ์š”?
 
  • โ€˜์™ผ์†์žก์ด๋“คโ€™ ํŒ€์€ ์–ด๋–ป๊ฒŒ ํƒ„์ƒํ•˜๊ฒŒ ๋˜์—ˆ๋‚˜์š”??
 

์•ˆ์žฌํ˜„

  • ์š”์ฆ˜ ์ทจ์—… ์‹œ์žฅ์˜ ๋™ํ–ฅ์€ ์–ด๋–ค๊ฐ€์š” ? ๋‚ด๋…„์—” ์ทจ์—… ์‹œ์žฅ์ด ๋งŽ์ด ํ’€๋ฆด๊นŒ์š”โ€ฆ? ๐Ÿฅฒ
  • HTML/CSS, JS, React ๋“ฑ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ดˆ ์ง€์‹ ๊ณต๋ถ€๋ฅผ ์œ„ํ•œ ์ฑ… ์ถ”์ฒœ ํ•ด์ฃผ์„ธ์š” !!
 

์ด์Šน๋ฏผ

 

์ •๋‹ค์œค

์ทจ์—… ๊ด€๋ จ

  • ์‹ ์ž… ๊ฐœ๋ฐœ์ž ์ˆ˜์ค€์—์„œ, ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋Š” ์–ด๋–ค ์‹์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ์ฑ„์šฉ ์‹œ ๋” ์–ดํ•„ ๋  ์ˆ˜ ์žˆ์„๊นŒ์š”? (ex. ๊ธฐ์ˆ  ์ˆ˜์ค€, ๊ธ€ ์†œ์”จ, ํฌ์ŠคํŠธ์˜ ๊ฐœ์ˆ˜ ๋“ฑ๋“ฑ)
 
  • ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ, ๊ทธ ๊ธฐ์ˆ ์„ ์™œ ์ผ๋Š”์ง€, ๊ธฐ์ˆ  ์„ ํƒ์˜ ๊ทผ๊ฑฐ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๊ณ  ํ•˜๋Š”๋ฐ, ์†”์งํžˆ ๊ทธ๋™์•ˆ ์ €๋Š” โ€˜๊ทธ๋ƒฅ ~๋ฅผ ๋ฐฐ์›Œ๋ณด๊ณ ์‹ถ์–ด์„œโ€™, โ€˜ํ•  ์ค„ ์•„๋Š”๊ฒŒ ~๋ฐ–์— ์—†์–ด์„œโ€™์˜€๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์— ๋ฉด์ ‘์—์„œ ์—ฌ์ญค๋ณผ ์ˆ˜ ์žˆ์œผ๋‹ˆ ๊ทธ๋Ÿด์‹ธํ•œ ์ด์œ ๋ผ๋„ ๋งŒ๋“ค์–ด๋‘๋Š”๊ฒŒ ์ข‹์„๊นŒ์š”?
 
  • ํ”„์—” ๊ฐœ๋ฐœ์ž ์ž…์žฅ์—์„œ, ์–ด๋–ค ์‹ ์ž…์ด ๋“ค์–ด์˜ค๊ธฐ๋ฅผ ๋ฐ”๋ผ์‹œ๋‚˜์š”? (์‹ ์ž… ํ”„์—” ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐ–์ถ”์—ˆ์œผ๋ฉด ํ•˜๋Š” ์—ญ๋Ÿ‰)
 
  • ์š”์ฆ˜์€ ํ”„์—” ๊ฐœ๋ฐœ์ž ์ฑ„์šฉ ์‹œ ์ฝ”ํ…Œ ์–ธ์–ด๋ฅผ JS๋กœ ์ œํ•œํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•„์ง€๊ณ  ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
    • 1) ํ”„์—” ์ง๋ฌด๋ผ๋ฉด ๋ฐ˜๋“œ์‹œ ์ฝ”ํ…Œ๋ฅผ JS๋กœ ๋ณด๋Š”๊ฒŒ ์œ ๋ฆฌํ• ๊นŒ์š”?
      2) ์ €๋Š” ํ˜„์žฌ ํŒŒ์ด์ฌ์œผ๋กœ ์ฝ”ํ…Œ๋ฅผ ์—ฐ์Šตํ•ด์™”๋Š”๋ฐ, ๋นจ๋ฆฌ JS๋กœ ๋Œ๋ฆฌ๋Š”๊ฒŒ ์ข‹์„๊นŒ์š”?
       
  • ํ”„๋กœ์ ํŠธ ๋ฆฌ๋“œ๋ฏธ์— ์–ด๋–ค ๋‚ด์šฉ์„ ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹์„๊นŒ์š”? ์ด๊ฑด ๊ผญ ์จ์•ผํ•œ๋‹ค!! ๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋Š” ๋ถ€๋ถ„์ด ์žˆ์œผ์‹ ๊ฐ€์š”?
 
  • ๋ฐฐํฌ๊ฐ€ ์•ˆ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ (์ ‘๊ทผ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ)
    • ๋ฐฐํฌ๊ฐ€ ์˜๋ฏธ ์žˆ์œผ๋ ค๋ฉด : ์‚ฌ์šฉ์ž๊ฐ€ ์žˆ๋Š” ๊ฒƒ โ† ์ด๊ฒŒ ์ž„ํŒฉํŠธ
    • ์‚ฌ์šฉ์ž๊ฐ€ 0๋ช…์ด๋ฉด ์–ด์ฐจํ”ผ ๋‚ด๋ฆฌ๋‹ˆ๊น
 

๊ฐœ์ธ์ ์ธ ์งˆ๋ฌธ

  • ์š”์ฆ˜์€ ํ”„๋ก ํŠธ์—”๋“œ๋„ ํ…Œ์ŠคํŠธ๊ฐ€ ์ค‘์š”ํ•˜๋‹ค๊ณ  ํ•˜๋Š”๋ฐ, ์‹ค๋ฌด์—์„œ๋„ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž‘์„ฑํ•˜๊ณค ํ•˜๋‚˜์š”? ์‹ ์ž… ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด์„œ ํ”„๋ก ํŠธ์—”๋“œ ํ…Œ์ŠคํŠธ๋ฅผ ๊ณต๋ถ€ํ•ด์•ผ๋œ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๊ณต๋ถ€ํ•˜๋ฉด ์ข‹์„๊นŒ์š”?
 
  • ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด ์ˆœ์ •์œผ๋กœ ์ง์ ‘ ๊ฐœ๋ฐœํ•˜๊ธฐ ์–ด๋ ต๊ฑฐ๋‚˜ ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๋Š” ๋ถ€๋ถ„(ex. ์บ˜๋ฆฐ๋”, ์‹œ๊ณ„, ๋ชจ๋‹ฌ ์Šฌ๋ผ์ด๋” ๋“ฑ๋“ฑ, MUI๋‚˜ Bootstrap์„ ์‚ฌ์šฉ) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋Š”๋ฐ,
    • 1) ์ด๊ฒŒ ์ฑ„์šฉ ์‹œ ํ‰๊ฐ€์—์„œ ์•ˆ ์ข‹๊ฒŒ ์ž‘์šฉํ• ๊นŒ์š”?
      2) ์‹ค๋ฌด์—์„œ๋„ ์ด๋Ÿฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋‚˜์š”?
       
  • ํ˜„์žฌ ํ”„์—” ๊ฐœ๋ฐœ์ž 3๋ช…์ด ๊ฐ™์ด ํ•˜๊ณ  ์žˆ๋Š” ๊ทœ๋ชจ๊ฐ€ ์ž‘์ง€ ์•Š์€ ํ”Œ์ ์„ ํ•˜๋‚˜ ํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.
    • 1) ๋‚˜์ค‘์— ์ทจ์—…์„ ์œ„ํ•ด์„œ ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งก์€ ํŒŒํŠธ์—ฌ๋„ ์ฝ”๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋Œ์•„๊ฐ€๋Š”์ง€ ํŒŒ์•…ํ•˜๊ณ  ์žˆ๋Š”๊ฒŒ ์ข‹์„๊นŒ์š”?
      2) ์ฑ„์šฉ ์‹œ ์ง€์›์ž์˜ ํ˜‘์—… ํ”„๋กœ์ ํŠธ๋ฅผ ํ‰๊ฐ€ํ•  ๋•Œ ์ง€์›์ž๊ฐ€ ๋งก์€ ํŒŒํŠธ์˜ ์ฝ”๋“œ๋งŒ ์‚ดํŽด๋ณด์‹œ๋‚˜์š”?
       
  • ํœดํ•™์„ ํ•ด ์กธ์—…์„ ์กฐ๊ธˆ ๋ฏธ๋ค„์„œ๋ผ๋„ ์ทจ์ค€ ์ „์— ์ธํ„ด ๊ฒฝํ—˜์„ ์Œ“์•„๋‘๋Š”๊ฒŒ ์ข‹์„๊นŒ์š”?
    • ์„œ๋น„์Šค๋ฅผ ๋‹ค๋ฃจ๋Š” ํšŒ์‚ฌ๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ๋„๋ฉ”์ธ์„ ๋‹ค๋ฃจ๋Š” ํšŒ์‚ฌ์—์„œ์˜ ์ธํ„ด๋„ ์ข‹๊ฒŒ ๋ด์ฃผ์‹ค๊นŒ์š” ?
 
  • ์‹ ์ž… ์ฑ„์šฉ ๊ณต๊ณ ๋ฅผ ๋ณด๋‹ˆ, ๋ณดํ†ต ์ €๋Š” โ€˜์šฐ๋Œ€ ์‚ฌํ•ญโ€™์„ ๊ฑฐ์˜ ๊ฐ–์ถ”์ง€ ๋ชปํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ์ž๊ฒฉ ์š”๊ฑด๋งŒ ๋œ๋‹ค๋ฉด ์†Œ์‹  ์ง€์›ํ•ด๋ณด๋Š”๊ฒŒ ์ข‹์„๊นŒ์š”?
 
  • ์‹ ์ž… ๊ฐœ๋ฐœ์ž์—๊ฒŒ ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ๊ฐœ์„ , ์„ฑ๋Šฅ ์ตœ์ ํ™” ๊ฒฝํ—˜์„ ์š”๊ตฌํ•˜๋Š” ํšŒ์‚ฌ๊ฐ€ ๋งŽ์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋™์•ˆ ์ €๋Š” useMemo, useCallback, React.memo๋‚˜ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…, ๋ ˆ์ด์ง€ ๋กœ๋”ฉ ์ •๋„๋งŒ ์‚ฌ์šฉํ•ด๋ณด์•˜๊ณ , React dev tools์˜ Profiler๋กœ ๋ Œ๋”๋ง ์†๋„๋ฅผ ์ธก์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • 1) ์œ„์— ์–ธ๊ธ‰ํ•œ ์ €์˜ ๋ฐฉ๋ฒ•์ด ์ข‹์€ ๋ฐฉ๋ฒ•์ด ๋งž๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค
      2) ์‹ค๋ฌด์—์„  ์–ด๋–ค ์‹์œผ๋กœ ์„ฑ๋Šฅ์„ ์ธก์ •ํ•˜๊ณ  ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ๊ฐœ์„ ํ•˜๋Š”์ง€ ๊ถ๊ธˆํ•˜๊ณ ,
      3) ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•˜๊ณ  ํ…Œ์ŠคํŠธ ํ•ด์•ผ ์ฑ„์šฉ ๊ณผ์ •์—์„œ โ€˜์•„ ์ด ์ง€์›์ž๋Š” ์„ฑ๋Šฅ ๊ฐœ์„ ์„ ์ œ๋Œ€๋กœ ํ•ด๋ณด์•˜๊ตฌ๋‚˜โ€™๋ผ๊ณ  ํ‰๊ฐ€ ๋ฐ›์„ ์ˆ˜ ์žˆ์„์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.
 
 

ํ•˜์†กํฌ