๐Ÿธ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)

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

  • ํ™ˆ

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

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

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

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

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
๐Ÿธminzzi
Private/๋ฉด์ ‘

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง)

Private/๋ฉด์ ‘

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง)

2024. 11. 19. 11:10

1. ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ์— ๋Œ€ํ•ด์„œ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.

- ์•Œ๊ณ ์žˆ๋Š” ๋‚ด์šฉ
๋จผ์ € ๋ธŒ๋ผ์šฐ๋”๋Š” HTML์„ ํŒŒ์‹ฑํ•˜์—ฌ document object model, ์ฆ‰ DOM์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
์ด๋•Œ css ํŒŒ์ผ์„ ๋งŒ๋‚˜๋ฉด DOM์ƒ์„ฑ์„ ์ž ์‹œ ์ค‘๋‹จํ•˜๊ณ  ํŒŒ์‹ฑํ•˜์—ฌ CSSOM์„ ์ƒ์„ฑํ•˜๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋งŒ๋‚˜๋ฉด ์—ญ์‹œ DOM์ƒ์„ฑ์„ ์ค‘๋‹จํ•˜๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํŒŒ์‹ฑํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ํŒŒ์‹ฑํ•˜๋ฉด DOM๊ณผ CSSOM์„ ํ•ฉ์ณ ๋ Œ๋”ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์ง€๋ง‰์œผ๋กœ ๋ ˆ์ด์•„์›ƒ๊ณผ ํŽ˜์ธํŠธ ๊ณผ์ •์ด ์ง„ํ–‰๋˜๋ฉฐ ์›นํŽ˜์ด์ง€๋ฅผ ๊ทธ๋ฆฌ๋Š” ์ˆœ์œผ๋กœ ๋ Œ๋”๋ง์ด ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

- ๋งค์ผ๋ฉ”์ผ๋กœ ๋ณด์ถฉํ•œ ๋‚ด์šฉ
๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ํŒŒ์ดํ”„๋ผ์ธ์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์›นํŽ˜์ด์ง€๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด ๊ฑฐ์น˜๋Š” ๊ณผ์ •์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ์ด ๊ณผ์ •์„ 5๋‹จ๊ณ„๋กœ ๋‚˜๋ˆ  ์„ค๋ช…ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ๋กœ DOMํŠธ๋ฆฌ ์ƒ์„ฑ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” HTMLํŒŒ์ผ์—์„œ ๋ฐ›์œผ๋ฉด ์ด ํŒŒ์ผ์„ ๋ฐ”์ดํŠธ ๋‹จ์œ„๋กœ ์ฝ๊ณ  ๋ฌธ์ž๋กœ ๋ณ€ํ™˜ ํ•œ ๋’ค HTMLํ† ํฐ์œผ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ดํ›„ ํ† ํฐ์„ ์ด์šฉํ•˜์—ฌ DOMํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

๋‘ ๋ฒˆ์งธ๋กœ DOM์ƒ์„ฑ CSS ํŒŒ์ผ์„ ํŒŒ์‹ฑํ•˜์—ฌ CSSOM ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์„ธ ๋ฒˆ์งธ๋กœ DOM๊ณผ CSSOMํŠธ๋ฆฌ๊ฐ€ ๋‹ค ์ƒ์„ฑ๋˜๋ฉด ์ด๋ฅผ ๊ฒฐํ•ฉํ•ด ๋ Œํ„ฐ ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋ Œ๋” ํŠธ๋ฆฌ์—๋Š” ์‹ค์ œ๋กœ ํ™”๋ฉด์— ํ‘œ์‹œ๋  ์š”์†Œ๋กœ๋งŒ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.

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

๋งˆ์ง€๋ง‰์œผ๋กœ ํŽ˜์ธํŒ… ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์ด ์™„๋ฃŒ๋˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๋Š” ๊ฐ ์š”์†Œ๋ฅผ ์‹ค์ œ๋กœ ํ™”๋ฉด์— ๊ทธ๋ฆฌ๋Š” ์ž‘์—…์„ ํ•ฉ๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง์€ ์ด๋ ‡๊ฒŒ 5๋‹จ๊ณ„๋กœ ๋‚˜๋ˆ  ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(hydrate, render)  (0) 2024.11.21
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(ํด๋ž˜์Šค)  (1) 2024.11.20
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(HTTP ํ†ต์‹ )  (1) 2024.11.18
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(props, state)  (1) 2024.11.16
ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(์ด๋ฒคํŠธ ๋ฃจํ”„)  (0) 2024.11.13
    'Private/๋ฉด์ ‘' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(hydrate, render)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(ํด๋ž˜์Šค)
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(HTTP ํ†ต์‹ )
    • ํ”„๋ก ํŠธ์—”๋“œ ๋ฉด์ ‘(props, state)
    ๐Ÿธminzzi
    ๐Ÿธminzzi

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

    ๋‹จ์ถ•ํ‚ค

    ๋‚ด ๋ธ”๋กœ๊ทธ

    ๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
    Q
    Q
    ์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
    W
    W

    ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

    ๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
    E
    E
    ๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
    C
    C

    ๋ชจ๋“  ์˜์—ญ

    ์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
    S
    S
    ๋งจ ์œ„๋กœ ์ด๋™
    T
    T
    ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
    H
    H
    ๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
    Shift + /
    โ‡ง + /

    * ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.