SPA 뜻과 개념에 대해서 알아봅시다.
SPA 뜻과 개념에 대해 알기
SPA 뜻(Single Page Application)은 1개의 페이지 만을 사용하는 애플리케이션을 의미합니다.
SPA(Single Page Application)는 단일 웹페이지에서 콘텐츠를 전환하는 구조입니다. 웹 브라우저에서 웹사이트의 링크를 클릭하였을 때 서버로부터 새로운 페이지를 가져오는 것이 아니라 하나의 페이지에서 내용을 동적으로 변경하는 사용자의 웹(Web)과 앱(App)입니다.
SPA는 하나의 웹페이지에서 애플리케이션이 구성되어 있으며 페이지의 일부만 갱신하면 되기 때문에 서버와의 통신량을 최소한으로 할 수 있게 됩니다. 사용자들도 페이지를 전환할 때 페이지를 새로 불러들이는데 소요되는 시간이 줄어들기 때문에 더 빠른 속도로 웹사이트를 이용할 수 있게 됩니다.
SPA 뜻과 개념에 대한 설명
SPA 뜻(Single Page Application)은 하나의 웹 페이지에서 애플리케이션이 구성되어 있는 구조를 의미합니다. 웹사이트의 웹 페이지에서 사용자가 링크를 클릭하였을 때 서버로부터 새로운 페이지를 가져오는 것이 아니라 단일 웹페이지 안에서 콘텐츠를 전환하여 새로운 페이지의 내용을 표시하는 구조입니다.
전통적인 웹사이트 구조의 경우, 사용자가 링크를 통해 새로운 웹 페이지로 이동할 때는 완전히 새로운 페이지를 서버로부터 전송 받아 사용자의 웹 브라우저에 표시하는 구조입니다. 이러한 구조의 경우 만약 웹사이트의 페이지 한 개가 전달 받는 데이터의 용량이 매우 적을 경우에는 큰 문제가 되지 않습니다.
하지만 웹사이트가 점점 더 고도화되고 발전하면서 웹사이트를 구성하는 각각의 웹페이지들 마다 가지고 있는 데이터의 용량이 커지면서 한 개의 웹페이지의 데이터의 용량이 커질 경우 페이지를 불러오는데 속도가 느려질 수 있는 이슈가 생기게 되었습니다. 이러한 문제를 해결하기 위한 대안으로 웹사이트를 단일 페이지로 만드는 SPA(Single Page Application) 구조를 채택할 수 있는 것입니다.
여러 개의 웹페이지로 구성된 전통적인 웹사이트의 구조는 MPA(Multi Page Application)이라고 합니다.
MPA(Multi Page Application)은 웹사이트 내 다른 페이지로 이동할 때 페이지의 URL주소도 변경되고 서버로 들어가는 요청에 대한 응답으로 HTML 파일을 전달 받아 완전히 새로운 페이지를 사용자의 웹 브라우저에 표시해주는 구조를 의미합니다.
[SPA와 MPA 비교]
| 구분 | 내용 |
| SPA | 웹사이트를 단일 페이지로 만드는 구조 |
| MPA | 웹사이트 내 다른 페이지로 이동할 때 페이지의 URL주소도 변경되는 구조 |
SPA(Single Page Application)를 구현하는 방식 중 가장 대표적인 방식은 Ajax를 통한 콘텐츠 로드 방식입니다. 에이잭스(Ajax)는 자바스크립트(JavaScript)와 XML를 사용하여 서버와 비동기화로 통신하고 그 결과에 따라 웹페이지의 내용을 고쳐 쓰는 기법입니다. XML 대신 제이슨(Json)을 사용하기도 합니다.
싱글 페이지 애플리케이션은 웹사이트 페이지 구성 관련 서버로 부터 새로운 페이지를 불러오는 구조가 아니라 웹사이트를 한 페이지로 구성하고 현재 사용자가 있는 웹페이지를 동적으로 다시 구성하여 사용자에게 웹 페이지를 보여주는 구조입니다.
싱글 페이지 애플리케이션 방식은 HTML, CSS, JavaScript 등 모든 코드를 하나의 웹페이지로 불러오거나 적절한 리소스들을 동적으로 불러들여서 필요한 문서에 추가하는 방식으로 사용자의 동작에 응답하는 방식으로 구성되어 있습니다.
SPA(Single Page Application) 형태로 구성하는 이유는 검색엔진최적화인 SEO(Search Engine Optimization) 측면에서 유리하도록 하거나 사용자 경험을 향상 하기 위해서 입니다. 또한 부가적으로 애플리케이션의 속도도 높일 수 있습니다. 모바일에 보다 특화되어 있습니다.
히스토리 API(History API)는 자바스크립트(JavaScript)로 URL의 이력을 관리하는 기능을 의미합니다. SPA의 웹과 앱에서 사용하는 콘텐츠를 재기록할 때 URL이 변경되지 않지만, API로 이력을 추가하면 URL이 변경될 수 있도록 합니다.
프리렌더링(Pre-Rendering)은 HTML을 사전에 생성하여 SEO(Search Engine Optimization)에 보다 적합하도록 만드는 것을 의미합니다. SPA에서는 콘텐츠가 동적으로 변하기 때문에 검색엔진의 검색 로봇이 크롤링 하여 웹사이트를 수집하지 않는 문제점을 방지할 수 있습니다.