๐Ÿธ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
  • ์‹คํ–‰์ปจํ…์ŠคํŠธ
  • ํ˜ธ์ด์ŠคํŒ…
  • ์ด๋ฒคํŠธ๋ฃจํ”„
  • ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • ์˜ค๋ธ”์™„
  • reflow
  • react
  • ๋ฉด์ ‘
  • ๋ชจ๋˜๋ฆฌ์•กํŠธ๋”ฅ๋‹ค์ด๋ธŒ
  • SSR
  • ํ‹ฐ์Šคํ† ๋ฆฌ์ฑŒ๋ฆฐ์ง€
  • ๋ ‰์‹œ์ปฌ

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

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

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

Minzzi์•ผ

[Study] ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(์ •์žฌ๋‚จ)
๊ฐœ๋ฐœ๋„์„œ

[Study] ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(์ •์žฌ๋‚จ)

2025. 6. 8. 14:43

์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฝ๊ฒŒ ๋œ ๊ณ„๊ธฐ

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

 

๊ทธ๋Ÿฌ๋‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ์ดํ•ดํ•˜๋ฉฐ ์ฝ”๋”ฉ์„ ํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๊พธ์ค€ํžˆ ๋“ค๋ฉด์„œ ์ด์   ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๊ฒŒ ๊ด€์‹ฌ์„ ์ฃผ์–ด์•ผํ•  ๋•Œ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šคํ„ฐ๋””๋ฅผ ๋งŒ๋“ค๋‹ค.

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

 

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

 

๊ทธ๋ž˜์„œ ๋ชจ๋“  ๋‚ด์šฉ์„ ๋‹ค ์”น์–ด๋จน์—ˆ๋‹ˆ?

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

 

๋‹ค์Œ ์Šคํ„ฐ๋””๋กœ ๋„˜์–ด๊ฐ€๊ธฐ ์ „์— ์ •๋น„ ์‹œ๊ฐ„์„ ๊ฐ€์งˆ ๊ฒธ 2์ฃผ ๊ฐ„์€ ๋™์ผํ•œ ์‹œ๊ฐ„์— ๋ชจ์—ฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•œ ๋ฌธ์ œ๋ฅผ ํ’€์–ด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ง€๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ž˜ ์ดํ•ดํ•˜์ง€ ๋ชปํ–ˆ๊ฑฐ๋‚˜ ๋ถ€์กฑํ•˜๋‹ค๊ณ  ๋А๋ผ๋Š” ๋ถ€๋ถ„๋“ค์€ ๋‹ค์‹œ ์ฝ๊ณ  ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ถ”์ฒœํ•˜๋Š”๊ฐ€

๊ฐœ์ธ์ ์œผ๋กœ ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์งง์•„์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ๋„์„œ์น˜๊ณ  ์–‡์•„์„œ ๋“ค๊ณ ๋‹ค๋‹ˆ๊ธฐ์— ๋ถ€๋‹ด์—†๋Š” ์‚ฌ์ด์ฆˆ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฑ…์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ทธ๋ฆผ์ด ์ง๊ด€์ ์ด์–ด์„œ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์› ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ ์˜ˆ์‹œ๋„ ๋งŽ์•˜๊ณ ์š”. ์ „๋ฐ˜์ ์œผ๋กœ ๋งŒ์กฑ๊ฐ์ด ๋†’์€ ์ฑ…์ž…๋‹ˆ๋‹ค.

 

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

 

์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

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

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

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