[WEB] SPA(Single Page Application)이란?

 

SPA의 중심에는 대표적인 라이브러리/프론트프레임워크 React, Vue/Angular가 있다. 

 

---

 

📑 SPA란?

 

Single Page Application의 약자로 단일 페이지 어플리케이션이다. 

 

기존의 웹 서비스는 요청시마다 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다. SPA 형태는 브라우저에 최초에 한 번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터 바인딩하는 방식이다. 

 

아래 ajax 동작 방식을 참고하자.

 

https://wonisdaily.tistory.com/70

[Ajax란? ] 제이쿼리와 $.ajax() , $.get(), $.post() 메서드

 

 

전통 페이지 vs 단일 페이지

 

 

css, js 리소스 등을 cdn 형태로 캐싱 및 압축하고, view에서 템플릿엔진 들을 사용하고, 초기의 SPA 개념인 Backbone.js, Angular.js 라이브러리들이 나왔고, 지금은 템플릿 개념을 지나 컴포넌트 개념인 뷰, 리액트, 앵귤러2 등 다양한 라이브러리와 프레임워크가 등장했고 아직도 js는 발전해나가고 있다. 

 

 

 

 

📑 컴포넌트란?

 

개념을 먼저 잡고 가자면 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 

 

 

 

위의 그림에서 확인할 수 있듯이 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 

 

SPA 구현을 쉽게 말하면 jsp 파일 없이 index.html 파일 하나에 js, css 등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다. 

 

 

 

 

참고 : https://linked2ev.github.io/devlog/2018/08/01/WEB-What-is-SPA/ , https://hanamon.kr/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-component%EB%9E%80/