- 사람들이 웹앱을 즐겨 사용하는 이유는 모바일 앱처럼 따로 다운받아 사용 할 필요가 없기 때문임
-> 인터넷을 사용할 수 있는 장비라면 어디서든 웹앱을 사용 가능하다는 편리성도 한 몫을 함
-> 따라서 웹앱을 만들기 위해 SPA 패턴을 사용할 것인지 MPA 패턴을 사용할 것인지 결정을 해야함
-> 선택기준은 여러가지가 있지만 컨텐츠 중심으로 선택하는 법이 있음
(컨텐츠는 사용자들이 그 어플을 사용할지 안할지를 결정 짓는 중요한 기준)- SPA와 MPA중 어느것이 더 우세하다고 할 수 없음
SPA
- 단일 페이지 어플리케이션(브라우저 상에서 돌아가는 Application)
-> 여기서 하나의 페이지라는 것은 HTML를 뜻함. 둘 이상의 HTML 페이지를 가진 MPA와 다르게, 단 하나의 HTML로 웹페이지를 구동하기에 매 요청마다 새로운 HTML 페이지를 load 시킬 필요가 없음
-> 서버에서 페이지들을 그리는 작업들이 프론트단에서 이루어짐
-> 따라서 서버쪽 렌더 페이지의 코드를 작성할 필요가 없음- 이미 우리는 알게모르게 SPA를 사용해왔음
- 대표적인 SPA는 Slack, Facebook, Twitter, 구글의 Gmail, Google Maps, Google adsense, 그리고 Google Drive 등이 있음
- 장점
- 반응형 다자인으로 인해 모바일 앱이나 데스크탑 앱을 사용하는 느낌을 줌
-> 페이지에서 무언가를 클릭 했을시 기다림 없이 즉각적인 반응이 일어남(새 페이지들을 지속적으로 로딩시킬 필요가 없기 때문)- 백앤드와 확실히 구분됨
-> 서버사이드 코드를 작성할 필요가 없음(프론트엔더 만으로도 웹사이트 완성할 수 있음)- 디버깅하기가 쉬움
- 로컬 저장소의 활용성이 우수해짐
-> 앱이 한가지의 요청만 보내고 모든데이터를 저장하는데 이는 오프라인에서조차 해당 페이지를 사용 가능하게 만들어줌
-> 와이파이가 안좋은 곳에서 인터넷이 중간중간 끊기더라도 문제 없이 돌아감
- 단점
- MPA보단 SEO 에 대한 노출이 어려움
-> 비동기로 렌더링 되는 페이지로 인해 구글봇과 같은 크롤러가 웹페이지의 내용을 크롤링하기가 어려워짐
MPA
- 다중 페이지 어플리케이션
-> SPA에 비해 더 클래식한 구조를 갖고 있음 (HTML 페이지가 여러개)
각 페이지는 서버에 요청을 보낸후 페이지의 모든 데이터를 업데이트 시킴
-> 따라서 속도와 성능면에서 영향을 미침
-> 이점을 해결하기 위해 많은 개발자들은 JS와 JQuery를 사용하여 속도를 향상시키고 적재되는 정보를 줄이고자 노력함
- 장점
- 모든 페이지마다 메타 태그를 붙임으로써 SEO를 관리하기에 용이함
- 오랜기간동안 사용된 방식이라 초보자들이 제작하기에 좋은 환경을 갖고 있음
-> SPA 보다 오랜 역사로 인해 튜토리얼, 해결법, 프레임워크등 다양한 자료들을 얻을 수 있음
- 단점
- 요청이 들어올 때마다 페이지를 새로 패치해야하므로 페이지 로딩 시간이 발생함
-> 그로인해 속도가 느려짐
-> 모든 페이지가 로드 될 때 까지 기다려야하기에 유저 친화적이지가 않음- 프론트와 백앤드가 확연히 분리되지 않고 서로 엮여 있음
-> 서버쪽 언어와 클라이언트쪽 언어가 모두 필요함
SPA & MPA Site Example
- SPA를 사용한 사이트
React
- MPA를 사용한 사이트
NYtimes
developer(Frontend)