👀 SPA, SPA 하는데 그게 뭐지?
다른 누군가처럼 나도 SPA라고는 패션밖에 몰랐지.
내 최애는 COS랑 앤아더스토리스,,, ZARA, h&m ㅎ ...
아무튼, 검색을 해 보긴 했다. (사실 skimming..정도 reading하진 않았다 ㅎ)
SPA는 Single Page Application.
싱글 페이지라고 하니까 대~충 페이지 하나로 뭐 하는 건가보다하고 지나갔더랬지...
그래서, SPA가 뭐야?
싱글 페이지 애플리케이션(single-page application, SPA, 스파)
서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
위키피디아 참고
이전 방식(Traditional)과 싱글 페이지(SPA)방식의 차이점
(https://www.excellentwebworld.com/what-is-a-single-page-application/)
오잉, 나도 모르게 SPA를 쓰고 있었다.
- 내 포트폴리오를 만들 때,
fetch를 이용해 정적인 요소만 불러와 페이지 새로고침이 없도록 만들었다. - JSP로 프로젝트를 만들 때, 반복되는 sidebar를
jsp:include로 페이지마다 불러왔다. - 이메일 인증 혹은 아이디/비밀번호 찾기 기능을 구현할 때,
ajax를 사용해 필요한 데이터를json으로 받아와 화면에 출력하도록 만들었다.
HTML,CSS,javaScript로 하나의 메인 템플릿을 만들고, 그 안에서 교체되는 내용만 변경하도록 통신하는 시스템
=> 그게 SPA, Single Page Application 이다.
https://gearheart.io/articles/pros-and-cons-building-single-page-applications-2019/
-
SPA
메인 템플릿 html과 모든 소스를 처음에 로드하고, 하나의 템플릿 안에서 필요한 데이터만 reload.
새로고침 X. -
기존 방식
필요한 페이지를 모두 개별 html로 만들고, 링크를 클릭할 때마다 전체 html을 reload.
새로고침 O.
Pros & Cons
Pros 장점
-
전체 실행 프로세스가 빠르다
모든 정적 리소스를 초기에 한번만 다운로드하면 되기 때문 -
전체적인 트래픽 감소 / 상대적으로 서버요청 ↓
초기 로드 이후, 새로운 페이지 로드 시 갱신할 데이터만 받아오기 때문 -
사용자 친화적인 UI
반응이 빨라 화면 출력이 용이하기 때문 -
업무 분업화 및 협업 효율 상승
프론트/백이 분리되기 때문
굳이 서버를 시작하지 않아도 html, css, js로만 개발이 가능 -
chrome 디버깅이 용이
크롬으로 네트워크 동작을 모니터링할 수 있기 때문
위의 장점과도 연계될 수 있겠다
Cons 단점
-
초기 구동 속도가 다소 느림
처음에 모든 리소스를 모두 받아와야 하기 때문 -
검색엔진최적화(SEO)가 어려움
모든 데이터가 표기되어 있지 않고 필요에 따라 받아오기 때문
몇 가지 단점에도 불구하고 이를 상쇄하는 많은 장점이 있기 때문에 많은 기업들이 SPA를 추구하고 있다. SPA를 용이하게 하기 위한 프레임워크들도 많이 탄생했다. 가장 대표적인 예로 React, Vue.js, Angular.js 등이 있다.
이 프레임워크를 활용한 애플리케이션의 예로는, 우리가 많이 사용하고 있는 Gmail, Google Maps, Facebook, GitHub 등이 있다.
참조
