SPA(Single Page Application)란 단일 페이지 모던 웹 애플리케이션을 뜻합니다. 보통 하나의 웹사이트에는 다양한 페이지가 있죠. 예를 들어 토스페이먼츠 개발자센터의 용어사전에는 용어가 모두 나열되어 있는 페이지가 있고, 각 용어 페이지가 있어요.

SPA는 웹사이트에 있는 이런 다양한 페이지를 하나의 페이지로 담는 것입니다. 사용자가 처음 웹사이트에 접속하면 핵심 정적 리소스(HTML, CSS, JavaScript)를 다운로드합니다. 그리고 사용자가 다른 페이지로 이동하면, 페이지에서 변경이 필요한 부분만 로딩하고 전체 페이지를 다시 로딩하지 않아요.

이런 이유로 SPA는 사용자에게 부드럽고 빠른 웹 경험을 제공할 수 있다는 큰 장점이 있어요. SPA는 대표적으로 React, Vue, Angular와 같은 JavaScript 프레임워크 및 라이브러리를 사용하여 구현합니다. 이러한 프레임워크들은 SPA 개발에 필요한 다양한 기능과 도구를 제공하여, 복잡한 웹 애플리케이션을 효율적으로 개발할 수 있도록 돕습니다.

SPA는 모던 웹 애플리케이션이라고 했는데요. MPA(Multi Page Application)는 SPA와 반대되는 전통적인 웹 애플리케이션 개념이에요.

MPA는 페이지를 이동하면 서버에서 새로운 페이지를 새로 렌더링해서 전송해주는 방식이에요. 페이지 안에 내용이 많이 없을 때는 사용하는 데 어려움이 없었지만, 페이지에 정보가 많아지면서 이런 방식은 서버의 비효율과 느린 사용 경험을 겪게 됐어요.

그래서 SPA가 탄생했습니다. SPA는 필요한 콘텐츠를 서버에서 비동기적으로 가져와서 현재 페이지 내에서 업데이트합니다. 웹사이트에서 보내야 하는 네트워크 요청을 최소화하기 때문에 빠른 응답성과 부드러운 사용자 경험을 제공하고요.

웹사이트의 요구사항과 특성에 따라 어떤 애플리케이션을 만들지 결정하면 되는데요. 페이지가 많고 빠른 인터렉션이 필요하면 SPA 프레임워크를 추천하고, 간단한 정보를 제공하는 서비스라면 MPA 방식도 괜찮습니다.

SPA의 특징은 다음과 같습니다.

• 동적 콘텐츠 로딩: SPA는 필요한 콘텐츠를 서버에서 비동기적으로 가져와서 페이지를 업데이트합니다. 사용자가 페이지를 이동해도 전체 페이지를 다시 로드하지 않고 필요한 부분만 갱신하기 때문에 빠른 웹 경험을 제공할 수 있어요.

• 클라이언트 사이드 라우팅: SPA는 클라이언트 측에서 JavaScript로 라우팅을 처리합니다. MPA와 다르게 서버로부터 새로운 페이지를 요청하지 않고도 다른 화면으로 전환할 수 있는 것이죠.

• 상태 관리: SPA는 클라이언트 측에서 애플리케이션 상태를 관리해요. 사용자 인터페이스(UI)의 현재 상태에 따라 서버와 데이터를 주고받아 동기화할 수도 있고요. 덕분에 사용자에게 빠른 인터렉션을 제공할 수 있어요.

• 재사용 가능한 컴포넌트: SPA는 일반적으로 재사용 가능한 컴포넌트 기반 구조를 가지고 있어, 유지보수성과 확장성이 뛰어나요. 컴포넌트를 독립적으로 개발 및 테스트할 수 있어서 생산성도 향상되고요.