0. 요약
- MPA는 서버 중심의 전통적인 웹 방식으로 요청마다 새로운 페이지를 로드한다.
- SPA는 클라이언트 중심으로 한 번 로드된 페이지를 기반으로 데이터를 갱신한다.
- 각각의 장단점에 따라 적절한 프로젝트에 활용할 수 있다.
1. MPA
- Multi Page Application
- 사용자가 요청한 데이터를 템플릿과 결합하여 출력
- 새로운 요청이 생길 때 마다 새 페이지를 반환
✔️ 결과물은 데이터가 결합되어 있는 HTML, JavaScript, CSS로 구성 - MPA의 요청 처리 과정 (컨트롤러 → 서비스 → 템플릿(뷰))
1-1. 컨트롤러
- 사용자의 요청을 처리할 프로세스 결정
- 방식(method)과 패턴을 통해 매핑한 후 서비스에 비즈니스 로직을 분리하여 구현
- 컨트롤러의 주요 기능
- 사용자의 요청을 내부 메서드와 매칭
- 서비스 호출
- 서비스에서 전송된 데이터를 뷰를 통해 템플릿과 결합하여 응답
1-2. 서비스
- 데이터(비지니스 로직) 처리
- 데이터베이스와 연동
- 결과물(데이터)을 컨트롤러에 전송
1-3. 템플릿(뷰)
- 서비스가 리턴한 데이터를 결합하여 결과물을 생성
- 해당 데이터는 순수 HTML로 구성
➕ JavaScript: HTML에서 동적인 요소 결정
➕ CSS: 데이터를 시각적으로 어떻게 표현할지 결정
2. SPA
- Single Page Application
- UI에 대한 처리와 데이터에 대한 처리가 분리되어있다.
✔️ 사용자에게 보여줄 모든 페이지의 구성들은 미리 내려온다.
✔️ 페이지에서 보여줄 데이터는 별도로 처리된다. - 데이터에 대한 처리는 MPA 방식과 동일하지만 템플릿을 거치지 않고 데이터 그대로 전송한다.
- 데이터는 클라이언트 화면에서 JavaScript를 통해 출력이 구성된다.
- SPA의 데이터 요청과 클라이언트 렌더링 과정
2-1. SPA에서의 데이터 처리 기술
- AJAX: 페이지를 새로고침하지 않고 데이터를 비동기적으로 주고받는 통신방식
- JSON: JavaScript 객체 표현 방식으로 데이터를 구조화해 주고받는 형식
- REST API: 백엔드 서버와 클라이언트 간 데이터를 주고받기 위한 규칙
- SPA 프레임워크
- React, Vue.js, Angular 등
- SPA를 쉽게 구현할 수 있도록 도와주는 라이브러니
- 어떤 화면들로 구성되며, 그 화면에 데이터를 요청하고, 가져온 데이터를 어떻게 렌더링할 것인지 정의하고 구현한 것을 제공해준다.
3. 결론
- MPA와 SPA는 서로 다른 특성과 장단점을 지니고 있다.
- MPA는 SEO(Search Engine Optimization, 검색 엔진 최적화)가 중요하거나 서버 중심의 데이터 처리가 필요한 전통적인 웹 애플리케이션에 적합하다.
- SPA는 사용자와의 상호작용이 많고 빠르고 동적인 UI/UX를 제공해야 하는 경우에 효과적이다.
