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

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

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

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

Minzzi์•ผ

Private/๋ฉด์ ‘

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์‹คํ–‰์ปจํ…์ŠคํŠธ, ์Šค์ฝ”ํ”„ ์ฒด์ธ)

2024. 11. 11. 19:59

1. ์‹คํ–‰์ปจํ…์ŠคํŠธ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.

์‹คํ–‰์ปจํ…์ŠคํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๋Š” ํ™˜๊ฒฝ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜์™€ ๊ฐ™์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•  ๋•Œ, ๊ทธ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋  ๋•Œ์˜ ํ™˜๊ฒฝ์„ ์ •์˜ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์‹คํ–‰์ปจํ…์ŠคํŠธ๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

์‹คํ–‰์ปจํ…์ŠคํŠธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ฒ˜์Œ ์‹คํ–‰๋  ๋•Œ ์ „์—ญ์œผ๋กœ ๋จผ์ € ์ƒ์„ฑ๋˜๊ณ , ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋  ๋•Œ ์—ญ์‹œ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์ƒ์„ฑ๋  ๋•Œ ์ฝœ์Šคํƒ์— ์Œ“์ด๊ฒŒ๋˜๋ฉฐ ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋˜๊ฑฐ๋‚˜ ํ”„๋กœ๊ทธ๋žจ์ด ์ข…๋ฃŒ๋  ๋•Œ ์‚ฌ๋ผ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

2. ์‹คํ–‰์ปจํ…์ŠคํŠธ๋Š” ์–ด๋–ค ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‚˜์š”?

์‹คํ–‰์ปจํ…์ŠคํŠธ๋Š” ๋ณ€์ˆ˜ ๊ฐ์ฒด์™€ ์Šค์ฝ”ํ”„์ฒด์ธ, this ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋จผ์ € ๋ณ€์ˆ˜ ๊ฐ์ฒด๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๋‚ด์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ์„ ์–ธ์„ ์ €์žฅํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค.

์Šค์ฝ”ํ”„ ์ฒด์ธ์€ ํ˜„์žฌ ์‹คํ–‰ ์ค‘์ธ ์ปจํ…์ŠคํŠธ์™€ ์™ธ๋ถ€ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์˜ ์—ฐ๊ฒฐ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•  ๋•Œ ํ˜„์žฌ ์‹คํ–‰์ปจํ…์ŠคํŠธ์—์„œ ์ฐพ์ง€ ๋ชปํ•˜๋ฉด ์Šค์ฝ”ํ”„ ์ฒด์ธ์„ ํ†ตํ•ด ์™ธ๋ถ€ ํ™˜๊ฒฝ์—์„œ ๋ณ€์ˆ˜๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

๋งˆ์ง€๋ง‰์œผ๋กœ this๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ๋”ฐ๋ผ ์ฐธ์กฐํ•˜๋Š” ๊ฐ์ฒด๊ฐ€ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค. 

์ด๋Ÿฌํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋“ค์„ ํ†ตํ•ด ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋™์•ˆ์˜ ํ™˜๊ฒฝ์„ ๊ด€๋ฆฌํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•  ๋•Œ ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๋‚˜ ํ•จ์ˆ˜ ํ˜ธ์ถœ์˜ ๋งฅ๋ฝ์„ ๊ฒฐ์ • ์ง€์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๋”๋ณด๊ธฐ

https://www.maeil-mail.kr/

 

๋งค์ผ๋ฉ”์ผ - ๊ธฐ์ˆ  ๋ฉด์ ‘ ์งˆ๋ฌธ ๊ตฌ๋… ์„œ๋น„์Šค

๊ธฐ์ˆ  ๋ฉด์ ‘ ์งˆ๋ฌธ์„ ๋งค์ผ๋งค์ผ ๋ฉ”์ผ๋กœ ๋ณด๋‚ด๋“œ๋ฆด๊ฒŒ์š”!

www.maeil-mail.kr

 

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

'Private > ๋ฉด์ ‘' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์ด๋ฒคํŠธ ๋ฃจํ”„)  (0) 2024.11.13
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์ด๋ฏธ์ง€ ์ตœ์ ํ™”)  (0) 2024.11.12
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(reflow, repaint)  (0) 2024.11.10
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(ํด๋กœ์ €, ํด๋กœ์ €์˜ ๋‹จ์ )  (5) 2024.11.09
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(Sync, Async, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ์›๋ฆฌ, Call Stack, TaskQueue, Event Loop)  (0) 2024.11.08
    'Private/๋ฉด์ ‘' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์ด๋ฒคํŠธ ๋ฃจํ”„)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์ด๋ฏธ์ง€ ์ตœ์ ํ™”)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(reflow, repaint)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(ํด๋กœ์ €, ํด๋กœ์ €์˜ ๋‹จ์ )
    ๐Ÿธminzzi
    ๐Ÿธminzzi

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