MPA 와 SPA 간단 정리 및 견해

첫 글로 간단하게 MPA(Multi Page Application) 과 SPA(Single Page Application)에 대해 정리 하려고 합니다.

(제가 알고 있고 느끼는 선에서 작성하므로 글의 깊이가 얕을 수 있습니다.)

MPA

※  정의 및 특징

여러개의 페이지로 구성된 어플리케이션을 의미하며 대표적으로 JSP가 MPA에 속합니다.

jsp를 사용해 보신 분들은 잘 아시겠지만 매 요청마다 리소스를 새로 다운로드 받고 페이지를 새로

렌더링 하기 때문에 깜빡거리는 특징을 가지고 있습니다.

 

※  장점

• 각각의 페이지가 URL을 가지고 있어 검색 엔진 최적화가 용이하다.
• 페이지를 서버에서 로드하므로, 초기 로딩 시간이 빠르다.

※  단점

• 각 페이지를 서버에서 로드하므로 전환 속도가 느리다.
• 페이지를 이동할 때마다 리소스를 다운 받는다.
• 서버의 부하가 높아질 수 있다.

※  주관적인 견해

Jsp를 사용하며 느낀 MPA의 특징 중 가장 눈에 띄는 것은 매 요청마다 화면이 깜빡인다는 것이였습니다.
물론 비동기 처리를 통해 페이지의 일정 부분만 렌더링 처리를 할 수는 있지만 개발함에 있어 번거로움이
있습니다. 그리고 많은 클라이언트들이 매 요청마다 화면이 깜빡 버리는 것을 기피하는데 굳이 jsp에 비동기 처리 방식으로 하는것보다 SPA를 사용하는 것이 나은 방안이라고 생각이 됩니다.
이러한 이유등으로 jsp보다 React , vue.js 등의 SPA 프레임워크들의 수요가 오르지 않나 싶습니다.

---

SPA

※  정의 및 특징

하나의 페이지로 구성된 application으로 대표적으로 React, Vue.js 등이 있습니다.

좀 더 자세히 말씀드리자면 React에서는 최초 하나의 HTML 페이지를 가지고 있으며 해당 HTML 안에서 다른 페이지들(컴퍼넌트)들을 가져와 페이지의 내용을 바꿔주며 보여주는 특징을 가지고 있습니다.

 

그러면 여기서 MPA 프레임워크들만 다뤄본 분이시라면  HTML이 하나인데 어떻게 각각의 요청에 대해서 그에 맞는 화면을 보여줄까? 라는 생각이 드실겁니다.
그에 대해 말씀을 드리자면 라우터라는 기능을 제공하여 특정 URL에 대한 요청을 가로챈 뒤 URL에 대해 매핑 되어 있는 페이지(컴퍼넌트)를 HTML에 렌더링 하는 방식을 사용합니다.  

 

※  장점

• 서버에서 페이지를 로드하지 않기 때문에 서버에 대한 부하가 감소한다.
• 매 요청마다 리소스를 다운받지 않고, 전체 페이지가 로드 되지 않아 매끄러운 화면 동작을 제공한다.
• Front와 Back의 분리는 나누는 설계 추세에 적합한 기술이다.
• 해당 프레임워크 내에서 사용할 수 있는 다양한 상태 저장 도구들을 제공한다. 

※  단점

• 구형 브라우저에서는 지원되지 않는다.
• 최초 로딩 시 필요한 파일을 모두 다운로드 해야해서 시간이 오래 걸릴 수 있다.

※  주관적인 견해

지금까지 SPA 프레임워크는 UI5, React 두 가지를 사용하며 느낌점을 말씀드리자면 
사용자 입장에서는 JSP에 비해 속도가 매우 빠르고 부드럽게 느껴졌습니다.
개발자 입장에서 느낀점은 jsp와 달리 라우팅을 잡아 주어야 하고 서버에서 처리해주던 많은 부분들을
Front에서 해야하기 때문에 요구 되는 지식과, 기술이 더 어려워졌다는 생각이 들었습니다.

그럼 이만~