๐Ÿธminzzi
Minzzi์•ผ
๐Ÿธminzzi
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (132)
    • ์˜ค๋ฅ˜ํ•ด๊ฒฐ (14)
    • FE (36)
      • Next.js (17)
      • React (4)
      • React Native (0)
      • TypeScript (1)
      • JavaScript (14)
    • BE (0)
      • Nest.js (0)
    • ๋ฐ๋ธŒ์ฝ”์Šค (7)
    • ์›น ํ”„๋กœ์ ํŠธ (5)
    • CS (28)
      • Algorithm (5)
      • Python (4)
      • C++ (2)
      • Operating System (4)
      • Computer Networking (3)
      • Data Structure (1)
      • Machine Learning (3)
      • Tip (6)
    • Github (4)
    • Flutter (3)
      • ํ”„๋กœ์ ํŠธ (3)
    • Private (3)
      • ํšŒ๊ณ  (7)
      • ๋ฉด์ ‘ (17)
    • ๊ฐœ๋ฐœ๋„์„œ (7)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ๋ฉด์ ‘
  • ๋ ‰์‹œ์ปฌ
  • layout shift
  • ์‹คํ–‰์ปจํƒ์ŠคํŠธ
  • ์ฝœ์Šคํƒ
  • ๋ชจ๋˜๋ฆฌ์•กํŠธ๋”ฅ๋‹ค์ด๋ธŒ
  • next.js
  • ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…
  • ์ด๋ฏธ์ง€ ์ตœ์ ํ™”
  • ์ด๋ฒคํŠธ๋ฃจํ”„
  • ํž™์˜์—ญ
  • ์‹คํ–‰์ปจํ…์ŠคํŠธ
  • ์›์‹œํƒ€์ž…
  • ์˜ค๋ธ”์™„
  • SSR
  • ํ‹ฐ์Šคํ† ๋ฆฌ์ฑŒ๋ฆฐ์ง€
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • reflow
  • react
  • ํ˜ธ์ด์ŠคํŒ…

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
๐Ÿธminzzi

Minzzi์•ผ

๊ฐœ๋ฐœ๋„์„œ

[ํ•จ๊ป˜์ž๋ผ๊ธฐ] action point

2025. 4. 30. 08:33

ํ•จ๊ป˜ ์ž๋ผ๊ธฐ ์• ์ž์ผ๋กœ ๊ฐ€๋Š” ๊ธธ(๊น€์ฐฝ์ค€)


1. ์ž๋ผ๊ธฐ

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

์–ด๋–ป๊ฒŒํ•˜๋ฉด ๋”ํ•˜๊ธฐ๋ณด๋‹ค ๊ณฑํ•˜๊ธฐ๋ฅผ ๋” ๋งŽ์ด ํ•  ์ˆ˜ ์žˆ์„๊นŒ?(๊ฐ€์šฉ์‹œ๊ฐ„์„ ๋Š˜๋ฆฌ๊ณ  ์“ธ๋ฐ์—†์ด ๋‚ญ๋น„๋˜๋Š” ์‹œ๊ฐ„์„ ์ค„์ด๊ณ , ์ž ์ž๋Š” ์‹œ๊ฐ„์„ ์ค„์ด๋Š” ๊ฒƒ์€ ๋”ํ•˜๊ธฐ์  ์‚ฌ๊ณ ์ด๋ฉฐ, ์ง‘๋‹จ์˜ ์ง€๋Šฅ์„ ๋†’์ด๋Š” ๊ฒƒ์ด ๊ณฑํ•˜๊ธฐ์  ์‚ฌ๊ณ ์ด๋‹ค) (39-40p)

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

  • ํ˜„์žฌ ์ฃผ์–ด์ง„ ๊ณผ์—…์ด ๋‚ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋ฐฐ์šฐ๋А๋ƒ๋กœ ์—ฌ๊ธฐ๊ฒŒ ๋˜๋Š” ํ‹€์ธ ํ•™์Šต ํ”„๋ ˆ์ž„์œผ๋กœ ์—…๋ฌด๋ฅผ ์ƒ๊ฐํ•ด์•ผํ•œ๋‹ค.
  • ์ „๋ฌธ์„ฑ์ด ์‹ค์ œ๋กœ ๋†’์•„์ง€๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” 1) ์‹ค๋ ฅ์„ ๊ฐœ์„ ํ•˜๋ ค๋Š” ๋™๊ธฐ๊ฐ€ ์žˆ์–ด์•ผ ํ•˜๊ณ  2) ๊ตฌ์ฒด์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ์ ์ ˆํ•œ ์‹œ๊ธฐ์— ๋ฐ›์•„์•ผ ํ•œ๋‹ค.

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

  • ์ด๋ฏธ ์ž˜ํ•˜๋Š” ์‚ฌ๋žŒ์„ ๊ด€์ฐฐํ•˜๊ณ  ์ธํ„ฐ๋ทฐํ•˜๋Š” ๊ฒƒ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ํฐ ๋„์›€์ด ๋œ๋‹ค.
  • ์‹ค์ˆ˜๋Š” ์–ด๋–ป๊ฒŒ๋“  ํ•  ์ˆ˜ ๋ฐ–์— ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋Œ€์‹  ๊ทธ ์‹ค์ˆ˜๊ฐ€ ๋‚˜์œ ๊ฒฐ๊ณผ๋กœ ๋˜๊ธฐ ์ „์— ์ผ์ฐ ๋ฐœ๊ฒฌํ•˜๊ณ  ๋นจ๋ฆฌ ๊ณ ์น˜๋ฉด ๋œ๋‹ค.

2. ์ž๋ผ๊ธฐ

 
์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์„ ์ž˜ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ•„์š”ํ•œ ๋Šฅ๋ ฅ
- ๋ณต์žกํ•œ ์ƒํ™ฉ์„ ์ดํ•ดํ•˜๋Š” ๋Šฅ๋ ฅ
- ๊ด€์ฐฐํ•˜๋Š” ๋Šฅ๋ ฅ
- ํ–‰๋™ํ•˜๋Š” ๋Šฅ๋ ฅ
 

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

3. ์• ์ž์ผ

์• ์ž์ผ์˜ ์”จ์•— : ๊ณ ๊ฐ์—๊ฒŒ ๋งค์ผ ๊ฐ€์น˜๋ฅผ ์ „ํ•˜๋ผ.
- ๋งค์ผ : ํ•™์Šต์˜ ๋นˆ๋„
- ๊ณ ๊ฐ์—๊ฒŒ : ์ดํ•ด๊ด€๊ณ„์ž
- ๊ฐ€์น˜๋ฅผ ์ „ํ•˜๋ผ : ์‹ ๋ขฐ๊ฐ€ ์Œ“์ด๊ธฐ ์œ„ํ•ด์„œ
 

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


'๊ฐœ๋ฐœ๋„์„œ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] ๋ฆฌํŒฉํ„ฐ๋ง ์นดํƒˆ๋กœ๊ทธ ๋ณด๋Š” ๋ฒ•(ch5)  (0) 2025.05.01
[๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch4)  (0) 2025.04.30
[๋ฆฌํŒฉํ† ๋ง 2ํŒ] action point(ch3)  (0) 2025.04.28
[๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch2)  (2) 2025.04.27
[๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch1)  (0) 2025.04.26
    '๊ฐœ๋ฐœ๋„์„œ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] ๋ฆฌํŒฉํ„ฐ๋ง ์นดํƒˆ๋กœ๊ทธ ๋ณด๋Š” ๋ฒ•(ch5)
    • [๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch4)
    • [๋ฆฌํŒฉํ† ๋ง 2ํŒ] action point(ch3)
    • [๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch2)
    ๐Ÿธminzzi
    ๐Ÿธminzzi

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”