Search
πŸ—Ό

SPA

SPAλ₯Ό μ•Œμ•„μ•Ό ν•˜λŠ” 이유

SPAκ°€ λ“±μž₯ν•œ μ΄μœ κ°€ κΆκΈˆν•˜λ‹€λ©΄

이 λ¬Έμ„œλ₯Ό 보고 λ‚˜λ©΄

SSRκ³Ό CSR λ Œλ”λ§ 방식에 λŒ€ν•΄ 이해할 수 μžˆλ‹€.

SPA

SPAλŠ” Single Page Application(μ‹±κΈ€ νŽ˜μ΄μ§€ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜)의 μ•½μžμž…λ‹ˆλ‹€. 말 κ·ΈλŒ€λ‘œ, νŽ˜μ΄μ§€κ°€ 1개인 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄λž€ λœ»μž…λ‹ˆλ‹€. 전톡적인 μ›Ήμ˜ κ΅¬μ‘°λŠ”, μ—¬λŸ¬ νŽ˜μ΄μ§€λ‘œ κ΅¬μ„±λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. μœ μ €κ°€ μš”μ²­ν•  λ•Œ λ§ˆλ‹€ νŽ˜μ΄μ§€κ°€ μƒˆλ‘œκ³ μΉ¨λ˜λ©°, νŽ˜μ΄μ§€λ₯Ό λ‘œλ”© ν•  λ•Œ λ§ˆλ‹€ μ„œλ²„λ‘œλΆ€ν„° λ¦¬μ†ŒμŠ€λ₯Ό 전달받아 해석 ν›„ λ Œλ”λ§μ„ ν•©λ‹ˆλ‹€. HTML 파일, ν˜Ήμ€ ν…œν”Œλ¦Ώ 엔진 등을 μ‚¬μš©ν•΄μ„œ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λ·°κ°€ μ–΄λ–»κ²Œ λ³΄μ—¬μ§ˆμ§€λ„ μ„œλ²„μ—μ„œ λ‹΄λ‹Ήν–ˆμ£ .
ν•˜μ§€λ§Œ 점차 μ›Ήμ—μ„œ μ œκ³΅λ˜λŠ” 정보가 정말 λ§Žμ•„μ§€λ©΄μ„œ 전톡적인 방식은 속도적인 μΈ‘λ©΄μ—μ„œ λ¬Έμ œκ°€ μžˆμ—ˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό ν•΄μ†Œν•˜κΈ° μœ„ν•˜μ—¬ 캐싱과 압좕을 ν•˜μ—¬ μ‚¬μš©μž κ²½ν—˜μ„ κ°œμ„ μ‹œν‚€κΈ°λ„ ν–ˆλŠ”λ°μš”. ν•˜μ§€λ§Œ μ΄λŠ” μ‚¬μš©μžμ™€ μΈν„°λž™μ…˜μ΄ λ§Žμ€ λͺ¨λ˜ μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μΆ©λΆ„ν•˜μ§€ μ•Šμ€ κ²½μš°κ°€ λ§Žμ•˜μŠ΅λ‹ˆλ‹€. λ˜ν•œ μ„œλ²„μ—μ„œ λ³΅μž‘ν•œ μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ Œλ”λ§ν•˜κ³  ν΄λΌμ΄μ–ΈνŠΈμ— μ „λ‹¬ν•΄μ£ΌλŠ” 방식은 κ·Έ 만큼 λ Œλ”λ§μ„ μœ„ν•œ μ„œλ²„ μžμ›μ΄ μ‚¬μš©λ˜λŠ”κ²ƒμ΄κ³ , λΆˆν•„μš”ν•œ νŠΈλž˜ν”½μ„ μ‚¬μš©ν•΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€.
κ·Έλž˜μ„œ React와같은 라이브러리 ν˜Ήμ€ ν”„λ ˆμž„μ›Œν¬λ“€μ€ λ·° λ Œλ”λ§μ„ μœ μ €μ˜ λΈŒλΌμš°μ €κ°€ λ‹΄λ‹Ήν•˜λ„λ‘ ν•˜κ³ , μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λΈŒλΌμš°μ €μ— λ‘œλ“œν•œ λ‹€μŒμ— 정말 ν•„μš”ν•œ λ°μ΄ν„°λ§Œ 전달받아 λ³΄μ—¬μ£ΌλŠ” 방식을 κ³ λ―Όν–ˆμŠ΅λ‹ˆλ‹€.
μ΄λŸ¬ν•œ λ Œλ”λ§μ˜ 방식은 SSRκ³Ό CSRμ΄λΌλŠ” νŽ˜μ΄μ§€ λ Œλ”λ§ 방식에 λŒ€ν•΄ μ‚΄νŽ΄λ³΄λ©΄μ„œ 이해할 수 μžˆμŠ΅λ‹ˆλ‹€.

SSR

SSR은 μ„œλ²„μ—μ„œ μ‚¬μš©μžμ—κ²Œ 보여쀄 νŽ˜μ΄μ§€λ₯Ό λͺ¨λ‘ κ΅¬μ„±ν•˜μ—¬ λ³΄μ—¬μ£ΌλŠ” λ°©μ‹μž…λ‹ˆλ‹€. SSR을 μ‚¬μš©ν•˜λ©΄ λͺ¨λ“  데이터가 λ§€ν•‘λœ νŽ˜μ΄μ§€λ₯Ό ν΄λΌμ΄μ–ΈνŠΈ(λΈŒλΌμš°μ €)μ—κ²Œ λΉ λ₯΄κ²Œ 보여쀄 수 μžˆμŠ΅λ‹ˆλ‹€. 그리고 SEO(search engine optimization) λ˜ν•œ μ‰½κ²Œ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 맀번 νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•  λ•Œλ§ˆλ‹€ μƒˆλ‘œκ³ μΉ¨ λ˜λ―€λ‘œ μ‚¬μš©μž UX에 쒋지 μ•Šλ‹€λŠ” 단점이 μžˆμŠ΅λ‹ˆλ‹€.

CSR

반면 CSR은 μ΅œμ΄ˆμ— 1번 μ„œλ²„μ—μ„œ 전체 νŽ˜μ΄μ§€λ₯Ό λ‘œλ”©ν•˜μ—¬ λ³΄μ—¬μ€λ‹ˆλ‹€. μ΄ν›„μ—λŠ” μ‚¬μš©μžμ˜ μš”μ²­μ΄ 올 λ•Œλ§ˆλ‹€, λ¦¬μ†ŒμŠ€λ₯Ό μ„œλ²„μ—μ„œ μ œκ³΅ν•œ ν›„ ν΄λΌμ΄μ–ΈνŠΈκ°€ ν•΄μ„ν•˜κ³  λ Œλ”λ§μ„ ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€. SPAλŠ” νŠΈλž˜ν”½μ„ κ°μ†Œμ‹œν‚€κ³  더 λ‚˜μ€ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν–ˆμŠ΅λ‹ˆλ‹€. μ„œλ²„λŠ” μš”μ²­ν•œ API에 λŒ€ν•΄ JSON data둜 μ‘λ‹΅ν•˜κ³ , html을 κ·Έλ¦¬λŠ” 역할은 ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ μˆ˜ν–‰ν•©λ‹ˆλ‹€. 더 λ‚˜μ€ 문제 ν•΄κ²°μ±…μœΌλ‘œ λ‚˜μ˜¨ CSR 방식도 단점은 μžˆλŠ”λ°μš”. μš°μ„  μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‹€ν–‰ν•˜μ§€ μ•ŠλŠ” 일반 ν¬λ‘€λŸ¬μ—μ„  νŽ˜μ΄μ§€μ˜ 정보λ₯Ό μ œλŒ€λ‘œ 받아가지 λͺ»ν•œλ‹€λŠ” 점 μž…λ‹ˆλ‹€. λ•Œλ¬Έμ—, ꡬ글, 넀이버, λ‹€μŒ λ“± κ²€μƒ‰μ—”μ§„μ—μ„œ νŽ˜μ΄μ§€κ°€ κ²€μƒ‰κ²°κ³Όμ—μ„œ 잘 λ‚˜νƒ€λ‚˜μ§€ μ•Šμ„μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. μΆ”κ°€μ μœΌλ‘œ, μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ μ‹€ν–‰λ λ•ŒκΉŒμ§€ νŽ˜μ΄μ§€κ°€ λΉ„μ–΄μžˆκΈ° λ•Œλ¬Έμ—, μžλ°”μŠ€ν¬λ¦½νŠΈ 파일이 아직 μΊμ‹±λ˜μ§€ μ•Šμ€ μ‚¬μš©μžλŠ” μ•„μ£Ό 짧은 μ‹œκ°„λ™μ•ˆ 흰 νŽ˜μ΄μ§€κ°€ λ‚˜νƒ€λ‚  수 μžˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ μœ μ €κ°€ μ‹€μ œλ‘œ λ°©λ¬Έν•˜μ§€ μ•Šμ„ μˆ˜λ„ μžˆλŠ” νŽ˜μ΄μ§€μ— κ΄€λ ¨λœ λ Œλ”λ§ κ΄€λ ¨ μŠ€ν¬λ¦½νŠΈλ„ 뢈러였기 λ•Œλ¬Έμ—, ν•„μš”ν•œ νŽ˜μ΄μ§€λ³΄λ‹€ 더 무거운 μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ„ 읽어야할 수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ΄λŸ¬ν•œ 단점듀을 ν•΄κ²°ν•  수 μžˆλŠ” 방법듀도 μ‘΄μž¬ν•©λ‹ˆλ‹€. ν•΄λ‹Ή 뢀뢄에 ν•΄λ‹Ήν•˜λŠ” μ„Έμ„Έν•œ 뢀뢄은 레벨2μ—μ„œ μ§‘μ€‘μ μœΌλ‘œ λ‹€λ£¨κ²Œ λ ν…Œλ‹ˆ 이번 λ―Έμ…˜μ—μ„œλŠ” SPAμ—μ„œ μ‚¬μš©ν•˜λŠ” CSR 방식과 전톡적인 SSR방식에 λŒ€ν•΄μ„œλ§Œ 이해해주셔도 μ’‹μŠ΅λ‹ˆλ‹€!

정리

β€’
SSR방식은 μ„œλ²„μ—μ„œ μ‚¬μš©μžμ—κ²Œ 보여쀄 νŽ˜μ΄μ§€λ₯Ό λͺ¨λ‘ κ΅¬μ„±ν•˜μ—¬ μ‚¬μš©μžμ—κ²Œ νŽ˜μ΄μ§€λ₯Ό λ³΄μ—¬μ£ΌλŠ” 방식이닀.
β€’
SSR방식은 맀번 νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•  λ•Œλ§ˆλ‹€ μƒˆλ‘œκ³ μΉ¨ λ˜λ―€λ‘œ 인터렉셔닝 λ§Žμ€ μ„œλΉ„μŠ€μ˜ κ²½μš°μ—λŠ” μ μ ˆν•˜μ§€ μ•Šλ‹€.
β€’
CSR방식은 μ„œλ²„λ‘œλΆ€ν„° 전체 νŽ˜μ΄μ§€λ₯Ό κ΅¬μ„±ν•˜λŠ” 슀크립트λ₯Ό λ‹€μš΄λ°›κ³ , μ΄ν›„μ—λŠ” ν•„μš”ν•œ 데이터λ₯Ό μš”μ²­ν•˜λŠ” API둜 νŽ˜μ΄μ§€λ₯Ό κ΅¬μ„±ν•œλ‹€.
β€’
CSR방식은 μ΅œμ΄ˆμ— μ„œλ²„λ‘œλΆ€ν„° νŽ˜μ΄μ§€λ₯Ό κ΅¬μ„±ν•˜λŠ” ν”„λ ˆμž„λ§Œ λ°›μ•„μ˜€κΈ° λ•Œλ¬Έμ— 검색엔진 μ΅œμ ν™”λ₯Ό μœ„ν•΄μ„œλŠ” λ‹€λ₯Έ μ „λž΅μ΄ ν•„μš”ν•˜λ‹€.

참고 링크

Made with