๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

SSR2

SSR? CSR? 1. SSR(Server Side Rendering) : ์„œ๋ฒ„์ชฝ์—์„œ ๋ Œ๋”๋ง ์ค€๋น„๋ฅผ ๋๋งˆ์นœ ์ƒํƒœ๋กœ ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹ [๋‹จ๊ณ„] 1. User๊ฐ€ ์›น์‚ฌ์ดํŠธ์— ์š”์ฒญ์„ ๋ณด๋ƒ„ 2. ์„œ๋ฒ„๋Š” ์ฆ‰์‹œ ๋ Œ๋”๋ง ๊ฐ€๋Šฅํ•œ HTML ํŒŒ์ผ์„ ๋งŒ๋“ฆ 3. ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์ „๋‹ฌ๋˜๋Š” ์ˆœ๊ฐ„, ์ด๋ฏธ ๋ Œ๋”๋ง ์ค€๋น„๊ฐ€ ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ HTML์€ ์ฆ‰์‹œ ๋ Œ๋”๋ง ํ•œ๋‹ค(์ด๋•Œ, JavaScript๊ฐ€ ์ฝํžˆ๊ธฐ ์ „์ด๋ฏ€๋กœ ์‚ฌ์ดํŠธ ์ž์ฒด๋Š” ์กฐ์ž‘ ๋ถˆ๊ฐ€๋Šฅํ•จ) 4. ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค์šด๋ฐ›์Œ 5. ๋‹ค์šด๋ฐ›์•„์ง€๋Š” ๋™์•ˆ User๋Š” ์ปจํ…์ธ ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ, ์‚ฌ์ดํŠธ๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์—†์Œ(์ด๋•Œ ์‚ฌ์šฉ์ž ์กฐ์ž‘์„ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ์Œ) 6. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ JavaScriptํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‹คํ–‰ 7. JS๊นŒ์ง€ ์„ฑ๊ณต์ ์œผ๋กœ ์ปดํŒŒ์ผ ๋˜์–ด ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋˜ ์‚ฌ์šฉ์ž ์กฐ์ž‘์ด ์‹คํ–‰๋˜๊ณ , ์›น ํŽ˜์ด์ง€๋Š” ์ƒํ˜ธ์ž‘์šฉ์ด .. 2022. 12. 30.
SPA? MPA? 1. MPA(Multiple Page Application) ์—ฌ๋Ÿฌ ๊ฐœ์˜ Page๋กœ ๊ตฌ์„ฑ๋œ Application SSR(Server Side Rendering)๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋ง ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ ๋ Œ๋”๋ง๋œ ์ •์  ๋ฆฌ์†Œ์Šค(HTML, CSS, JavaScript)๊ฐ€ ๋‹ค์šด๋กœ๋“œ ๋˜๊ณ , ํŽ˜์ด์ง€ ์ด๋™ํ•˜๊ฑฐ๋‚˜ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋ง [์žฅ์ ] SEO(๊ฒ€์ƒ‰ ์—”์ง„)๊ด€์ ์—์„œ ์œ ๋ฆฌ → ์™„์„ฑ๋œ ํ˜•ํƒœ์˜ HTML ํŒŒ์ผ์„ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ๋ฐ›๊ธฐ ๋•Œ๋ฌธ์— ์ฒซ ๋กœ๋”ฉ ๋งค์šฐ ์งง์Œ → ์„œ๋ฒ„์—์„œ ์ด๋ฏธ ๋ Œ๋”๋งํ•ด ๊ฐ€์ ธ์˜ค๊ธฐ ๋•Œ๋ฌธ์— [๋‹จ์ ] ๋งค ํŽ˜์ด์ง€ ์š”์ฒญ๋งˆ๋‹ค ๋ฆฌ๋กœ๋”ฉ ๋ฐœ์ƒํ•˜์—ฌ UX๊ฐ€ ์ข‹์ง€ ์•Š์Œ ํŽ˜์ด์ง€ ์ด๋™์‹œ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ถˆํ•„์š”ํ•œ ํ…œํ”Œ๋ฆฟ๋„ ์ค‘๋ณตํ•ด์„œ ๋กœ๋”ฉํ•˜์—ฌ ์„ฑ๋Šฅ์ด ์ข‹์ง€ ์•Š์Œ ์„œ๋ฒ„ ๋ Œ๋”๋ง์— ๋”ฐ๋ฅธ ๋ถ€ํ•˜ ๋ฐœ์ƒ.. 2022. 12. 30.