๐Ÿธminzzi
Minzzi์•ผ
๐Ÿธminzzi
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (130) N
    • ์˜ค๋ฅ˜ํ•ด๊ฒฐ (14)
    • FE (35) N
      • Next.js (16) N
      • 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
  • ๋ฉด์ ‘
  • ์˜ค๋ธ”์™„
  • react
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • ์›์‹œํƒ€์ž…
  • ์ด๋ฒคํŠธ๋ฃจํ”„
  • ํ‹ฐ์Šคํ† ๋ฆฌ์ฑŒ๋ฆฐ์ง€
  • ๋ ‰์‹œ์ปฌ
  • ์ด๋ฏธ์ง€ ์ตœ์ ํ™”
  • ํž™์˜์—ญ
  • ์ฝœ์Šคํƒ
  • ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…
  • ์‹คํ–‰์ปจํƒ์ŠคํŠธ
  • ๋ชจ๋˜๋ฆฌ์•กํŠธ๋”ฅ๋‹ค์ด๋ธŒ
  • SSR
  • next.js
  • ์‹คํ–‰์ปจํ…์ŠคํŠธ
  • layout shift

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

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

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

Minzzi์•ผ

์›น ํ”„๋กœ์ ํŠธ

[Crop] ํ”„๋กœ์ ํŠธ ํŒ€์ŠคํŽ˜์ด์Šค ์ƒ์„ฑ!

2024. 5. 21. 18:34

ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ ๊ณ„๊ธฐ

SSR์— ๋Œ€ํ•ด ๊ฒฝํ—˜์„ ์Œ“๊ณ  ์‹ถ์–ด์„œ Next.js๋ฅผ ์‚ฌ์šฉํ•ด๋ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค.

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

๊ทธ๋‹ˆ๊นŒ ๊ฒฐ๊ตญ ์„ฑ๋Šฅ ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•œ ๊ฒฝํ—˜์˜ ๊ฐˆ๊ธ‰ํ•จ์ด ์ปค์„œ ์ด๋ฅผ ์ค‘์ ์œผ๋กœ ๋‘” ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธฐํšํ–ˆ๋‹ค.

 

๋˜ ํŒŒ๋“œ์—์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋• ์˜ค๋ฅ˜ํ•ด๊ฒฐ์„ ๊ธฐ๋กํ•  ์‹œ๊ฐ„์ด ์ •๋ง ๋ถ€์กฑํ•ด์„œ ํ•˜๋‚˜ํ•˜๋‚˜ ๋‹ค ๊ธฐ๋กํ•ด๋†“์ง€ ๋ชปํ–ˆ๋‹ค(์•„์ฃผ ํฐ ์‹ค์ˆ˜์˜€๋‹ค)

๊ทธ๋•Œ๋กœ ๋‹ค์‹œ ๋Œ์•„๊ฐ€ ์–ด๋–ค ์˜ค๋ฅ˜๊ฐ€ ์žˆ์—ˆ๋Š”์ง€ ์‚ดํŽด๋ณด๋Š”๊ฒŒ ๋” ์˜ค๋ž˜ ๊ฑธ๋ฆด ๊ฒƒ ๊ฐ™์•„์„œ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋ฅผ ํ˜„์žฌ ์‹œ์ ์—์„œ ๋ฆฌํŒฉํ† ๋ง์„ ์ง„ํ–‰ํ•˜๋ ค๊ณ  ํ•˜๊ณ ,

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด์„œ ์˜ค๋ฅ˜์— ๋Œ€ํ•ด ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•˜๊ณ  ๊ณ ๋ฏผํ•ด์„œ ๊ธฐ๋กํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธฐํšํ•œ ๋‘๋ฒˆ์งธ๋กœ ํฐ ์ด์œ ์ด๊ธฐ๋„ ํ•˜๋‹ค.

 

ํ”„๋กœ์ ํŠธ ์ฃผ์ œ

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

๊ตฌ๊ธ€ ์‹œํŠธ๊นŒ์ง€ ๋“ค์–ด๊ฐ€์„œ ๊ธฐ๋กํ•˜๋Š”๊ฒƒ์€ ์ž๋™ํ™”๊ฐ€ ์–ด๋ ต๋‹ค๊ณ  ๋А๊ปด์ ธ ์Šคํ„ฐ๋”” ํŒ€๋ณ„๋กœ ๋ฌธ์ œํ’€์ด๋งŒ ๊ธฐ๋กํ•˜๋ฉด ์•Œ์•„์„œ ์Šคํ„ฐ๋”” ํ˜„ํ™ฉ์„ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค๋ฅผ ๊ธฐํšํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

 

ํŒ€์ŠคํŽ˜์ด์Šค ์ƒ์„ฑ

์ง€๋ผ๋ฅผ ์‚ฌ์šฉํ•ด๋ณผ๊นŒ ์‹ถ์—ˆ์ง€๋งŒ ๋‘๋ช…์—์„œ ํ•˜๋Š” ํ”„๋กœ์ ํŠธ์ด๊ณ , ํŽธํ•˜๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์„œ ์ •๋ฆฌ๊ฐ€ ํ•„์ˆ˜์ ์ด์–ด์„œ ๋…ธ์…˜์„ ์„ ํƒํ–ˆ๋‹ค. 

 

์ €์ž‘์žํ‘œ์‹œ

'์›น ํ”„๋กœ์ ํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

Frontend ์ด๋ฏธ์ง€ ์ตœ์ ํ™”ํ•˜๊ธฐ  (4) 2024.11.14
AWS ํ”„๋ฆฌํ‹ฐ์–ด ์ ์šฉ ๋ฒ”์œ„  (0) 2024.09.13
FE ํ”„๋กœ์ ํŠธ ์•„ํ‚คํ…์ฒ˜์— ๋Œ€ํ•œ ๊ณ ๋ฏผ(feat. FSD ์•„ํ‚คํ…์ฒ˜)  (0) 2024.09.06
[React] sitemap์œผ๋กœ SEO ์ž‘์—…ํ•˜๊ธฐ  (2) 2024.06.15
    '์›น ํ”„๋กœ์ ํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • Frontend ์ด๋ฏธ์ง€ ์ตœ์ ํ™”ํ•˜๊ธฐ
    • AWS ํ”„๋ฆฌํ‹ฐ์–ด ์ ์šฉ ๋ฒ”์œ„
    • FE ํ”„๋กœ์ ํŠธ ์•„ํ‚คํ…์ฒ˜์— ๋Œ€ํ•œ ๊ณ ๋ฏผ(feat. FSD ์•„ํ‚คํ…์ฒ˜)
    • [React] sitemap์œผ๋กœ SEO ์ž‘์—…ํ•˜๊ธฐ
    ๐Ÿธminzzi
    ๐Ÿธminzzi

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