- SPA에 대해 설명해주세요.
- 답변)
- 의도: 최근 프론트엔드 패러다임인 Single Page Application에 대해 알고 있는지 확인하는 질문
- 팁: 장단점을 명확하게 제시하면 좋습니다.
- 모범 답안: 네, SPA는 Single Page Application의 약자로서 리액트나 뷰의 기반이 되는 기술입니다. 이 SPA를 사용한다면 여러 장단점이 있는데요. 우선 장점부터 말씀드리겠습니다. 기존에 MPA를 사용하면 페이지를 이동할 때마다 새로 고침이 계속 일어났는데, SPA를 사용하면 이런 일이 없습니다. 라우터로 페이지를 이동하기는 하지만 사실 내부적으로는 MPA의 개념처럼 페이지를 이동하는 게 아니기 때문입니다. 그저 URL을 바꿔주고, 그 URL에 따라 화면의 컴포넌트를 바꿔치기 해주는 것으로 새로 고침 없이 새로운 화면을 볼 수 있게 해주는 것이 큰 장점입니다.
이외에 클라이언트 사이드 렌더링을 사용하여 서버의 부담을 줄이고 빠른 화면 전환 등 로딩 속도를 개선할 수 있습니다. 다만 대표적인 단점으로는 SEO에 취약하다는 점과 초기 로딩이 느리다는 점이 있습니다. 그래서 요즘은 SPA 기반 앱에서 SSR과 CSR을 모두 혼합하여 장점만 가져와 사용할 수 있는 Next.js 프레임워크가 인기있는 편입니다.
- 답변)
SPA (Single Page Application)
SPA는 Single Page Application의 약자. 웹 애플리케이션 또는 웹사이트의 한 형태로, 하나의 HTML 페이지를 기반으로 동작하며 페이지 간의 이동 없이 콘텐츠를 동적으로 업데이트하는 방식이다. React, Vue.js 같은 프레임워크와 라이브러리가 주로 SPA를 구현에 사용된다.
작동 방식
1. 초기 로딩
브라우저는 애플리케이션을 구동하기 위한 필수 자원(HTML, CSS, JavaScript)을 한 번에 다운로드한다.
2. 클라이언트 사이드 라우팅
사용자가 페이지 간 이동을 요청하면, 서버로부터 새로운 HTML을 받지 않고, 클라이언트(브라우저)에서 JavaScript를 통해 URL을 변경하고, 그에 맞는 화면(컴포넌트)을 동적으로 렌더링한다.
3. 새로고침 없는 화면 전환
SPA는 단일 HTML 페이지에서 필요한 콘텐츠만 업데이트하기 때문에 전통적인 MPA(Multi Page Application)처럼 페이지 전체를 새로 고칠 필요가 없다.
SPA 장점
-
빠른 화면 전환
페이지 이동 시 서버와 통신하지 않고 브라우저 내에서 콘텐츠를 교체하기 때문에, 사용자 경험(UX)이 매우 부드럽다.
❓페이지 이동 시? -
서버 부하 감소
클라이언트에서 렌더링을 처리하기 때문에 서버 요청을 최소화하고, 서버 부담 감소. -
모던 애플리케이션 개발에 적합
React, Vue.js, Angular 같은 최신 프레임워크의 핵심 기반 기술로, 컴포넌트 기반 아키텍처와 높은 재사용성을 지원한다. -
리치 인터페이스 지원
애니메이션, 실시간 데이터 업데이트, 대화형 UI 구현이 비교적 용이.
SPA 단점
-
초기 로딩 속도
필요한 모든 리소스를 한 번에 로드하기 때문에, 초기 로딩 속도가 느릴 수 있다. -
SEO에 취약
SPA는 기본적으로 클라이언트에서 렌더링하기 때문에 검색 엔진이 콘텐츠를 제대로 크롤링하지 못하는 경우가 있다.
(단, SSR(Server-Side Rendering)이나 프리렌더링을 활용하면 이를 보완할 수 있습니다.)
❓프리렌더링?
🍦TIL - 프리렌더링 -
복잡한 클라이언트 관리
상태 관리, 라우팅, 비동기 데이터 처리 등 클라이언트 단의 복잡성 증가. -
JavaScript 의존성
JavaScript가 비활성화된 환경에서는 제대로 동작하지 않을 수 있다.
해결 방안 및 현대적 흐름
-
SSR(Server-Side Rendering)
서버에서 HTML을 렌더링하여 클라이언트에 전달함으로써 초기 로딩 속도 문제와 SEO 문제 개선.
(대표적인 프레임워크 : Next.js (React 기반)) -
Hybrid 방식 (SPA + SSR)
클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)을 혼합하여, SEO 최적화와 부드러운 사용자 경험을 동시에 제공할 수 있다.
➡️ SPA는 현대 웹 애플리케이션의 중요한 패러다임으로 자리 잡았으며, UX 개선과 개발 효율성을 높이는 데 크게 기여하고 있다. 그러나 초기 로딩 속도나 SEO 문제 같은 한계가 있으므로, 상황에 맞게 SSR, 프리렌더링, 또는 하이브리드 방식을 활용하는 것이 좋다.
