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

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

  • ํ™ˆ

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

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

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

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

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
๐Ÿธminzzi
๊ฐœ๋ฐœ๋„์„œ

[๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch4)

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

[๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch4)

2025. 4. 30. 21:58

Ch4. ํ…Œ์ŠคํŠธ ๊ตฌ์ถ•ํ•˜๊ธฐ

  • ํ…Œ์ŠคํŠธ๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ์ž‘์„ฑํ•˜๋ฉด ์ข‹์€ ์  : ํ…Œ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค ๋ณด๋ฉด ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด ๋ฌด์—‡์ด ํ•„์š”ํ•œ์ง€ ๊ณ ๋ฏผํ•˜๊ฒŒ ๋˜๋ฉฐ, ๊ตฌํ˜„๋ณด๋‹ค ์ธํ„ฐํŽ˜์ด์Šค์— ์ง‘์ค‘ํ•˜๊ฒŒ ๋œ๋‹ค. ๊ฒŒ๋‹ค๊ฐ€ ์ฝ”๋”ฉ์ด ์™„๋ฃŒ๋˜๋Š” ์‹œ์ ์„ ์ •ํ™•ํ•˜๊ฒŒ ํŒ๋‹จํ•  ์ˆ˜ ์žˆ๋‹ค.
  • TDD : ํ…Œ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๊ณ , ์ด ํ…Œ์ŠคํŠธ๋ฅผ ํ†ต๊ณผํ•˜๊ฒŒ๋” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ , ๊ฒฐ๊ณผ ์ฝ”๋“œ๋ฅผ ์ตœ๋Œ€ํ•œ ๊น”๋”ํ•˜๊ฒŒ ๋ฆฌํŒฉํ„ฐ๋งํ•˜๋Š” ๊ณผ์ •์„ ์งง๊ฒŒ ๋ฐ˜๋ณต.
  • ๋ฆฌํŒฉํ„ฐ๋ง ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ํ…Œ์ŠคํŠธ๊ฐ€ ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•˜๋‹ค
    -> ๋”ฐ๋ผ์„œ ํ…Œ์ŠคํŠธ๊ฐ€ ๊ฐ–์ถฐ์ง€์ง€ ์•Š์€ ์ฝ”๋“œ๋ฅผ ๋ฆฌํŒฉํ„ฐ๋งํ•ด์•ผ ํ•œ๋‹ค๋ฉด, ๊ณง๋ฐ”๋กœ ๋ฆฌํŒฉํ„ฐ๋ง ํ•˜์ง€ ์•Š๊ณ , ๋จผ์ € ์ž๊ฐ€ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ถ€ํ„ฐ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.

ํ…Œ์ŠคํŠธ ์ž‘์„ฑ

- ์‹คํŒจํ•ด์•ผ ํ•  ์ƒํ™ฉ์—์„œ๋Š” ๋ฐ˜๋“œ์‹œ ์‹คํŒจํ•˜๊ฒŒ ๋งŒ๋“ค์ž. -> ์ˆ˜๋งŽ์€ ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ–ˆ์Œ์—๋„ ์‹คํŒจํ•˜๋Š” ๊ฒŒ ์—†๋‹ค๋ฉด ํ…Œ์ŠคํŠธ๊ฐ€ ๋‚ด ์˜๋„์™€๋Š” ๋‹ค๋ฅธ ๋ฐฉ์‹์œผ๋กœ ์ฝ”๋“œ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฑด ์•„๋‹Œ์ง€ ๋ถˆ์•ˆํ•  ์ˆ˜ ์žˆ๋‹ค. => ์˜ค๋ฅ˜๋ฅผ ์ฃผ์ž…ํ•ด์„œ ์‹คํŒจํ•˜๋Š”์ง€ ํ™•์ธํ•˜์ž

- ์ž์ฃผ ํ…Œ์ŠคํŠธ ํ•˜๋ผ. ์ž‘์„ฑ ์ค‘์ธ ์ฝ”๋“œ๋Š” ์ตœ์†Œํ•œ ๋ช‡ ๋ถ„ ๊ฐ„๊ฒฉ์œผ๋กœ ํ…Œ์ŠคํŠธํ•˜๊ณ , ์ ์–ด๋„ ํ•˜๋ฃจ์— ํ•œ ๋ฒˆ์€ ์ „์ฒด ํ…Œ์ŠคํŠธ๋ฅผ ๋Œ๋ ค๋ด์•ผ ํ•œ๋‹ค.

- ํ…Œ์ŠคํŠธ๋Š” ์œ„ํ—˜ ์š”์ธ์„ ์ค‘์‹ฌ์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.

- ์ผ๋ฐ˜์ ์œผ๋กœ it ๊ตฌ๋ฌธ ํ•˜๋‚˜๋‹น ๊ฒ€์ฆ๋„ ํ•˜๋‚˜์”ฉ๋งŒ ํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค.

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

- ํ”„๋กœ๊ทธ๋žจ์„ ๋ง๊ฐ€๋œจ๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์„ ๋ชจ์ƒ‰ํ•˜์—ฌ ์Šค์Šค๋กœ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ฅผ ์ ์œผ๋กœ ๋Œ๋ ค์•ผ ํ•œ๋‹ค.

 

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

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

[๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] ๋ฆฌํŒฉํ„ฐ๋ง ์นดํƒˆ๋กœ๊ทธ ๋ณด๋Š” ๋ฒ•(ch5)  (0) 2025.05.01
[ํ•จ๊ป˜์ž๋ผ๊ธฐ] action point  (2) 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)
    • [ํ•จ๊ป˜์ž๋ผ๊ธฐ] action point
    • [๋ฆฌํŒฉํ† ๋ง 2ํŒ] action point(ch3)
    • [๋ฆฌํŒฉํ„ฐ๋ง 2ํŒ] action point(ch2)
    ๐Ÿธminzzi
    ๐Ÿธminzzi

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

    ๊ฐœ์ธ์ •๋ณด

    • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
    • ํฌ๋Ÿผ
    • ๋กœ๊ทธ์ธ

    ๋‹จ์ถ•ํ‚ค

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

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

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

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

    ๋ชจ๋“  ์˜์—ญ

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

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