[TIL๐Ÿ”ฅ]Day14(8/25)

๊น€๋‹ค์Šฌยท2021๋…„ 8์›” 25์ผ
0

Today I Learned

๋ชฉ๋ก ๋ณด๊ธฐ
14/22
post-thumbnail

Introduction

์ •๋ง ์˜ค๋žœ๋งŒ์— TIL์„ ์“ฐ๊ฒŒ ๋๋‹ค... ์‚ฌ์‹ค ๋ชป์“ด์ง€ ์ดํ‹€๋ฐ–์— ์•ˆ๋์ง€๋งŒ ๋งค์ผ ์“ฐ๋˜ ๋‚˜์—๊ฒŒ ์ดํ‹€์€ ๋งค์šฐ ๊ธธ๋‹คใ… ใ… ใ… 
์˜ค๋Š˜๋ถ€ํ„ฐ ๋…ธ์…˜ ํด๋ก  ์ฝ”๋”ฉ์„ ๋“ค์–ด๊ฐ€๋ฉด์„œ ํ™”์š”์ผ๊นŒ์ง€ TodoList ๊ณผ์ œ๋ฅผ ๋๋‚ด๊ธฐ ์œ„ํ•ด ๊ณ„์† ๊ณผ์ œ์— ๋ชฐ์ž…ํ–ˆ๋”๋‹ˆ ๊ฒฐ๊ตญ TIL์ด ํ›„์ˆœ์œ„๋กœ ๋ฐ€๋ฆฌ๊ฒŒ ๋˜์—ˆ๋‹ค.... ํ•‘๊ณ„ ์ ˆ๋Œ€ ์•„๋‹˜
์งง์€ ์‹œ๊ฐ„ ์•ˆ์— ๋ชจ๋“  ๊ฑธ ์ดํ•ดํ•˜๊ณ  ์†Œํ™”ํ•˜๋ ค๋‹ค๋ณด๋‹ˆ ์ด๋ฒˆ์ฃผ๋Š” ๋˜๊ฒŒ ์ขŒ์ ˆ์„ ๋งŽ์ด ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค...๊ทธ๋ž˜์„œ ์˜ค๋Š˜์€ ์ข€ ๋งˆ์Œ์„ ๋‹ค์žก๊ณ  ๊ธฐ๋ถ„๋„ ํ™˜๊ธฐ์‹œํ‚ค๊ธฐ ์œ„ํ•ด TIL ์ž‘์„ฑ ์‹œ๊ฐ„์„ ๊ผญ ๊ฐ€์ ธ์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๐Ÿ˜ข


์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ

1. SPA (Single Page Application)
- hashbang
- history API

์˜ค๋Š˜์€ ๊ฐ•์˜๋ฅผ ๋งŽ์ด ๋“ฃ์ง€ ๋ชปํ•œ ๊ด€๊ณ„๋กœ,,,SPA๋ฅผ ๊ฐ€๋ณ๊ฒŒ ํŒŒํ—ค์ณ๋ณด์ž!

๐Ÿ’ซ SPA(Single Page Application)

SPA๋ž€?

  • ๋‹จ์ผ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜
  • ์›น์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํ•„์š”ํ•œ ๋ชจ๋“  ์ •์  ๋ฆฌ์†Œ์Šค๋ฅผ ์ตœ์ดˆ์— ํ•œ๋ฒˆ ๋‹ค์šด๋กœ๋“œ
  • ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€ ์š”์ฒญ ์‹œ ํŽ˜์ด์ง€ ๊ฐฑ์‹ ์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ์„ ์ „๋‹ฌ๋ฐ›์•„ ํŽ˜์ด์ง€ ๊ฐฑ์‹ 

SPA์˜ ์žฅ์ 

  • ๋ถˆํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค ์ค‘๋ณต ์š”์ฒญ ๋ฐฉ์ง€
  • ๋น ๋ฅธ ํ™”๋ฉด ์ด๋™์œผ๋กœ ํ–ฅ์ƒ๋œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ๊ตฌํ˜„ ๊ฐ€๋Šฅ

SPA์˜ ๋‹จ์ 

  • ์ตœ์ดˆ ์ ‘์† ์‹œ ๋ชจ๋“  ๋ฆฌ์†Œ์Šค๋ฅผ ํ•œ๋ฒˆ์— ๋ฐ›๊ธฐ ๋•Œ๋ฌธ์— ์ดˆ๊ธฐ ๊ตฌ๋™ ์†๋„๊ฐ€ ๋Š๋ฆด ์ˆ˜ ์žˆ์Œ
  • ์ƒˆ๋กœ๊ณ ์นจ์„ ํด๋ฆญํ•˜๋”๋ผ๋„ URL์„ ๋ณ€๊ฒฝ์‹œํ‚ค์ง€ ์•Š์œผ๋ฏ€๋กœ history ๊ด€๋ฆฌ์˜ ์–ด๋ ค์›€
  • ํ•˜๋‚˜์˜ ์ฃผ์†Œ๋กœ ๋™์ž‘ํ•˜๊ธฐ๋•Œ๋ฌธ์— SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”)๊ฐ€ ์–ด๋ ค์›€

์ฐธ๊ณ  ์‚ฌ์ดํŠธ


Comment

SPA ๋ฐฉ์‹์ธ hashbang๊ณผ history api์— ๋Œ€ํ•œ ๋ณต์Šต์ด ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™๋‹ค.
SPA ๋ฐฉ์‹์€ ์ดํ•ดํ–ˆ์ง€๋งŒ, ๋‘˜์˜ ์ฐจ์ด๊ฐ€ ์ •ํ™•ํžˆ ๋ฌด์—‡์ด๊ณ  ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ๊ฐ•์˜๋ฅผ ๋‹ค์‹œ ๋ณด๊ณ  ์ •๋ฆฌํ•ด์•ผํ•จ์„ ๋Š๊ผˆ๋‹ค.
๋˜ํ•œ ๋กœํ† ๋‹˜์˜ ์„ธ์…˜์—์„œ ๋ฐฐ์› ๋˜ SSR, CSR, SSG, ISR์— ๋Œ€ํ•œ ๊ฐœ๋…๋„ ํ™•์‹คํžˆ ์งš๊ณ  ๋„˜์–ด๊ฐ€์•ผ๊ฒ ๋‹ค...
๊ณต๋ถ€ํ•  ๊ฐœ๋…๋“ค์€ ๋„ˆ๋ฌด ๋งŽ๊ณ  ๋‚˜์˜ ๋ชธ๊ณผ ์‹œ๊ฐ„์€ ๊ทธ๊ฑธ ๋”ฐ๋ผ๊ฐ€์ง€ ๋ชปํ•˜๋Š” ์ƒํ™ฉ์—์„œ ์˜ค๋Š” ์ขŒ์ ˆ๊ฐ์ด ํฐ ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜์„œ ์ข€ ๋งˆ์Œ์ด ๊ธ‰ํ•ด์ง€๋Š” ๊ฒƒ ๊ฐ™๋‹ค.
๋„ˆ๋ฌด ์กฐ๊ธ‰ํ•ดํ•˜์ง€๋ง๊ณ  ์ง€๊ธˆ ๊ฐ€์ง„ ๋‚˜์˜ ์‹œ๊ฐ„์„ ํšจ์œจ์ ์œผ๋กœ ์“ฐ๋Š” ๊ฒƒ์— ์ง‘์ค‘ํ•ด์•ผ๊ฒ ๋‹ค.
์ƒ๊ฐ์ด ๋งŽ์•„์ง€๋Š” ๋ฐค์ด๋‹ค...๐ŸŒƒ

profile
์ธ์ƒ์€ ์šฉ๊ธฐ์˜ ์–‘์— ๋”ฐ๋ผ ์ค„์–ด๋“ค๊ฑฐ๋‚˜, ๋Š˜์–ด๋‚œ๋‹ค

0๊ฐœ์˜ ๋Œ“๊ธ€