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

CSR2

CSR SSR ๋‹จ์  ๋ณด์™„ ๋ฐฉ๋ฒ• ์ •๋ฆฌํ•ด๋ณด๊ธฐ ์ง€๋‚œ ์‹œ๊ฐ„์— CSR, SSR์˜ ๊ฐœ๋…๊ณผ ์žฅ๋‹จ์ ์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด ๋ณด์•˜๋Š”๋ฐ, ๊ทธ๋ ‡๋‹ค๋ฉด ์ด ๋‘˜์˜ ๋‹จ์ ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์—๋Š” ์–ด๋–ค ๊ฒƒ๋“ค์ด ์žˆ๋Š”์ง€ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. CSR ๋‹จ์  ๋ณด์™„ ๋ฐฉ๋ฒ• ๋จผ์ € CSR์€ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๊ฐ€ ๋Š๋ฆฌ๋‹ค๋Š” ์ ๊ณผ SEO๊ฐ€ ๋ถˆ๋ฆฌํ•˜๋‹ค๋Š” ์ ์ด ๋‹จ์ ์ด๋‹ค. ์ด๊ฒƒ์„ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•๋“ค์„ ์ด์šฉํ•˜์—ฌ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค. 1. Code Splitting, Tree-Shaking ์ด ๋ฐฉ๋ฒ•๋“ค์˜ ์ดˆ๊ธฐ ๋กœ๋”ฉ์— ํ•„์š”ํ•œ javaScript์˜ ํฌ๊ธฐ๋ฅผ ์ค„์—ฌ์ฃผ์–ด์„œ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ค€๋‹ค. Code Splitting์€ ๋ง ๊ทธ๋Œ€๋กœ ์ฝ”๋“œ๋ฅผ ์ชผ๊ฐ ๋‹ค๋Š” ์˜๋ฏธ์ด๋ฉฐ, Tree-Shaking์€ ๋‚˜๋ฌด๋ฅผ ํ”๋“ค์–ด ์ฃฝ์€ ๋‚˜๋ฌด์žŽ์„ ๋–จ์–ดํŠธ๋ฆฌ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์šฉ์–ด์ด๋‹ค. CSR์˜ .. 2022. 11. 20.
CSR SSR ๋™์ž‘ ๋‹จ๊ณ„ | CSR SSR ๊ฐœ๋…์  ์ฐจ์ด, ์žฅ๋‹จ์  ์‚ฌ์ „ ๊ฐœ๋… ์ •๋ฆฌ CSR๊ณผ SSR์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜๊ธฐ ์ „์— ์•Œ์•„๋‘์–ด์•ผ ํ•˜๋Š” ์‚ฌ์ „ ์ง€์‹์— ๋Œ€ํ•ด ๋จผ์ € ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. 1. MPA์™€ SPA โ–ถ MPA (MultiPage Application) ์ „ํ†ต์  ํŽ˜์ด์ง€ Lifecycle, ํƒญ์„ ์ด๋™ํ•  ๋•Œ (๋งํฌ ํด๋ฆญ ์‹œ) ๋งˆ๋‹ค ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ƒˆ๋กœ์šด HTML ํŒŒ์ผ์„ ๋ฐ›์•„์™€์„œ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ์ƒˆ๋กœ ๋ Œ๋”๋ง ํ•˜๋Š” ๋ฐฉ์‹ ๋ Œ๋”๋ง ๋ฐฉ์‹์œผ๋กœ SSR์„ ์‚ฌ์šฉ โ–ถ SPA (Single Page Application) ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜, ํŽ˜์ด์ง€๊ฐ€ ์ „์ฒด์ ์œผ๋กœ ๋ Œ๋”๋ง ๋˜์ง€ ์•Š๊ณ  ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋™์ ์œผ๋กœ ๋ Œ๋”๋ง ๋˜๋Š” ๋ฐฉ์‹ ๋ Œ๋”๋ง ๋ฐฉ์‹์œผ๋กœ CSR์„ ์‚ฌ์šฉ 2. SPA ์‚ฌ์šฉ๊นŒ์ง€์˜ ์›น์˜ ์—ญ์‚ฌ โ–ถ ์˜ˆ์ „ Static Site(์ •์ ์ธ ํŽ˜์ด์ง€)๋กœ ์ฃผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Œ ๋ฐฉ์‹ ์„œ๋ฒ„์— ์ด๋ฏธ ์ž˜ ๋งŒ๋“ค์–ด์ง„ .. 2022. 10. 9.
๋ฐ˜์‘ํ˜•