๐ŸŒ How the Web Works? (SPA, MPA, CSR, SSR)

solmiiยท2020๋…„ 7์›” 28์ผ
3

WEB

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

ย ย  SPA(Single Page Application) ย ย 

์ตœ์ดˆ ํ•œ๋ฒˆ๋งŒ HTML ํŽ˜์ด์ง€๋ฅผ ๋‚ด๋ ค๋ฐ›๊ณ , ์ดํ›„์—๋Š” JavaScript๋ฅผ ์ด์šฉํ•ด ๋™์ ์œผ๋กœ ํŠน์ •์˜์—ญ๋งŒ ์ƒˆ๋กœ ๋ชจ๋“ˆ์„ ํ˜ธ์ถœํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”์ธ๋”ฉํ•˜๋Š” ๋ฐฉ์‹์˜ ์›น ์–ดํ”Œ๋ ˆ์ผ€์ด์…˜์ด๋‹ค.

SPA๋ฅผ CSR(Client Side Rendering) ์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋Š”๋ฐ, SPA๋„ ํ•„์š”์— ๋”ฐ๋ผ SSR(Server Side Rendering)๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋‹ค.
SPA !== CSR //ใ…Žใ…Žใ…Ž

์œ„์˜ ์ด๋ฏธ์ง€์—์„œ, ์ฒ˜์Œ์— ์ดˆ๊ธฐ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด ์›นํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” HTML+CSS+JavaScript ๊ฐ™์€ ๋ฆฌ์†Œ์Šค๋ฅผ ํ•œ๋ฒˆ์— ๋‹ค ๋‚ด๋ ค๋ฐ›๊ณ , ์ดํ›„์—๋Š” AJAX๋ฅผ ํ†ตํ•ด ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ json ์ด๋‚˜ xml ํ˜•์‹์œผ๋กœ ๋ฐ›๋Š”๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ์‚ฌ์šฉ์ž๊ฐ€ ๊ฒŒ์‹œํŒ ๋ฉ”๋‰ด๋ฅผ ๋ˆ„๋ฅธ๋‹ค๋ฉด, ๊ฒŒ์‹œํŒ ํŽ˜์ด์ง€๋ฅผ ์ด๋ฃจ๋Š” HTML+CSS+JavaScript ๋Š” ์ฒ˜์Œ์— ๋‚ด๋ ค๋ฐ›๋Š” ๋ฆฌ์†Œ์Šค์—์„œ ๊ฒŒ์‹œํŒ์— ํ•ด๋‹นํ•˜๋Š” JavaScript๋ฅผ ํ˜ธ์ถœํ•ด์„œ ๋™์ ์œผ๋กœ UI๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ , ๊ฒŒ์‹œํŒ ๊ธ€ ๋ชฉ๋ก, ์ƒˆ ๊ธ€, ๋‚ด๊ฐ€ ์“ด ๊ธ€ ๋ชฉ๋ก ๋“ฑ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋Š” AJAX ๋ฅผ ์ด์šฉํ•ด json ํ˜•ํƒœ๋กœ ๋‚ด๋ ค๋ฐ›๋Š”๋‹ค.

๐Ÿ’๐Ÿปโ€โ™€๏ธ AJAX?
AJAX๋Š” JavaScript์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜๋กœ, Asynchronous Javascript And Xml(๋น„๋™๊ธฐ์‹ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ xml)์˜ ์•ฝ์ž์ด๋‹ค.
๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ฐ€์ง€๊ณ ์žˆ๋Š” XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜์ง€ ์•Š๊ณ ๋„ ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋งŒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋Š” ๊ธฐ๋ฒ•์ธ๋ฐ,
๋ง์ด ๋„ˆ๋ฌด ์–ด๋ ค์šฐ๋‹ˆ๊นŒ ์‰ฝ๊ฒŒ ๋งํ•˜๋ฉด, HTML ํŽ˜์ด์ง€ ์ „์ฒด๊ฐ€ ์•„๋‹Œ ์ผ๋ถ€๋ถ„๋งŒ ๊ฐฑ์‹ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๋ฐ›์•„์„œ JavaScript๋ฅผ ํ†ตํ•ด ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๊ฐฑ์‹ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค!

์‚ฌ์šฉ์ž ์ž…์žฅ์—์„œ๋Š” ๋ฉ”์ธ ํŽ˜์ด์ง€์—์„œ ๊ฒŒ์‹œํŒ ํŽ˜์ด์ง€๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด๋™ํ•œ ๊ฒƒ ๊ฐ™์€ ๋Š๋‚Œ์„ ๋ฐ›๋Š”๋ฐ, ์‚ฌ์‹ค ํŽ˜์ด์ง€๋Š” ์ด๋™ํ•˜์ง€ ์•Š์•˜๋‹ค. ํ•˜๋‚˜์˜ HTML ํŒŒ์ผ์— JavaScript๋ฅผ ์ด์šฉํ•ด์„œ ๊ฒŒ์‹œํŒ์— ํ•ด๋‹นํ•˜๋Š” ์›น ํŽ˜์ด์ง€์˜ DOM ๊ตฌ์กฐ๋งŒ ๋ฐ”๊พธ๊ณ  ๋ฆฌ๋ Œ๋”๋ง ๋˜๋Š” ๊ฒƒ!

:: SPA ์žฅ์  ๐Ÿ‘

ํŽ˜์ด์ง€ ์ „ํ™˜์ด ๊ต‰์žฅํžˆ ๋ถ€๋“œ๋Ÿฝ๊ณ  ๋น ๋ฅด๋‹ค.

ํŽ˜์ด์ง€ ๊ฐฑ์‹ ์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ์„ ์ „๋‹ฌ๋ฐ›๊ณ , ๊ฐฑ์‹ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž ์ž…์žฅ์—์„œ ํŽ˜์ด์ง€๊ฐ€ ๊ต‰์žฅํžˆ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด๋™ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ธ๋‹ค.

์ด๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX) ํ–ฅ์ƒ์œผ๋กœ ์ด์–ด์ง„๋‹ค.

:: SPA ๋‹จ์  ๐Ÿ‘Ž

์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๊ฐ€ ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค.

์ฒ˜์Œ ์›นํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ HTML+CSS+JavaScript ๊ฐ™์€ ์ •์  ๋ฆฌ์†Œ์Šค๋ฅผ ํ•œ๋ฒˆ์— ๋‹ค ๋‚ด๋ ค๋ฐ›๊ธฐ ๋•Œ๋ฌธ!

์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ Chunking , code splitting ๋“ฑ์ด ์žˆ๋‹ค!


ย ย  MPA (Multi Page Application) ย ย 

๋ฌธ์ž ๊ทธ๋Œ€๋กœ ์—ฌ๋Ÿฌ ๊ฐœ(multi)์˜ Page๋กœ ๊ตฌ์„ฑ๋œ application์„ ๋งํ•œ๋‹ค!

์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ์š”์ฒญํ•  ๋•Œ๋งˆ๋‹ค ์ •์  ๋ฆฌ์†Œ์Šค๋ฅผ ๋‚ด๋ ค๋ฐ›๊ณ , ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

MPA๋ฅผ ์•„๋ž˜์—์„œ ์„ค๋ช…ํ•  SSR(Server Side Rendering)๋ผ๊ณ  ๋งํ•˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋Š”๋ฐ,
์‚ฌ์‹ค SPA๋„ SSR ๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ SPA์˜ ๋‹จ์ ์ธ SEO๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ์•ˆ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋‹ค.

๋ญ”๋ง์ด์ง€....? ์‹ถ์–ด๋„ ์ผ๋‹จ ๋„˜์–ด๊ฐ€์ž, ์ž์„ธํ•œ ์„ค๋ช…์€ ์•„๋ž˜์—์„œ ๊ณ„์†!!

์œ„ ์ด๋ฏธ์ง€ ์ฒ˜๋Ÿผ, ์ฒ˜์Œ์— ์ดˆ๊ธฐ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด(ex: main page) SSR ๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋ง๋œ HTMLํŒŒ์ผ์„ ์‘๋‹ต๋ฐ›๋Š”๋‹ค.

๊ทธ ํ›„์— ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค๋ฅธ ๋ฉ”๋‰ด๋ฅผ, ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒŒ์‹œํŒ ๋ฉ”๋‰ด๋ฅผ ๋ˆ„๋ฅธ๋‹ค๋ฉด?
๊ฒŒ์‹œํŒ ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ , ๊ฒŒ์‹œํŒ ํŽ˜์ด์ง€ ์ž์ฒด๋ฅผ HTMLํŒŒ์ผ๋กœ ์‘๋‹ต๋ฐ›๋Š”๋‹ค.

๊ทธ๋ ‡๊ฒŒ ๋ฐ›์€ HTML ํŒŒ์ผ๋กœ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•œ๋‹ค.

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

Traditional Page....๋ผ๊ณ  ํ•˜๋‹ˆ ๋ญ”๊ฐ€ ์˜ค๋ž˜๋œ ๊ฒƒ ๊ฐ™๊ณ , ์š”์ฆ˜ ํ•ซํ•œ ๊ธฐ์—…๋“ค์€ ๋‹ค SPA๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ ๊ฐ™์ง€๋งŒ ์‚ฌ์‹ค ๊ทธ๋ ‡์ง€๋„ ์•Š๋‹ค.
์‹ค์ œ๋กœ Amazon, eBay ๋“ฑ์ด MPA ๋ฐฉ์‹์œผ๋กœ ๊ฐœ๋ฐœ๋˜์—ˆ๋‹ค.

SPA๋ž‘ ๋น„๊ตํ•ด๋ณด๋ฉด SPA๊ฐ€ ๋ฌด์กฐ๊ฑด ์ข‹์•„๋ณด์ด๋Š”๋ฐ.... MPA๊ฐ€ ์—ฌ์ „ํžˆ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ๋Š” ์ด์œ ๋Š” ๋ญ˜๊นŒ?

:: MPA ์žฅ์  ๐Ÿ‘

SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”)์— ์œ ๋ฆฌํ•˜๋‹ค.

MPA๋Š” ์„œ๋ฒ„์ธก์—์„œ ์™„์„ฑ๋œ HTMLํŒŒ์ผ์„ ์ „๋‹ฌ๋ฐ›๊ธฐ ๋•Œ๋ฌธ์—, ๊ฒ€์ƒ‰ ์—”์ง„์ด ์šฐ๋ฆฌ์˜ ํŽ˜์ด์ง€๋ฅผ ์‰ฝ๊ฒŒ ํฌ๋กค๋งํ•  ์ˆ˜ ์žˆ๋‹ค.

:: MPA ๋‹จ์  ๐Ÿ‘Ž

ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๊ฐ€ ๊ฐ•ํ•˜๊ฒŒ ๊ฒฐํ•ฉ๋˜์–ด ์žˆ๋‹ค.

ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด, ์„œ๋ฒ„์ธก์—์„œ HTML ํŒŒ์ผ์„ ์™„์„ฑํ•˜๊ณ  ์™„์„ฑ๋œ HTML ํŒŒ์ผ์„ ์‘๋‹ตํ•˜๋Š” ์‹์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋ฐฑ์—”๋“œ์˜ ์‘๋‹ต์ด ์—†์œผ๋ฉด ์‚ฌ์‹ค์ƒ ์•„๋ฌด๊ฒƒ๋„ ๋ณด์—ฌ์ค„ ์ˆ˜ ์—†๊ฒŒ ๋œ๋‹ค.....

๋˜, ํŽ˜์ด์ง€๊ฐ€ ์ „ํ™˜๋  ๋•Œ๋งˆ๋‹ค ์ƒˆ๋กœ์šด HTML ํŒŒ์ผ์„ ๊ณ„์†ํ•ด์„œ ์š”์ฒญํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž์˜ ์ •๋ณด์™€ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค.

ํ™”๋ฉด์—์„œ ๋ฐ”๋€Œ๋Š” ๋ถ€๋ถ„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ๋ถ€๋ถ„๋„ ๋งค๋ฒˆ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ๋ Œ๋”๋งํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ถˆํ•„์š”ํ•œ ๋กœ๋”ฉ์ด ์ƒ๊ฒจ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋–จ์–ด๋œจ๋ฆฌ๋Š” ๊ฒƒ๋„ ํฐ ๋‹จ์ ์ด๋‹ค.


ย ย  content-first approach ย ย 

๊ทธ๋ ‡๋‹ค๋ฉด, SPA ์™€ MPA ๋ฐฉ์‹ ์ค‘ ์–ด๋–ค๊ฑธ ์‚ฌ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ•ด์•ผ ํ• ๊นŒ?
์ •๋‹ต์€ content-first!
์ง„์งœ ๋‹จ์–ด ๊ทธ๋Œ€๋กœ, Application์—์„œ ์ œ๊ณตํ•˜๋ ค๋Š” ์ปจํ…์ธ ๋ถ€ํ„ฐ ๋จผ์ € ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์–ด๋–ค ์ปจํ…์ธ ๋ฅผ ๋‹ค๋ฃจ๊ณ , ์‚ฌ์šฉ์ž์—๊ฒŒ ์–ด๋–ค ์ปจํ…์ธ ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€๊ฐ€?

SPA๋ผ๊ณ  ๋ฌด์กฐ๊ฑด ํ•ซํ•˜๊ณ  ์ข‹์€๊ฒƒ๋„, MPA๋ผ๊ณ  ๋ฌด์กฐ๊ฑด ์˜ค๋ž˜๋˜๊ณ  ์•ˆ์ข‹์€๊ฒƒ๋„ ์•„๋‹ˆ๋‹ค.
๊ฐ๊ฐ์˜ ์žฅ๋‹จ์ ์ด ๋šœ๋ ทํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ œ๊ณตํ•˜๊ณ  ์‹ถ์€ ์ปจํ…์ธ ๋ฅผ ์ค‘์ ์ ์œผ๋กœ ์–ด๋–ค ๋ฐฉ์‹์„ ์‚ฌ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•ด์•ผ ํ•œ๋‹ค.


ย ย  SEO(Search Engine Optimization) ย ย 

์•ž์„œ์„œ MPA์˜ ์žฅ์ ์œผ๋กœ SEO์— ์œ ๋ฆฌํ•˜๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ, SEO๋ž€ ์ •ํ™•ํžˆ ๋ญ˜๊นŒ?

Search Engine Optimization ์ฆ‰, ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๋ฅผ SEO๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ์‚ฌ์šฉ์ž๊ฐ€ ๊ตฌ๊ธ€, ๋„ค์ด๋ฒ„, ๋‹ค์Œ ๋“ฑ์˜ ๊ฒ€์ƒ‰ ์—”์ง„์—์„œ ์„ ๋ฆ‰ ๋ง›์ง‘ ์ด๋ž€ ํ‚ค์›Œ๋“œ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์„ ๋•Œ, ์šฐ๋ฆฌ์˜ ํ™ˆํŽ˜์ด์ง€์— ์„ ๋ฆ‰ ๋ง›์ง‘ ์ด๋ž€ ์ปจํ…์ธ ๊ฐ€ ์žˆ๋‹ค๋ฉด ์šฐ๋ฆฌ์˜ ์ปจํ…์ธ ๋ฅผ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์˜ ์ƒ๋‹จ์— ์œ„์น˜์‹œํ‚ค๋Š” ์ž‘์—…์„ ๋œปํ•œ๋‹ค.

์‰ฝ๊ฒŒ ๋งํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ์šฐ๋ฆฌ์˜ ํ™ˆํŽ˜์ด์ง€, ์ปจํ…์ธ ๋ฅผ ์‰ฝ๊ฒŒ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์ž‘์—…์ด๋‹ค.

SEO์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์ดํ•ดํ•˜๋ ค๋ฉด ๋จผ์ €, ๊ฒ€์ƒ‰ ์—”์ง„์ด๋ž€ ๋…€์„์„ ์ดํ•ดํ•ด์•ผ ํ•œ๋‹ค.

๊ฒ€์ƒ‰ ์—”์ง„์ด๋ž€, ์ธํ„ฐ๋„ท์— ์‚ฐ์žฌ๋œ ๋‹ค์–‘ํ•œ ์ •๋ณด๋ฅผ ๋ฏธ๋ฆฌ ์ˆ˜์ง‘(ํฌ๋กค๋ง Crawling) ํ•œ ํ›„์—, ์ด๋ฅผ ์ •๋ฆฌ(์ธ๋ฑ์‹ฑ Indexing) ํ•˜์—ฌ ์นดํ…Œ๊ณ ๋ฆฌํ™” ํ•ด๋‘๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์ด๋‹ค.

๊ทธ๋ž˜์„œ ์‚ฌ์šฉ์ž๊ฐ€ ํŠน์ • ์ปจํ…์ธ ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์„ ๋•Œ ๋ฏธ๋ฆฌ ์นดํ…Œ๊ณ ๋ฆฌํ™” ํ•ด๋‘” ์ •๋ณด ๊ฐ€์šด๋ฐ ์šฐ์„ ์ ์œผ๋กœ ๋ณด์—ฌ์ค„ ์ •๋ณด๋ฅผ ์ž์ฒด์ ์œผ๋กœ ๋ณด์œ ํ•œ ํ‰๊ฐ€ ์•Œ๊ณ ๋ฆฌ์ฆ˜์— ์˜ํ•ด ์„ ๋ณ„ํ•ด์„œ ๋ณด์—ฌ์ค€๋‹ค.

์ด ๋•Œ, ๋Œ€๋ถ€๋ถ„์˜ ํฌ๋กค๋Ÿฌ๋Š” HTML ํŒŒ์ผ์˜ ์ปจํ…์ธ ๋ฅผ ์ˆ˜์ง‘ํ•˜๊ณ  ๋ถ„๋ฅ˜ํ•˜๋Š”๋ฐ,
์ฒ˜์Œ์— HTML ๊ป๋ฐ๊ธฐ๋งŒ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๊ณ , ๊ทธ ํ›„์—๋Š” ํ•„์š”ํ•œ ์ •๋ณด๋งŒ json ํ˜•ํƒœ๋กœ ์‘๋‹ต๋ฐ›์•„์„œ JavaScript๋กœ ๋™์ ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋Š” SPA์˜ ๊ฒฝ์šฐ์—๋Š”, JavaScript ๋ Œ๋”๋ง์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋Œ€๋ถ€๋ถ„์˜ ๊ฒ€์ƒ‰์—”์ง„ ๋ฐ ํฌ๋กค๋Ÿฌ๊ฐ€ ์•„๋ฌด ์ปจํ…์ธ ๋„ ์ˆ˜์ง‘ํ•  ์ˆ˜ ์—†๊ฒŒ ๋œ๋‹ค.

์ฆ‰, ์„ ๋ฆ‰ ๋ง›์ง‘ ์ถ”์ฒœ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ ์ •์ž‘ ์„ ๋ฆ‰ ๋ง›์ง‘์ด๋ผ๊ณ  ๊ฒ€์ƒ‰ํ–ˆ์„๋•Œ ์šฐ๋ฆฌ์˜ ์‚ฌ์ดํŠธ๊ฐ€ ๋‚˜์˜ค์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค...!
(๊ตฌ๊ธ€์€ JavaScript ๋ Œ๋”๋ง์„ ์ง€์›ํ•˜๊ธด ํ•˜์ง€๋งŒ ๋„ค์ด๋ฒ„, ๋‹ค์Œ์—๋Š” ์•„์ง ๋จผ ์–˜๊ธฐ.....)

๋ฐ˜๋Œ€๋กœ MPA๋Š” ๊ฐ HTML ํŽ˜์ด์ง€๋งˆ๋‹ค ์ค‘์š”ํ•œ ํ‚ค์›Œ๋“œ์— ๋งž๊ฒŒ ์ปจํ…์ธ ๋ฅผ ์ตœ์ ํ™” ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ชจ๋“  ํŽ˜์ด์ง€์— title ํƒœ๊ทธ์™€ meta ํƒœ๊ทธ๋ฅผ ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ์–ด์„œ SEO์— ์œ ๋ฆฌํ•˜๋‹ค.

๐Ÿ’๐Ÿปโ€โ™€๏ธ title ํƒœ๊ทธ, meta ํƒœ๊ทธ!

๊ฒ€์ƒ‰ ์—”์ง„์ด ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์„ ํŒŒ์•…ํ•  ๋•Œ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ์ดํ„ฐ์ด๋‹ค.
title ํƒœ๊ทธ๋Š” ํ•ด๋‹น ํŽ˜์ด์ง€์˜ ์ œ๋ชฉ์„, meta ํƒœ๊ทธ๋Š” ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์„ค๋ช…์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.
title ํƒœ๊ทธ, meta ํƒœ๊ทธ๊ฐ€ ํ•˜๋‚˜๋งŒ ์žˆ๋Š” SPA์— ๋น„ํ•ด, MPA๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€์— ์žˆ๋‹ค.
MPA๊ฐ€ SEO์— ๋” ์œ ๋ฆฌํ•œ ์ด์œ  ์ค‘ ํ•˜๋‚˜!!

๊ทธ๋ž˜์„œ react์˜ ๊ฒฝ์šฐ์—๋Š” Node.js ์„œ๋ฒ„์—์„œ ๊ธฐ๋ณธ์ ์ธ SSR(server side rendering)์„ ์ˆ˜ํ–‰ํ•œ ํ›„ ์‘๋‹ต์„ ๋ฐ›๊ฑฐ๋‚˜, Next.js ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค. ๊ฒ€์ƒ‰ํ•ด๋ณด๋‹ˆ prerender ๊ฐ™์€ ์„œ๋น„์Šค๋„ ์žˆ๋Š”๋“ฏํ•˜๋‹ค.

๋” ์ž์„ธํ•œ ๋ฐฉ๋ฒ•์€ ๊ตฌ๊ธ€์— SPA server side rendering ๊ฒ€์ƒ‰ ๊ณ ๊ณ !!


ย ย  CSR (Client Side Rendering) ย ย 

JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํŽ˜์ด์ง€๋ฅผ ์ง์ ‘ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

๋ฏธ๋ฆฌ ์™„์„ฑ๋œ ํŽ˜์ด์ง€๋ฅผ ๊ทธ๋Œ€๋กœ ๋ณด์—ฌ์ฃผ๋Š”๊ฒŒ ์•„๋‹Œ Client ์ฆ‰, ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง์ ‘ html๊ณผ JavaScript์„ ์กฐํ•ฉํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€๋Š” SPA์ด๋ฉด์„œ ๋™์‹œ์— CSR์ด๋‹ค.

๋ฌผ๋ก , ๋ชจ๋“  SPA๊ฐ€ CSR ๋ฐฉ์‹์ธ๊ฑด ์•„๋‹ˆ๋‹ค!
SEO ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด SPA๋ฅผ SSR ๋ฐฉ์‹์œผ๋กœ ๋ Œ๋”๋ง ํ•˜๊ฑฐ๋‚˜, ๋‘˜ ๋‹ค๋ฅผ ํ˜ผ์šฉํ•˜๋Š” ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ฐฉ์‹ ๋˜ํ•œ ์กด์žฌํ•œ๋‹ค.


ย ย  SSR (Server Side Rendering) ย ย 

์„œ๋ฒ„์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค„ ํŽ˜์ด์ง€๋ฅผ ๋ชจ๋‘ ๊ตฌ์„ฑํ•ด์„œ (html + JavaScript) ์™„์„ฑ๋œ HTML ํŒŒ์ผ ์ž์ฒด๋ฅผ ์‘๋‹ตํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

๋™์ ์ธ ์›น์‚ฌ์ดํŠธ(Dynamic website)๋‚˜ SPA๋„ SSR์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฏธ ์™„์„ฑ๋œ HTMLํŒŒ์ผ์ด ์˜ค๊ธฐ ๋•Œ๋ฌธ์—, SEO ์ตœ์ ํ™”์— ์ข‹๋‹ค!


์ถœ์ฒ˜ : developers.google.com, ๋งˆํ‹ด๋‹˜ ๋ธ”๋กœ๊ทธ (martinwork), linked2ev๋‹˜ ๋ธ”๋กœ๊ทธ, Jonghan๋‹˜ ๋ธ”๋กœ๊ทธ


๊ฐœ์ธ์ ์œผ๋กœ ๋„ˆ๋ฌด ๋„ˆ๋ฌด ์–ด๋ ค์šด ๊ฐœ๋…์ด์—ˆ์Šต๋‹ˆ๋‹ค.....
ํŒŒ๊ณ  ํŒ”์ˆ˜๋ก ๋„ˆ๋ฌด๋„ˆ๋ฌด ๊นŠ์–ด์ง€๊ณ  ์ปด๊ณต ์ง€์‹์ด ๋งŽ์ด ์š”๊ตฌ๋˜์–ด์„œใ… ใ… 
ํŠนํžˆ SPA์™€ MPA์˜ ์žฅ๋‹จ์  ๊ฐ™์€ ๋ถ€๋ถ„์€ ์ œ๊ฐ€ ์ ์€ ๋‚ด์šฉ ์™ธ์—๋„ ์ •๋ง ๋‹ค์–‘ํ•˜๊ณ  ๊นŠ์€ ์žฅ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. (์ž์„ธํ•œ ๋‚ด์šฉ์€ ์—ฌ๊ธฐ ์ฐธ๊ณ )
๊ฒฐ๊ตญ ๋Œ€๊ฐ• ๊ทธ๋ ‡๊ตฌ๋‚˜~ ํ•˜๋Š” ์ˆ˜์ค€์—์„œ ์ด๋งŒ ์ •๋ฆฌ๋ฅผ ๋งˆ์นฉ๋‹ˆ๋‹ค.
ํ‹€๋ฆฐ์ ์ด ์žˆ๋‹ค๋ฉด ๊ฐ€๊ฐ์—†์ด ๋Œ“๊ธ€ ํ˜น์€ gmail(rkdthfl132@gmail.com) ์œผ๋กœ ์˜๊ฒฌ ์ฃผ์‹œ๋ฉด ๋” ๊ณต๋ถ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!!
์œ„ ๋‚ด์šฉ์— ๋Œ€ํ•ด ๋” ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„์€ google ๊ฐœ๋ฐœ๋ธ”๋กœ๊ทธ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

profile
ํ•˜๋ฃจํ•˜๋ฃจ๋Š” ์„ฑ์‹คํ•˜๊ฒŒ ์ธ์ƒ ์ „์ฒด๋Š” ๋˜๋Š”๋Œ€๋กœ

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

comment-user-thumbnail
4์ผ ์ „

๊ฒ€์ƒ‰ํ•˜๋‹ค๊ฐ€ ๋“ค์–ด์˜จ ์†”๋ฏธ๋‹˜ ๋ธ”๋กœ๊ทธ ใ…Žใ…Žใ…Ž ์—ญ์‹œ ์งฑ์งฑ์ด์—์š”!!

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
4์ผ ์ „

SPA = CSR์€ ์•„๋‹™๋‹ˆ๋‹ค.
next.js์ฒ˜๋Ÿผ SPA์—์„œ๋„ SSR์„ ์ง€์›ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ์–ด์š”.

1๊ฐœ์˜ ๋‹ต๊ธ€