SPA(CSR)? MPA( SSR) ?๐Ÿค”

shin6403ยท2021๋…„ 1์›” 26์ผ
2
post-thumbnail

SPA,MPA,CSR,SSR์€ ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹ˆ์–ด๋„ ์›น ๊ฐœ๋ฐœ ๋ถ„์•ผ์— ์žˆ๋‹ค๋ฉด ์•Œ์•„์•ผํ•  ๊ฐœ๋…๋“ค์ด๋‹ค.

๋จผ์ € SPA์™€ MPA๋ฅผ ์•Œ์•„๋ณด๊ธฐ ์ „์— ์„ ํ–‰ ํ•™์Šต์œผ๋กœ ๋ฐฉ๋ฒ•๋ก ์„ ์งš๊ณ  ๋„˜์–ด๊ฐ€๊ณ ์ž ํ•œ๋‹ค.

2๊ณ„์ธต ๊ตฌ์กฐ(2 Tier Architecture Structure)

์„ค๋ช…์ „์— ๊ฐ„๋‹จํ•˜๊ฒŒ ์šฉ์–ด์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•˜์ž๋ฉด,

  • ๊ณ„์ธต(Tier) : ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๋ฌผ๋ฆฌ์ ์ธ ๋ถ„๋ฆฌ๋ฅผ ๋œป ํ•จ.
  • ์ธต(Layer) : ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ๋…ผ๋ฆฌ์ ์ธ ๋ถ„๋ฆฌ๋ฅผ ๋œป ํ•จ.

๊ณผ๊ฑฐ ๋Œ€๋ถ€๋ถ„์˜ ์›น์‚ฌ์ดํŠธ๋Š” 2๊ณ„์ธต ๊ตฌ์กฐ๋กœ ๊ฐœ๋ฐœ๋˜์—ˆ๋‹ค.

2๊ณ„์ธต ๊ตฌ์กฐ๋ž€, ํ™”๋ฉด์ด ๋ณด์—ฌ์ง€๋Š” ํด๋ผ์ด์–ธํŠธ(Client)๋ถ€๋ถ„๊ณผ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค(DB)๊ฐ€ ๋ฌผ๋ฆฌ์ ์œผ๋กœ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ๊ณ , ํด๋ผ์ด์–ธํŠธ์— ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(User Interface)์™€ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง(Business Logic)์ด ํ•จ๊ป˜ ์žˆ๋Š” ๊ตฌ์กฐ์ด๋‹ค.

2๊ณ„์ธต ๊ตฌ์กฐ์˜ ํŠน์ง•์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์กฐ๊ฐ€ ๋‹จ์ˆœํ•˜์—ฌ ์ดˆ๊ธฐ ์„œ๋น„์Šค๋‚˜ ์›น์‚ฌ์ดํŠธ๋“ค์ด ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ตฌ์กฐ์ด๋‹ค.
  • ๋น„์ฆˆ๋‹ˆ์Šค๊ฐ€ ๋ณต์žกํ•ด์ง€๊ฑฐ๋‚˜ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๋ฉด ๊ด€๋ฆฌํ•˜๊ธฐ๊ฐ€ ์–ด๋ ค์›Œ์ ธ์„œ ํด๋ผ์ด์–ธํŠธ ์†๋„ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ, 3๊ณ„์ธต, ํ˜น์€ N๊ณ„์ธต ๊ตฌ์กฐ๋กœ ์žฌ์„ค๊ณ„ํ•˜์—ฌ ๋ฆฌ๋‰ด์–ผํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

3๊ณ„์ธต ๊ตฌ์กฐ(3 Tier Architecture Structure)

3๊ณ„์ธต ๊ตฌ์กฐ(3 Tier Architecture Structure)๋ž€ ํ”„๋ ˆ์   ํ…Œ์ด์…˜ ๋กœ์ง(ํด๋ผ์ด์–ธํŠธ,์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(UI), ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง, **๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๋กœ์ง**์„ ๊ฐ๊ฐ ๋‹ค๋ฅธ ํ”Œ๋žซํผ ์ƒ์—์„œ ๊ตฌํ˜„ํ•œ ๊ฒƒ์ด๋‹ค.

ํ”ํžˆ **3์„ธ๋Œ€ ์›น**์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ๊ธฐ๋„ ํ•˜๋ฉฐ, 2๊ณ„์ธต ๊ตฌ์กฐ์™€ 3๊ณ„์ธต ๊ตฌ์กฐ์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ **ํด๋ผ์ด์–ธํŠธ ์•ˆ์— ์žˆ๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ๋ถ„๋ฆฌ๋œ๋‹ค๋Š” ์ **์ด๋‹ค.
ํด๋ผ์ด์–ธํŠธ๋Š” ํ”„๋ ˆ์  ํ…Œ์ด์…˜, ๋น„์ฆˆ๋‹ˆ์Šค๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•œ๋‹ค.

1. ํ”„๋ ˆ์  ํ…Œ์ด์…˜(ํด๋ผ์ด์–ธํŠธ) ๊ณ„์ธต

ํ”„๋กœ๊ทธ๋žจ์˜ ํ”„๋ ˆ์  ํ…Œ์ด์…˜(ํด๋ผ์ด์–ธํŠธ) ๊ณ„์ธต์ด ์œ„์น˜ํ•˜๊ณ  ์žˆ๊ณ , ์„œ๋กœ ๋‹ค๋ฅธ ์ธต์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ์™€ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ํ•œ๋‹ค.
๋‹ค๋ฅธ ๋ง๋กœ Front-End๋ผ๊ณ  ํ•œ๋‹ค.

  • ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ง€์›ํ•œ๋‹ค. (์ธํ„ฐ๋„ท ๋ธŒ๋ผ์šฐ์ €์˜ ์ •์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณต)

  • ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด๋‚˜ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค.

  • ์ฃผ๋กœ ์›น์„œ๋ฒ„๋ฅผ ๋œปํ•œ๋‹ค(FE์„œ๋ฒ„)
    ex) HTML, javascript, CSS, image

2. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ณ„์ธต

์ด ๊ณ„์ธต์€ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ๊ณ„์ธต ๋˜๋Š” ํŠธ๋žœ์žญ์…˜ ๊ณ„์ธต์ด๋ผ๊ณ ๋„ ํ•˜๋Š”๋ฐ, ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์€ ์›Œํฌ์Šคํ…Œ์ด์…˜์œผ๋กœ๋ถ€ํ„ฐ์˜ ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ์— ๋Œ€ํ•ด ๋งˆ์น˜ ์„œ๋ฒ„์ฒ˜๋Ÿผ ํ–‰๋™ํ•œ๋‹ค. ์ฐจ๋ก€๋กœ ์–ด๋–ค ๋ฐ์ดํ„ฐ๊ฐ€ ํ•„์š”ํ•œ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๊ณ , ๋ฉ”์ธํ”„๋ ˆ์ž„ ์ปดํ“จํ„ฐ ์ƒ์— ์œ„์น˜ํ•˜๊ณ  ์žˆ์„ ์„ธ ๋ฒˆ์งธ ๊ณ„์ธต์˜ ํ”„๋กœ๊ทธ๋žจ์— ๋Œ€ํ•ด์„œ๋Š” ๋งˆ์น˜ ํด๋ผ์ด์–ธํŠธ์ฒ˜๋Ÿผ ํ–‰๋™ํ•œ๋‹ค.
๋˜ ๋‹ค๋ฅธ ๋ง๋กœ Back-End๋ผ๊ณ  ๋ถˆ๋ฆฐ๋‹ค.

  • ์ •๋ณด์ฒ˜๋ฆฌ์˜ ๊ทœ์น™์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.(๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณต)
  • ํ”„๋ ˆ์  ํ…Œ์ด์…˜์ฝ”๋“œ๋‚˜ ๋ฐ์ดํ„ฐ๊ด€๋ฆฌ ์ฝ”๋“œ๋ฅผ ํฌํ•จํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค.
  • ์ฃผ๋กœ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์„œ๋ฒ„๋ฅผ ๋œปํ•œ๋‹ค(๋ฌผ๋ฆฌ์  : WAS์„œ๋ฒ„)

ex) Java EE, ASP.NET, PHP

3. ๋ฐ์ดํ„ฐ ๊ณ„์ธต

๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ์•ก์„ธ์Šคํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๊ฑฐ๋‚˜ ์“ฐ๋Š” ๊ฒƒ์„ ๊ด€๋ฆฌํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ํฌํ•จํ•œ๋‹ค. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์กฐ์ง์€ ์ด๊ฒƒ๋ณด๋‹ค ๋”์šฑ ๋ณต์žกํ•ด์งˆ ์ˆ˜ ์žˆ์ง€๋งŒ, 3๊ณ„์ธต ๊ด€์ ์€ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ๊ทธ๋žจ์—์„œ ์ผ๋ถ€๋ถ„์— ๊ด€ํ•ด ์ƒ๊ฐํ•˜๊ธฐ์— ํŽธ๋ฆฌํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค. ์ด ๋ถ€๋ถ„๋„ Back-End๋ผ๊ณ  ๋ถˆ๋ฆฐ๋‹ค.

-์ฃผ๋กœ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ๋œปํ•œ๋‹ค.
-DB ๋˜๋Š” File System๋ฅผ ์ ‘๊ทผ ๋ฐ ๊ด€๋ฆฌํ•œ๋‹ค.
-์ฃผ๋กœ DB์„œ๋ฒ„๋ฅผ ๋œปํ•œ๋‹ค(๋ฌผ๋ฆฌ์  : DB์„œ๋ฒ„)

ex) MySQL DB, Oracle DB

3๊ณ„์ธต๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ ๊ณ„์ธต๋ณ„๋กœ ์›น๋””์ž์ด๋„ˆ, ์†Œํ”„ํŠธ์›จ์–ด์—”์ง€๋‹ˆ์–ด, DB๊ด€๋ฆฌ์ž๊ฐ€ ์—ญํ• ๋ถ„๋‹ด์„ ํ•˜์—ฌ ์ผ์„ ํšจ์œจ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๊ณ , ์œ„ ๊ตฌ์กฐ์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ํ•˜๊ณ  ์žˆ์–ด์•ผ SPA์™€ MPA์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ์‰ฝ๋‹ค.

์•„๋ž˜ ์‚ฌ์ง„์€ ์ด์–ด์„œ ์†Œ๊ฐœํ•  SPA์™€ MPA์˜ ์š”์ฒญ๋ฐฉ์‹์˜ ์ฐจ์ด๋ฅผ ๋‚˜ํƒ€๋‚ธ ์ด๋ฏธ์ง€์ด๋‹ค.

1. MPA(Multi Page Application)

MPA(Multi Page Application) ๋‹ค์ค‘ ํŽ˜์ด์ง€ ์‘์šฉํ”„๋กœ๊ทธ๋žจ์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ๊ธฐ๋„ ํ•˜๋ฉฐ, ์ „ํ†ต์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๋ฐฉ์‹์ด๋‹ค.

์„œ๋ฒ„๋กœ ๋ถ€ํ„ฐ ์™„์ „ํ•œ ํŽ˜์ด์ง€๋ฅผ ๋ฐ›์•„์˜ค๊ณ , ์œ„์— ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ์ดํ›„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ์กฐํšŒํ•  ๋•Œ, ์™„์ „ํ•œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค.

jsp,php,Django ๋“ฑ๊ณผ ๊ฐ™์€ ์›น ์„œ๋ฒ„ ์–ธ์–ด๋กœ ๊ตฌ์ถ•๋œ ์›น์‚ฌ์ดํŠธ์—์„œ ์ฃผ๋กœ ๋งŽ์ด ๋ณด์ธ๋‹ค.
์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ํŠน์ • ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์š”์ฒญ์„ ์„œ๋ฒ„์— ๋ณด๋‚ด๋ฉด, ์„œ๋ฒ„๋Š” ๋ฐ์ดํ„ฐ๋ฅผ HTML ๋ฌธ์„œ๋กœ ๋ฐ์ดํ„ฐ๊นŒ์ง€ ์ „๋ถ€ ์‚ฝ์ž…ํ•˜์—ฌ ์™„์„ฑ๋œ HTML์„ ์›น ๋ธŒ๋ผ์šฐ์ €์— ์‘๋‹ตํ•œ๋‹ค. ์ด ๋ฐฉ์‹์„ SSR(Server Side Rendering)๋ฐฉ์‹ ์ด๋ผ๊ณ  ํ•œ๋‹ค.~~(๋ฐ‘์—์„œ ์ž์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•  ์˜ˆ์ •!)~~

์•„๋ž˜ ๊ทธ๋ฆผ์€ ์žฅ๊ณ  ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์— ๋Œ€ํ•œ html,๋ฐ์ดํ„ฐ ์‘๋‹ต ์š”์ฒญ๊ด€๋ จ ์ด๋ฏธ์ง€์ด๋‹ค.

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

๊ทธ๋ ‡๊ธฐ์— MPA์˜ ๊ฐ€์žฅ ํฐ ๋‹จ์ ์€ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๊ฐ€ ๊ฒฐํ•ฉ๋˜์–ด ์žˆ์–ด, 2๊ณ„์ธต ๊ตฌ์กฐ์—์„œ ๋น„์ฆˆ๋‹ˆ์Šค๊ฐ€ ๋ณต์žกํ•ด์ง€๊ฑฐ๋‚˜ ๋น„๋Œ€ํ•ด์ง€๋ฉด ๊ด€๋ฆฌํ•˜๊ธฐ๊ฐ€ ์–ด๋ ค์›Œ์ง„๋‹ค๋ผ๋Š” ๋ง๊ณผ ๋™์ผํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ๋‹จ์ ๋งŒ ์žˆ๋Š”๊ฒŒ ์•„๋‹Œ ์žฅ์ ๋„ ์žˆ๋Š”๋ฐ, **MPA์˜ ๊ฐ€์žฅ ํฐ ์žฅ์ ์€ SEO ์นœํ™”์ **์ด๋‹ค.
SEO๋ผ๋Š” ๋ง์€ ๊ฒ€์ƒ‰์—”์ง„ ์ตœ์ ํ™”๋กœ, ๋„ค์ด๋ฒ„,๊ตฌ๊ธ€,๋‹ค์Œ ๋“ฑ๋“ฑ ์—ฌ๋Ÿฌ ๊ฒ€์ƒ‰ ์‚ฌ์ดํŠธ์— ์‰ฝ๊ฒŒ ๋…ธ์ถœ๋˜๋Š” ๊ฒƒ์ด๋‹ค.
์ƒˆ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์Šคํƒ€ํŠธ์—…์ด๋‚˜, ํ™๋ณด๋ฅผ ๋งŽ์ด ํ•ด์•ผํ•˜๋Š” ์ผ์ด๋ผ๋ฉด, MPA ๊ตฌ์กฐ๋กœ ๊ฐœ๋ฐœํ•˜์—ฌ ๋…ธ์ถœ๋˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ์‹์ด ์ข‹๋‹ค.

2. SPA(Single Page Applicaton)

SPA(Single Page Applicaton)๋Š” ๋ง ๊ทธ๋ž˜๋„ **ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ์ „์ฒด ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌํ˜„**ํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค.

๊ธฐ์กด์˜ ๋ฐฉ์‹๋Œ€๋กœ ์„œ๋ฒ„๊ฐ€ ํŽ˜์ด์ง€ ๊ตฌ์„ฑ์— ํ•„์š”ํ•œ ๋ชจ๋“  ์š”์†Œ(HTML, JavaScript, Data)๋ฅผ ๋งค๋ฒˆ ์ „์†กํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, ํŒŒ์ผ์€ ์ฒ˜์Œ ํ•œ ๋ฒˆ๋งŒ ์†ก์ˆ˜์‹ ํ•˜๊ณ , ์ดํ›„ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๋งŒ ์ฃผ๊ณ  ๋ฐ›๋Š”๋‹ค.

HTML ํƒœ๊ทธ ์ž์ฒด๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•˜์—ฌ ๋‹จ์ผ htmlํŽ˜์ด์ง€์—์„œ ์ „์ฒด ์›น ์‚ฌ์ดํŠธ/์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•œ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. (HTML/JavaScript ๋ถ€๋ถ„๊ณผ ๋ฐ์ดํ„ฐ ๋ถ€๋ถ„์ด ๊ตฌ์กฐ์ ์œผ๋กœ ๋ถ„๋ฆฌ ๋˜๊ธฐ ์‹œ์ž‘)

์ œ์ผ ์ฒ˜์Œ ์ „์†ก๋œ ๋‹จ์ผ HTML ํŽ˜์ด์ง€์— ํฌํ•จ๋˜์–ด ์žˆ๋Š” JavaScript ์—์„œ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ API ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ํ˜ธ์ถœํ•˜์—ฌ ํ•„์š”ํ•œ ํ™”๋ฉด์„ dynamic ํ•˜๊ฒŒ ์ƒˆ๋กญ๊ฒŒ ๊ตฌ์„ฑํ•ด์ค€๋‹ค.

SPA๊ฐ€ ๋‚˜์˜จ ๋‹ค์Œ๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๊ฐ€ ๋‚˜๋‰˜๊ฒŒ ๋˜๋Š” ๊ธฐ์ ์ด ๋˜๋Š”๋ฐ, ์ด๋Š” ์•ž์—์„œ ์ด์•ผ๊ธฐํ•œ 3์„ธ๋Œ€ ์›น์ด์•ผ๊ธฐ์™€ ์ด์–ด์ง„๋‹ค.

  • Frontend ๊ฐœ๋ฐœ๊ณผ Backend ๊ฐœ๋ฐœ์ด ๋…๋ฆฝ์ ์œผ๋กœ ๋ถ„๋ฆฌ (ํ”„๋ก ํŠธ - UI UX / ๋ฐฑ์—”๋“œ - Data)
  • Frontend ์™€ Backend๊ฐ€ ๊ตฌ์กฐ์ ์œผ๋กœ ๋ถ„๋ฆฌ๊ฐ€ ๋˜๋ฉด์„œ, Frontend ์„œ๋ฒ„์™€ Backend API ์„œ๋ฒ„๋„ ๋ถ„๋ฆฌ๊ฐ€ ๋˜๋ฉฐ ๊ทธ์— ๋”ฐ๋ผ Frontend ๊ฐœ๋ฐœ๊ณผ Backend ๊ฐœ๋ฐœ ์—…๋ฌด๊ฐ€ ๋ถ„๋ฆฌ๊ฐ€ ๋˜๋Š” ๊ตฌ์กฐ๋กœ ๋ฐœ์ „๋œ๋‹ค.

๋ช…ํ™•ํžˆ ๋‚˜๋‰˜์–ด์ง„ ๋‘ ๊ฐœ์˜ ์‹œ์Šคํ…œ์œผ๋กœ ์›น์ด ๋™์ž‘ํ•˜๊ฒŒ๋˜๊ณ , ๊ธฐ์ˆ  ์Šคํƒ๋„ ๊ฐ์ž์— ๋งž๋Š” ์Šคํƒ์„ ์‹œ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ•˜๊ฒŒ๋œ๋‹ค. (ex. React ์˜ ์ถœํ˜„!)

ํ”„๋ก ํŠธ์—”๋“œ์˜ ๊ฐœ๋ฐœ์˜ ํ˜์‹ ์ด ๋น ๋ฅธ ์ด์œ ๋„ ์ด ๋ถ„์•ผ ์ž์ฒด์˜ ์—ญ์‚ฌ๊ฐ€ ์งง๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

ํ•˜์ง€๋งŒ ์‹œ๊ฐ„์ด ํ˜๋Ÿฌ ์กฐ๊ธˆ์”ฉ ์ด์ƒํ•œ ์ ์ด ๋“œ๋Ÿฌ๋‚˜๊ธฐ ์‹œ์ž‘ํ•œ๋‹ค.

"์šฐ๋ฆฌ ์‚ฌ์ดํŠธ๊ฐ€ ๊ฒ€์ƒ‰์— ๋„ˆ๋ฌด ๋…ธ์ถœ์ด์•ˆ๋˜๋Š”๊ฑธ?๐Ÿค”"

๊ทธ ์ด์œ ๋Š” ๋ฐ”๋กœ, SPA๋Š” Only CSR(Client Side Render)๋กœ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

CSR(Client Side Rendering)

  • ์›น ํŽ˜์ด์ง€์˜ ๋ Œ๋”๋ง์ด ํด๋ผ์ด์–ธํŠธ(๋ธŒ๋ผ์šฐ์ €) ์ธก์—์„œ ์ผ์–ด๋‚˜๋Š” ๊ฒƒ์„ ์˜๋ฏธ.
  • ๋ธŒ๋ผ์šฐ์ €๋Š” ์ตœ์ดˆ ์š”์ฒญ์—์„œ HTML, CSS, Javascript ํ™•์žฅ์ž์˜ ํŒŒ์ผ์„ ์ฐจ๋ก€๋กœ ๋‹ค์šด๋กœ๋“œ.
  • ์ตœ์ดˆ๋กœ ๋ถˆ๋Ÿฌ์˜จ HTML์˜ ๋‚ด์šฉ์€ ๋น„์–ด์žˆ์Œ. (HTML, body ํƒœ๊ทธ๋งŒ ์กด์žฌ)
  • JS ํŒŒ์ผ์˜ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ์™„๋ฃŒ๋œ ๋‹ค์Œ, ํ•ด๋‹น JS ํŒŒ์ผ์ด DOM์„ ๋นˆ HTML ์œ„์— ๊ทธ๋ฆฌ๊ธฐ ์‹œ์ž‘.
  • ๋ฐฑ์—”๋“œ ํ˜ธ์ถœ์„ ์ตœ์†Œํ™” ํ•  ์ˆ˜ ์žˆ์Œ
    • ์ตœ์ดˆ ํ˜ธ์ถœ ๋•Œ๋งŒ HTML, JS, CSS๋ฅผ ์š”์ฒญ
    • ์ดํ›„์—๋Š” ํ™”๋ฉด์—์„œ ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚˜์•ผ ํ•˜๋Š” ๋งŒํผ์˜ ๋ฐ์ดํ„ฐ๋งŒ ์š”์ฒญ (ex. JSON)
  • ๋ผ์šฐํŒ…(์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋กœ ์ด๋™)์„ ํ•˜๋”๋ผ๋„ HTML ์ž์ฒด๊ฐ€ ๋ฐ”๋€Œ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ JavaScript ์ฐจ์›์—์„œ ์ƒˆ๋กœ์šด ํ™”๋ฉด์„ ๊ทธ๋ ค๋‚ด๋Š” ๊ฒƒ์ด๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ๊ฒ€์ƒ‰์—”์ง„์ด ๊ฒ€์ƒ‰์„ ํ•˜๋Š” ์›๋ฆฌ๋Š” ์–ด๋–ป๊ฒŒ ๋˜๋Š”๊ฒƒ์ผ๊นŒ? ๊ทธ ๊ณผ์ •์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • ๊ตฌ๊ธ€ ๋ด‡ ๊ฒ€์ƒ‰์‹œ์ž‘
  • ์šฐ๋ฆฌ์˜ WEB์˜ HTML์„ ์‚ดํŽด๋ด„
  • ์ฒ˜์Œ์—๋Š” ์šฐ๋ฆฌ WEB์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋น„์–ด์žˆ์Œ
  • ๊ตฌ๊ธ€ ๋ด‡ ํ‡ด์žฅ
  • ์ดํ›„ JS๋ฐ์ดํ„ฐ๊ฐ€ ์ž…ํ˜€์ง

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

์šฐ๋ฆฌ๋Š” ์ง‘์— ๋“ค์–ด์™”๋Š”๋ฐ ๊ตฌ๊ธ€ ๋ด‡์€ ์šฐ๋ฆฌ๊ฐ€ ์ง‘์— ์—†๋‹ค๊ณ  ํŒ๋‹จํ•˜์—ฌ ๋น„์–ด์žˆ๋Š” ์ง‘์ด๋ผ๊ณ  ์ธ์‹์„ ํ•ด๋ฒ„๋ฆฌ๋Š” ๊ฒƒ์ด๋‹ค.

์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด SPA๋Š” ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ **SSR(Server Side Rendering)๋ฐฉ์‹**์„ ์ ‘๋ชฉ์‹œํ‚ค๊ฒŒ ๋œ๋‹ค.

SSR(Server Side Rendering)

  • SSR์€ ์„œ๋ฒ„์—์„œ ์ฒซ ํŽ˜์ด์ง€์˜ ๋ Œ๋”๋ง์„ ํด๋ผ์ด์–ธํŠธ ์ธก์ด ์•„๋‹Œ ์„œ๋ฒ„ ์ธก์—์„œ ์ฒ˜๋ฆฌํ•ด์ฃผ๋Š” ๋ฐฉ์‹.
  • CSR๊ณผ ๋น„๊ตํ•˜๋ฉด,
    • 1) SEO ์ธก๋ฉด์—์„œ ์œ ๋ฆฌ
      • ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค„ ํŽ˜์ด์ง€๋ฅผ ๋ชจ๋‘ ๊ตฌ์„ฑํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ์‹์ด๊ธฐ ๋•Œ๋ฌธ์— CSR์˜ ๋‹จ์ ์ธ "์ฒซ ํŽ˜์ด์ง€ ๊นกํ†ต" ์ƒํƒœ๋ฅผ ๊ทน๋ณตํ•  ์ˆ˜ ์žˆ์Œ.
    • 2) UX ์ธก๋ฉด์—์„œ ์œ ๋ฆฌ
      • CSR์— ๋น„ํ•ด ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์†๋„๋Š” ๋Šฆ์–ด์ง€์ง€๋งŒ, ์ „์ฒด์ ์œผ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ์ฝ˜ํ…์ธ  ๊ตฌ์„ฑ์ด ์™„๋ฃŒ๋˜๋Š” ์‹œ์ ์€ ๋นจ๋ผ์ง„๋‹ค.
    • ์ฃผ์˜) ํŽ˜์ด์ง€๋ฅผ ์ž˜๋ชป ๊ตฌ์„ฑํ•  ๊ฒฝ์šฐ CSR์— ๋น„ํ•ด ์„œ๋ฒ„ ๋ถ€ํ•˜๊ฐ€ ์ปค์ง€๊ฑฐ๋‚˜ / ์ฒซ ๋กœ๋”ฉ์ด ๋งค์šฐ ๋Š๋ ค์งˆ ์ˆ˜ ์žˆ์Œ

3. SSR for MPA, SSR for SPA...?

์ด๊ฒŒ ๋ฌด์Šจ์†Œ๋ฆฌ์•ผ... ๊ทธ๋ž˜์„œ SSR์€ MPA๋ผ๋Š” ๊ฑฐ์•ผ SPA๋ผ๋Š”๊ฑฐ์•ผ...
์ด ์ฏค์—์„œ ๊ณ ๊ฐœ๊ฐ€ ๊ฐธ์šฐ๋šฑ ํ•ด์ง„๋‹ค.

  • "2์„ธ๋Œ€ ์›น์˜ JSP, PHP, Django Template ๊ฐ™์€ ๊ฒƒ๋“ค ์—ญ์‹œ SSR์ด ์•„๋‹ˆ์—ˆ๋‚˜์š”?" โ‡’ ๐Ÿ™†๐Ÿปโ€โ™‚๏ธ โœ…
  • "๊ทธ๋Ÿฌ๋ฉด CSR์˜ ํ•œ๊ณ„๋ฅผ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ์›น์ด 2์„ธ๋Œ€ ๊ธฐ์ˆ ๋กœ ๋Œ์•„๊ฐ€๊ณ  ๋ง์•˜๋‚˜์š”?" โ‡’ ๐Ÿ™…๐Ÿปโ€โ™‚๏ธ ๐Ÿšซ
  • "SPA๋ž‘ CSR์ด๋ž‘ ๊ฐ™์€ ์˜๋ฏธ ์•„๋‹ˆ์—ˆ๋‚˜์š”?" โ‡’๐Ÿ™…๐Ÿปโ€โ™‚๏ธ ๐Ÿšซ

"SPA๋ž‘ CSR์ด๋ž‘ ๊ฐ™์€ ์˜๋ฏธ ์•„๋‹ˆ์—ˆ๋‚˜์š”?"

์ผ๋‹จ ๋Œ€๋‹ต์€ โ€œNoโ€ ์ด๋‹ค.
SPA๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์ฒ˜์Œ์—๋งŒ ํŽ˜์ด์ง€๋ฅผ ๋ฐ›์•„์˜ค๊ณ  ์ดํ›„์—๋Š” ๋™์ ์œผ๋กœ DOM์„ ๊ตฌ์„ฑํ•˜์—ฌ ๋ Œ๋”๋ง ๋˜๋Š” ํ™”๋ฉด์ด ๋ฐ”๋€Œ๊ฒŒ ํ•œ๋‹ค. ๋ฐ”๋กœ ์—ฌ๊ธฐ์„œ โ€œ๋™์ ์œผ๋กœ DOM์„ ๊ตฌ์„ฑํ•˜์—ฌ ๋ Œ๋”๋ง ๋˜๋Š” ํ™”๋ฉด์ด ๋ฐ”๋€Œ๊ฒŒ ํ•œ๋‹ค.โ€ ๋ถ€๋ถ„์ด CSR์ด๋‹ค.
๋” ์‰ฝ๊ฒŒ SPA๋Š” ์ฒ˜์Œ์—๋งŒ ํŽ˜์ด์ง€๋ฅผ ๋ฐ›์•„์˜ค๊ณ  ์ดํ›„์—๋Š” ๋ฐ›์•„์˜ค์ง€ ์•Š๋Š”๋ฐ ์ด๋Ÿผ์—๋„ ๋ฐ์ดํ„ฐ๊ฐ€ ์ˆ˜์ •๋˜๊ณ  ์กฐํšŒ๋˜๊ฒŒ ํ•˜๊ณ  ์‹ถ์–ด์„œ CSR์ด๋ž€ โ€œ๋ฐฉ์‹โ€์„ ์ฑ„ํƒํ•œ ๊ฒƒ์ด๋‹ค.
๋ฐ˜๋Œ€๋กœ MPA๋Š” ๋™์ ์ด์ง€ ์•Š์€ ํŽ˜์ด์ง€๋ฅผ ์ƒํ™ฉ์— ๋งž๊ฒŒ ํด๋ผ์ด์–ธํŠธ์— ๋ฟŒ๋ ค์ฃผ๊ธฐ ๋•Œ๋ฌธ์— SSR "๋ฐฉ์‹"์„ ์ฑ„ํƒํ•œ ๊ฒƒ์ด๋‹ค.

'SPA vs MPA', 'CSR vs SSR' ์ด๋“ค์€ ๊ฐ์ž ๋น„๊ต ๋Œ€์ƒ์ด ์•„๋‹ˆ๋‹ค.

  • SPA์™€ MPA๋Š” ํŽ˜์ด์ง€๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ์“ฐ๋Š”์ง€, ํ•œ ๊ฐœ๋งŒ ์“ฐ๋Š”์ง€์˜ ์ฐจ์ด
  • CSR๊ณผ SSR์€ ๋ Œ๋”๋ง์„ ์„œ๋ฒ„์—์„œ ํ•˜๋Š”์ง€, ์–ด๋””์„œ ํ•˜๋Š”์ง€์˜ ์ฐจ์ด

๊ทธ๋Ÿผ SPA์—๋Š” SSR์„ ํ•˜์ง€ ๋ชปํ•˜๊ณ  MPA์—๋Š” CSR์„ ๋ชป ํ• ๊นŒ?

๋Œ€๋‹ต์€ โ€œYesโ€ ์ด๋‹ค.
๊ตฌํ˜„ํ•˜๋ ค๋Š” ํŽ˜์ด์ง€๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ๋ผ๊ณ  ๊ฐ€์ •ํ–ˆ์„๋•Œ, SPA์™€ MPA์—์„œ๋Š” ๊ฐ๊ฐ SSR๊ณผ CSR์„ ํ•˜์ง€ ๋ชปํ•œ๋‹ค.

  • SSR๋งŒ์œผ๋กœ๋Š” SPA์˜ ๊ตฌํ˜„? ๋ถˆ๊ฐ€โŒ
  • CSR๋งŒ์œผ๋ก  MPA์˜ ๊ตฌํ˜„? ๋ถˆ๊ฐ€โŒ

SPA์—์„œ ๋ฐ์ดํ„ฐ ๋ถ€๋ถ„์„ ์ „๋ถ€ SSR์„ ํ•ด๋ฒ„๋ฆฐ๋‹ค๋ฉด ์‚ฌ์‹ค์ƒ ๊ทธ๊ฑด ๋”๋Š” SPA๊ฐ€ ์•„๋‹ˆ๋ผ MPA๊ฐ€ ๋˜์–ด๋ฒ„๋ฆฐ๋‹ค.
๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๋‹ค.

ํ•˜๋‚˜์˜ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•ด์„œ SSR์„ ํ•˜๋ฉด, ํ•ด๋‹น ๋ถ€๋ถ„๋งˆ๋‹ค ์ƒˆ๋กœ์ด ๊ฐฑ์‹ ๋  ๋•Œ, ์ƒˆ๋กญ๊ฒŒ ๊ฐฑ์‹ ๋œ ๊ฐ’์ด ๋‹ด๊ฒจ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ์„œ๋ฒ„์— ์š”์ฒญํ•˜์—ฌ ๊ฐ€์ ธ์™€์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋‹ค๋งŒ, SPA์—์„œ ์ฒ˜์Œ ๋กœ๋“œํ•˜๋Š” ํŽ˜์ด์ง€๋งŒ SSR์„ ํ•˜๊ณ  ๊ทธ ์ดํ›„๋Š” CSR์„ ํ•˜๋ฉด SPA๊ฐ€ ์—ฌ์ „ํžˆ ์œ ์ง€๊ฐ€ ๋œ๋‹ค.
์ด ๊ฒฝ์šฐ์—๋Š” โ€œSPA์—์„œ SSR์ด ๊ฐ€๋Šฅํ•˜๋‹คโ€ ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

SPA์—์„œ SSR์„ ํ•  ๊ฒฝ์šฐ ์žฅ์ 

SSR์˜ ์žฅ์ ์€ CSR๋ณด๋‹ค SEO๊ฐ€ ๋›ฐ์–ด๋‚˜๋‹ค๋Š” ์ ์ด๋‹ค.
SEO(Search Engine Optimization)๋Š” ๋„ค์ด๋ฒ„, ๋‹ค์Œ, ๊ตฌ๊ธ€๊ณผ ๊ฐ™์€ ๊ฒ€์ƒ‰์—”์ง„์ด ํผ๋ธ”๋ฆฌ์‹ฑํ•œ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ž˜ ์ฝ๋„๋ก ๊ฒ€์ƒ‰์—”์ง„์— ์ตœ์ ํ™”ํ•˜๋Š” ๊ธฐ์ˆ ์ด๋‹ค.
์›น์‚ฌ์ดํŠธ๋ฅผ ์—ด์‹ฌํžˆ ๋งŒ๋“ค์–ด์„œ ๋ฐฐํฌํ–ˆ๋Š”๋ฐ ์ •์ž‘ ๋„ค์ด๋ฒ„์— ์ณค๋”๋‹ˆ ์•ˆ ๋‚˜์˜ค๊ณ , ์นดํ†ก์œผ๋กœ ์นœ๊ตฌํ•œํ…Œ ์ฃผ์†Œ๋ฅผ ๋ณด๋ƒˆ๋Š”๋ฐ ๋ฏธ๋ฆฌ ๋ณด๊ธฐ๋กœ ์•„๋ฌด๊ฒƒ๋„ ์•ˆ ๋œจ๋ฉด ์Šฌํ”„๊ณ  ํšŒ์‚ฌ์ž…์žฅ์—์„œ, ์‚ฌ์—…ํ•˜๋Š” ์ž…์žฅ์—์„œ ์—„์ฒญ๋‚œ ์†์‹ค๋กœ ์ด์–ด์งˆ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

๊ฒฐ๋ก ) SSR๊ณผ CSR์„ ์ ์ ˆํžˆ ํ™œ์šฉํ•˜์ž

์ถœ์ฒ˜)CSR, SSR, SPA, MPA?

profile
์ƒ๊ฐํ•˜๋Š”๋Œ€๋กœ ์‚ด์ง€ ์•Š์œผ๋ฉด, ์‚ฌ๋Š”๋Œ€๋กœ ์ƒ๊ฐํ•˜๊ฒŒ ๋œ๋‹ค.

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

comment-user-thumbnail
2021๋…„ 1์›” 28์ผ

์˜ค์ด~~ ์„ธ์›๋‹˜ ์ •๋ฆฌ ๋„ˆ๋ฌด ์ž˜ํ•˜์…จ๋„ค์š”! ๋ถ๋งˆํฌํ•ด๋‘๊ณ  ํ—ท๊ฐˆ๋ฆด๋•Œ๋งˆ๋‹ค ๋ณด๋Ÿฌ ์˜ค๊ฒ ์Šต๋‹ˆ๋‹ค >_<

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ