SPA(Single Page Application)란?

 Vue.js를 이용한 Single Page Application 즉, SPA 구조로 된 프로젝트를 회사의 서비스앱에서 처음 접하게 되었다. 

SPA 구조와 기존 Web구조

SPA(Single Page Application)란?  

 단일 페이지로 구현한 사이트(애플리케이션)이다. 이와 반대 개념은 MPA(Multi Page Application)이고 MPA는 여러 페이지로 구성된 즉, 우리가 보통 흔히 보는 사이트들을 예로 들 수 있다.   

 SPA는 하나의 페이지에서 계속 팝업을 띄운다고 생각하면 된다 (사실 팝업은 아니고 처음 화면인 HTML을 DOM으로 랜더링(바꿈)을 해주는 것이지만).

 반면 MPA는 로그인 페이지를 누르면 로그인html로 이동한다고 생각하면 된다.

SPA의 장점

• 빠른 반응성, 화면 전환(사용자 친화적)
• 서버 요청이 적음
• 개발이 간단하고 능률적(페이지를 렌더링하기 위한 서버 불필요)
• 웹과 모바일 앱의 동일한 백엔드 코드 재사용
• 효율적 캐시 관리
• 프론트, 백엔드 개발업무 분업화 용이

 

SPA의 단점

• 초기 구동 속도가 느리다(최초 모든 정적 리소스를 받아야함)
• 웹크롤러가 데이터 수집 불가
• XSS 공격 보안
• IE8 이하 관련 지원 x
• 자바스크립트의 메모리 누수

 

극복 방안  

 초기에 모두 받지 않고, 리소스를 묶어 요청이 있을때만 다운로드 받도록 구현(비동기 모듈, Lazy Loading)한다. 또한, React와 같은 서버렌더링을 받고 클라이언트에서 수행되는 핵심 로직을 최소화한다.  

 

언제 SPA를 사용할까?  

 MPA는 서버의 리스폰스에 의존해야하므로 트래픽이 높고, 바뀔때마다 화면이 깜빡거리는 특징이 있으므로 각 장단점에 맞춘 __SPA / MPA__ 선택이 필요하다.

 

오늘 성장에 도움을 주신 개발자분  

참고문헌 : https://junsday.tistory.com/40

오늘도 감사합니다.