์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ, ์‹ค์ „ ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”(feat. React) - Part. 2

๋ฆฌ์•กํŠธ๋กœ ๋งŒ๋“ค์–ด์ง„ ์›น ์„œ๋น„์Šค์˜ ์„ฑ๋Šฅ์„ ์ธก์ •ํ•˜๊ณ  ๋”์šฑ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ตœ์ ํ™” ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

Thumbnail

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ
๋ฐฐ์›Œ์š”!

  • ์›น ์„œ๋น„์Šค์˜ ์„ฑ๋Šฅ์„ ๋ถ„์„ํ•˜๋Š” ๋ฐฉ๋ฒ•

  • ๋‹ค์–‘ํ•œ ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™” ๊ธฐ๋ฒ•๋“ค

  • ๋ธŒ๋ผ์šฐ์ € ๋™์ž‘ ์›๋ฆฌ

  • ํฌ๋กฌ devtools ์‚ฌ์šฉ๋ฒ•

  • React devtools ์‚ฌ์šฉ๋ฒ•

  • ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ์ตœ์ ํ™”

์‹ค๋ ฅ์žˆ๋Š” FE ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•˜๊ธฐ ์œ„ํ•œ 
์‹ค์ „! ์›น ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ์ตœ์ ํ™”.

์ง€๋‚œ ํŒŒํŠธ์— ๋‹ฌ๋ฆฐ
์ƒ์ƒํ•œ ์ˆ˜๊ฐ•ํ‰์„ ํ™•์ธํ•˜์„ธ์š”!

๊ฐ•์˜ ํŽ˜์ด์ง€์—์„œ ๋” ๋งŽ์€ ์ˆ˜๊ฐ•ํ‰์„ ๋ณผ ์ˆ˜ ์žˆ์–ด์š”. (ํด๋ฆญ)

์ด ๊ฐ•์˜๋Š”?

์ธํ”„๋Ÿฐ ๋ฒ ์ŠคํŠธ!
์‹ค์ „ ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™” ์‹œ๋ฆฌ์ฆˆ ๐ŸŽฒ

Part.1์ง€๋‚œ ๊ฐ•์˜  

  • ๋ธ”๋กœ๊ทธ ์‚ฌ์ดํŠธ ์ตœ์ ํ™”
  • ์˜ฌ๋ฆผํ”ฝ ํ†ต๊ณ„ ์‚ฌ์ดํŠธ ์ตœ์ ํ™”

Part.2ํ˜„์žฌ ๊ฐ•์˜ 

  • ์ผ๋ฐ˜ ํ™ˆํŽ˜์ด์ง€ ์ตœ์ ํ™”
  • ์ด๋ฏธ์ง€ ๊ฐค๋Ÿฌ๋ฆฌ ์ตœ์ ํ™”

Part.3์˜ˆ์ • ๊ฐ•์˜  

  • ์ค€๋น„์ค‘!

๋‹ค์–‘ํ•œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด, ์›น ์„œ๋น„์Šค์˜ ๋ถ„์„๊ณผ ์ตœ์ ํ™” ๊ธฐ๋ฒ•์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
ํ”ํ•˜๊ฒŒ ์ด๋ก ๋งŒ ์•Œ๋ ค์ฃผ๋Š” ๋ฌด์ฑ…์ž„ํ•œ ์ผ๋ฐ˜์ ์ธ ์ตœ์ ํ™” ๊ฐ•์˜์™€ ๋‹ค๋ฅธ,
์‹ค์ „ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ง์ ‘ ๋ถ„์„๊ณผ ์ตœ์ ํ™”๋ฅผ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š”
๊ตญ๋‚ด ์ตœ์ดˆ ์„ฑ๋Šฅ ์ตœ์ ํ™” ์—‘๊ธฐ์Šค ๊ฐ•์˜์ž…๋‹ˆ๋‹ค!


์ƒ์œ„ 10% ํ”„๋ก ํŠธ์—”๋“œ 
๊ฐœ๋ฐœ์ž๋ฅผ ํ–ฅํ•ด.

ํ”„๋ก ํŠธ์—”๋“œ๋ผ๋Š” ๋ถ„์•ผ๊ฐ€ ๋‚˜์˜จ ์ง€ ๊ฝค ์ง€๋‚ฌ์ง€๋งŒ, 
์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”์— ๋Œ€ํ•ด์„œ ์ž˜ ์•Œ๊ณ  ์žˆ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋Š” ๋ณ„๋กœ ์—†์Šต๋‹ˆ๋‹ค. 

์ด๋Ÿฐ ํ˜„์‹ค ์†์—์„œ, 
์›น ์„ฑ๋Šฅ ์ตœ์ ํ™” ๊ธฐ๋ฒ•์„ ์ตํ˜€ ๊ณ ๊ธ‰ ํ”„๋ก ํŠธ์—”๋“œ ์ธ์žฌ๊ฐ€ ๋ ์ง€, 
๋‹จ์ˆœ ํผ๋ธ”๋ฆฌ์‹ฑ๋งŒ ํ•˜๋Š” ๊ทธ์ € ๊ทธ๋Ÿฐ ์ง์›์ด ๋ ์ง€๋Š” ์—ฌ๋Ÿฌ๋ถ„์˜ ์„ ํƒ์ž…๋‹ˆ๋‹ค.


๊ฐ•์˜๋ฅผ ๋ฏธ๋ฆฌ
ํ™•์ธํ•ด๋ณด์„ธ์š”.

ํ•™์Šต ๋‚ด์šฉ

  • Performance ํŒจ๋„์„ ์ด์šฉํ•œ ๋ถ„์„
  • Lighthouse ํŒจ๋„์„ ์ด์šฉํ•œ ๋ถ„์„
  • Network ํŒจ๋„์„ ์ด์šฉํ•œ ๋ถ„์„
  • Coverage ํŒจ๋„์„ ์ด์šฉํ•œ ๋ถ„์„
  • React Developer Tools ํ™œ์šฉ๋ฒ•
  • Redux DevTools ํ™œ์šฉ๋ฒ•
  • ์ด๋ฏธ์ง€ ์ง€์—ฐ(Lazy) ๋กœ๋”ฉ
  • ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ ์ตœ์ ํ™”
  • ๋™์˜์ƒ ์‚ฌ์ด์ฆˆ ์ตœ์ ํ™”
  • ํฐํŠธ ์ตœ์ ํ™”
  • ์บ์‹œ ์ตœ์ ํ™”
  • ๋ถˆํ•„์š”ํ•œ CSS ์ œ๊ฑฐ ๋ฐฉ๋ฒ•
  • Layout Shift ํ”ผํ•˜๋Š” ๋ฒ•
  • UseSelector ๋ Œ๋”๋ง ๋ฌธ์ œ ํ•ด๊ฒฐ
  • Redux Reselect๋ฅผ ํ†ตํ•œ ๋ Œ๋”๋ง ์ตœ์ ํ™”
  • Memoization์„ ์ด์šฉํ•œ ์ตœ์ ํ™”
  • ๋ณ‘๋ชฉ ํ•จ์ˆ˜ ๋กœ์ง ๊ฐœ์„ 

์ˆ˜์—… ๋ฏธ๋ฆฌ๋ณด๊ธฐ

ํ•™์Šต ๋Œ€์ƒ์„ ํ™•์ธํ•ด์ฃผ์„ธ์š”!

  • ๋ณธ ๊ฐ•์˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์›น ๊ฐœ๋ฐœ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๋ถ„๋“ค๊ป˜ ์ ํ•ฉํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ํŠนํžˆ, React(๋ฆฌ์•กํŠธ) ์‚ฌ์šฉ ๊ฒฝํ—˜์ด ์žˆ๋‹ค๋ฉด ๋ณด๋‹ค ์ˆ˜์›”ํ•˜๊ฒŒ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜๋ฅผ ๋งŒ๋“  
์ง€์‹๊ณต์œ ์ž๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

์œ ๋™๊ท 

  • (ํ˜„) ํ•ด์น˜๋žฉ์Šค ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž
  • (์ „) ๋ผ์ธ ํŒŒ์ด๋‚ธ์…œ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž
  • ์‚ผ์„ฑ SSAFY, ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋“ฑ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๊ฐ•์˜
  • ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™” ํ”„๋กœ์ ํŠธ ๋ฐ ๊ฐ•์˜ ์ œ์ž‘
  • ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์›จ์–ด 393ํ˜ธ(JS ์ฃผ์ œ), 392ํ˜ธ(๋ธ”๋ก์ฒด์ธ ์ฃผ์ œ) ๊ธฐ๊ณ 

์„ฑ๋Šฅ ์ตœ์ ํ™”๋ผ๋Š” ๊ฑธ โ€˜์–ด๋–ป๊ฒŒ' ๋ฐฐ์šฐ๋Š” ๊ฒŒ ์ข‹์€๊ฐ€์— ๋Œ€ํ•œ ์›๋ก ์ ์ธ ๊ณ ๋ฏผ์„ ํ•˜๋‹ค๊ฐ€ ์ด ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด์ „์— ์—ฌ๋Ÿฌ ์›น ์„œ๋น„์Šค์˜ ์„ฑ๋Šฅ์„ ๋ถ„์„ํ•˜๊ณ , ์ตœ์ ํ™”ํ•ด๋ณธ ๊ฒฝํ—˜์„ ๋Œ์ด์ผœ๋ณด๋‹ˆ, ์ด๋ก ๋ถ€ํ„ฐ ๋งŽ์ด ์•Œ๋ ค๋“œ๋ฆฌ๊ธฐ๋ณด๋‹ค ์˜ˆ์ œ ์„œ๋น„์Šค๋ฅผ ์ง์ ‘ ๋ถ„์„ํ•˜๊ณ  ์‹ค์Šตํ•ด๋ณธ๋‹ค๋ฉด ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”์— ๋Œ€ํ•ด ํ™•์‹คํ•˜๊ฒŒ ํ•™์Šตํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์–ด์š”.

์‚ฌ์‹ค ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ผ๋Š” ๊ฒƒ์€ ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๊ณ , ๋ฐฉ๋ฒ•๋„ ๋‹ค์–‘ํ•˜์ง€๋งŒ, ๊ทธ ์ค‘ ํ•ต์‹ฌ์ ์ธ ๊ฒƒ๋“ค์„ ๋ชจ์•„ ๋†จ๊ณ , ๋‹จ์ˆœํžˆ ์ตœ์ ํ™” ๊ธฐ๋ฒ•๋งŒ์ด ์•„๋‹Œ ๋ธŒ๋ผ์šฐ์ €์˜ ๋™์ž‘ ์›๋ฆฌ์™€ ์„ฑ๋Šฅ์˜ ๋ถ„์„ ๋ฐฉ๋ฒ• ๋“ฑ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ๋ผˆ๊ฐ€ ๋˜๊ณ  ์‚ด์ด ๋˜๋Š” ๊ฒƒ๋“ค๋„ ์•Œ๋ ค์ฃผ๋‹ˆ ์—ด์‹ฌํžˆ ํ•™์Šตํ•ด์ฃผ์„ธ์š”. ์งˆ๋ฌธ์€ ์–ธ์ œ๋‚˜ ํ™˜์˜์ž…๋‹ˆ๋‹ค.


์˜ˆ์ƒ ์งˆ๋ฌธ Q&A.

Q. ๊ฐ•์˜ ๋‚œ์ด๋„๋Š” ์–ด๋Š ์ •๋„์ธ๊ฐ€์š”?

๊ธฐ๋ณธ์ ์œผ๋กœ ์›น์— ๋Œ€ํ•œ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ์„ฑ๋Šฅ ์ตœ์ ํ™”์˜ ๋ถ€๋ถ„์—์„œ๋Š” ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์ž์„ธํžˆ ์„ค๋ช…์„ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜์‹œ๋Š” ๋ถ„์ด๋ผ๋„ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜์—์„œ๋Š” ์–ด๋–ค ํ”„๋กœ๊ทธ๋žจ(๋˜๋Š” ํˆด)์„ ์‚ฌ์šฉํ•˜๋‚˜์š”?

ํฌ๋กฌ์˜ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ(devtools)๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์™ธ์— ํ•„์š”์— ๋”ฐ๋ผ ์ถ”๊ฐ€์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, ์‚ฌ์šฉ๋ฒ•์ด๋‚˜ ๊ฐ„๋‹จํ•œ ์„ค๋ช…์„ ๊ฐ™์ด ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•™์Šตํ•˜๋Š”๋ฐ ์–ด๋ ค์›€์€ ์—†์„ ๊ฒ๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜๋งŒ์˜ ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์žˆ์„๊นŒ์š”?

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

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”์— ๊ด€์‹ฌ์ด ์žˆ๋Š” ๊ฐœ๋ฐœ์ž

  • ๋” ๋น ๋ฅด๊ณ  ๊ฐ€๋ฒผ์šด ์›น ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ํฌ๋กฌ devtools๋ฅผ ๋”์šฑ ์ž˜ ํ™œ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ๊ฒฝ์Ÿ๋ ฅ์„ ๊ฐ–์ถ”๊ณ  ์‹ถ์€ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML5, Javascript, CSS

  • React.js

์•ˆ๋…•ํ•˜์„ธ์š”
์œ ๋™๊ท ์ž…๋‹ˆ๋‹ค.

3,290

๋ช…

์ˆ˜๊ฐ•์ƒ

176

๊ฐœ

์ˆ˜๊ฐ•ํ‰

102

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

21๊ฐœ โˆ™ (7์‹œ๊ฐ„ 53๋ถ„)

์ˆ˜์—… ์ž๋ฃŒ

๊ฐ€ ์ œ๊ณต๋˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

โ‚ฉ57,750

25%

โ‚ฉ77,000