JavaScript
SPA이란? - SPA, MPA 비교, 장단점
LAZY SIA
2021. 11. 13. 00:46
728x90
반응형
MPA(Multiple Page Application)
✔️ MPA의 개념
- 여러 개의 페이지로 이루어진 애플리케이션
- 정적 정보가 포함된 여러 페이지와 다른 페이지에 대한 많은 링크로 구성된 전통적인 웹 애플리케이션
- 전체 페이지를 다시 로드하고 사용자가 웹 앱과 상호 작용할 때 새 페이지를 표시한다.
- 주로 Amazon, eBay 및 기타 전자 상거래 사이트와 같은 대규모 웹 사이트를 위해 설계되었다.
- SSR(Server Side Rendering) 방식으로 렌더링한다.
*SSR : 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 (지난 포스팅 참고) - GET, POST? (REST API - HTTP method)
- GET : 정보를 가져올 때 사용 (어떤 값이나 내용, 상태 등을 바꾸지 않는 경우) ex) 게시판 글의 내용 보기
- POST : 서버 상의 데이터 값이나 상태 등을 변경하기 위해 사용 ex) 게시판 글 내용 저장, 수정하기
✔️ MPA의 작동 방법
- HTML 및 CSS를 사용하여 웹 페이지를 만든다.
- 앱이 서버를 요청할 때마다 서버는 웹 페이지를 다시 로드해야 하는 새 HTML 페이지를 렌더링한다.
👍 MPA의 장점
- SEO 최적화
- 무제한 확장성
- 비용 효율적
- 보안
- 유지보수성 향상
👎 MPA의 단점
- 로딩 시간 증가
- 모바일 앱 개발 어려움
- 테스트 프로세스 힘듦
- 개발 시간이 많이 듦
- 유지 관리 및 업데이트가 어려움
사실상, MPA이란 개념은 SPA의 등장으로 SPA 개념을 설명하기 위해 탄생하였다고 할 수 있다.
SPA(Single Page Application)
✔️ SPA의 개념
- 한 개의 페이지로 이루어진 애플리케이션
- 페이지를 다시 로드하거나 추가 대기 시간이 필요하지 않은 동안 브라우저에서 작동한다.
- DOM과 데이터에 독립적으로 요청한 다음 브라우저에서 직접 페이지를 렌더링한다.
- 콘텐츠가 자동으로 다운로드되므로 페이지를 업데이트할 필요가 없다.
- 대부분의 SNS(Facebook, Instagram, ...), Google 등은 SPA 적용
✔️ SPA의 작동 방법
- HTML5 및 Ajax를 사용하여 웹 페이지를 만든다.
(지속적인 페이지뿐만 아니라 부드러운 반응형 웹 페이지가 자체적으로 다시 로드) - SPA는 JavaScript를 사용하여 클라이언트 측에서 최대 처리 수를 수행한다.
페이지가 HTML 및 JavaScript 코드로 완전히 로드되면 모든 후속 업데이트는 AJAX 호출을 통해 수행된다.
그런 다음 서버에서 API 호출 JSON을 사용하여 데이터를 로드한다.
그런 다음 이 데이터는 다시 로드하지 않고 웹 페이지에서 업데이트되어 SPA에서 최고의 사용자 경험(UX)을 제공한다
👍 SPA의 장점
- 효율성 증대
- 더 쉬운 디버깅
- 빠른 반응성
- 모바일 친화성
- 눈길을 끄는 효과
👎 SPA의 단점
- SEO 떨어짐
- 브라우저 방문 기록 제공하지 않음
- 보안 약함
- 개발 비용
- JavaScript 의존성
[도움주신 사이트]
반응형