๐Ÿธminzzi
Minzzi์•ผ
๐Ÿธminzzi
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (131)
    • ์˜ค๋ฅ˜ํ•ด๊ฒฐ (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 (27)
      • ํšŒ๊ณ  (7)
      • ๋ฉด์ ‘ (17)
    • ๊ฐœ๋ฐœ๋„์„œ (6)

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

  • ํ™ˆ

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

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

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

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

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

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

Minzzi์•ผ

Private/๋ฉด์ ‘

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(render, commit๋‹จ๊ณ„)

2024. 11. 22. 19:30

1. ๋ฆฌ์•กํŠธ์˜ render phase์™€ commit phase์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.

๋ฆฌ์•กํŠธ์˜ ๋žœ๋”๋ง ๊ณผ์ •์€ render phase๊ณผ commit phase๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.

render phase์—์„œ๋Š” DOM์— ๊ทธ๋ ค์งˆ ์š”์†Œ๋“ค์„ ํŒŒ์•…ํ•˜๋Š” ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ์ด๋•Œ ์žฌ์กฐ์ • ๊ณผ์ •์„ ๊ฑฐ์น˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์žฌ์กฐ์ • ๊ณผ์ •์—์„œ ์ด์ „์— ์ƒ์„ฑํ•œ ๊ฐ€์ƒ DOM ํŠธ๋ฆฌ์™€ ์ƒˆ๋กœ ๋งŒ๋“  ๊ฐ€์ƒ DOM ํŠธ๋ฆฌ๋ฅผ ๋น„๊ตํ•ด์„œ ์‹ค์ œ DOM ํŠธ๋ฆฌ์— ๋ฐ˜์˜ํ•  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ํŒŒ์•…ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ƒํƒœ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ˜ธ์ถœํ•ด ์ƒˆ๋กœ์šด ๊ฐ€์ƒ DOMํŠธ๋ฆฌ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

๋‹ค์Œ์œผ๋กœ commit phase์—์„œ๋Š” render phase์—์„œ ์ง„ํ–‰ํ•œ ๋‘ ๊ฐ€์ƒ DOMํŠธ๋ฆฌ์˜ ๋ณ€ํ™”๋ฅผ ์‹ค์ œ DOM์— ์ ์šฉํ•˜๋Š” ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค.

์š”์•ฝํ•ด์„œ render phase๋Š” ๋ณ€๊ฒฝ๋œ ์‚ฌํ•ญ์„ ํŒŒ์•…ํ•˜๋Š” ๋‹จ๊ณ„์ด๊ณ , commit phase๋Š” ๋ณ€๊ฒ…๋œ ์‚ฌํ•ญ์„ ์‹ค์ œ DOM์— ์ ์šฉํ•˜๋Š” ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค.

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

ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ๋ฉด์ ‘(heap, CI/CD)  (0) 2024.11.24
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(script ์ฝ”๋“œ์˜ ์œ„์น˜)  (0) 2024.11.23
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(hydrate, render)  (0) 2024.11.21
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(ํด๋ž˜์Šค)  (1) 2024.11.20
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง)  (0) 2024.11.19
    'Private/๋ฉด์ ‘' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ๋ฉด์ ‘(heap, CI/CD)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(script ์ฝ”๋“œ์˜ ์œ„์น˜)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(hydrate, render)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(ํด๋ž˜์Šค)
    ๐Ÿธminzzi
    ๐Ÿธminzzi

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