contents

싱글 페이지 애플리케이션(Single-Page Application, SPA) 은 브라우저 내부에서 작동하며 사용 중에 페이지를 새로고침할 필요가 없는 현대적인 웹 애플리케이션입니다. 단일 HTML 페이지를 로드한 후, 사용자가 앱과 상호작용함에 따라 서버로부터 완전히 새로운 페이지를 로드하는 대신 현재 페이지의 콘텐츠를 동적으로 재작성합니다. 이를 통해 네이티브 데스크톱이나 모바일 애플리케이션과 유사한 유연하고 빠르며 반응성이 뛰어난 사용자 경험을 만들어냅니다.

전통적인 멀티 페이지 앱(MPA) vs. SPA

SPA를 이해하는 가장 좋은 방법은 전통적인 웹 모델과 비교하는 것입니다.

멀티 페이지 애플리케이션 (MPA) 📄

전통적인 MPA에서는 모든 중요한 변경이나 탐색이 새로운 HTML 페이지를 서버로부터 가져오기 위한 전체 왕복(round-trip)을 발생시킵니다.

• 작동 방식:

  1. 사용자가 링크를 클릭합니다 (예: /about).

  2. 브라우저는 해당 새 페이지를 위해 서버에 전체 요청을 보냅니다.

  3. 서버는 요청을 처리하고 완전한 새 HTML 문서를 다시 보냅니다.

  4. 브라우저는 HTML을 수신하고 모든 CSS, 자바스크립트 및 기타 자산을 포함하여 전체 페이지를 새로고침합니다.

• 비유: 실제 책의 페이지를 넘기는 것과 같습니다. 페이지를 넘길 때마다 전체 화면이 교체됩니다.

• 예시: 전통적인 뉴스 웹사이트, 간단한 전자상거래 사이트, 위키피디아.

싱글 페이지 애플리케이션 (SPA) 📱

SPA에서는 초기 페이지 로드 시 애플리케이션 "셸(shell)"을 가져옵니다. 그 후에는 필요한 데이터만 서버에서 가져오고, 페이지는 브라우저에서 동적으로 업데이트됩니다.

• 작동 방식:

  1. 브라우저는 초기 요청을 하고 단일 HTML 파일과 함께 더 큰 자바스크립트 및 CSS 번들을 로드합니다.

  2. 자바스크립트 프레임워크가 제어권을 넘겨받아 초기 뷰를 렌더링합니다.

  3. 사용자가 링크를 클릭하면 자바스크립트가 탐색을 가로챕니다.

  4. 새 페이지를 요청하는 대신, 필요한 데이터(일반적으로 JSON 형식)만 얻기 위해 백그라운드에서 API 호출(AJAX/Fetch 사용)을 합니다.

  5. 데이터가 도착하면 자바스크립트는 전체 페이지 새로고침 없이 변경이 필요한 현재 페이지의 부분만 동적으로 재작성합니다.

• 비유: 워드 프로세서와 같은 데스크톱 애플리케이션이나 네이티브 모바일 앱을 사용하는 것과 같습니다. 애플리케이션 창은 그대로 유지되고 그 안의 콘텐츠만 변경됩니다.

• 예시: Gmail, 구글 지도, 페이스북, 넷플릭스.

SPA의 작동 원리: 핵심 기술 ⚙️

몇 가지 핵심 기술과 개념이 SPA를 가능하게 합니다.

1. 자바스크립트 프레임워크/라이브러리

현대의 SPA는 거의 항상 강력한 자바스크립트 프레임워크를 사용하여 구축됩니다. 이러한 프레임워크는 애플리케이션의 상태를 관리하고, 사용자 상호작용을 처리하며, UI를 효율적으로 업데이트하는 도구를 제공합니다.

• 3대장: React, Angular, Vue.js가 가장 인기 있는 선택지입니다. 이들은 개발자가 UI를 재사용 가능한 컴포넌트 집합으로 구축할 수 있게 해줍니다.

2. 클라이언트 사이드 라우팅

SPA는 각기 다른 URL(예: /home, /profile, /settings)을 처리할 때마다 서버에 새 페이지를 요청하지 않고 처리할 방법이 필요합니다. 이는 클라이언트 사이드 라우터에 의해 관리됩니다.

• 라우터는 브라우저의 HTML5 History API(특히 pushState와 replaceState)를 사용하여 페이지 새로고침을 유발하지 않고 주소 표시줄의 URL을 변경합니다.

• URL 변경을 감지하고 자바스크립트 프레임워크에게 새 "페이지"에 대해 어떤 컴포넌트를 렌더링해야 하는지 알려줍니다.

3. API를 통한 데이터 가져오기

서버가 초기 로드 후에는 HTML 페이지를 보내지 않기 때문에, SPA는 데이터를 주고받을 방법이 필요합니다. 이는 백엔드 API(Application Programming Interface)와 통신하여 이루어집니다.

• SPA는 백엔드 서버와 완전히 분리된 "클라이언트" 또는 "프론트엔드" 역할을 합니다.

• 브라우저의 Fetch API나 Axios와 같은 라이브러리를 사용하여 API 엔드포인트(예: REST 또는 GraphQL API)에 비동기 HTTP 요청을 보냅니다.

• 서버는 일반적으로 JSON 형식의 데이터로 응답하며, SPA는 이 데이터를 사용하여 뷰를 업데이트합니다.

SPA의 렌더링 전략

HTML이 어떻게 그리고 어디서 렌더링되는지는 성능과 SEO에 큰 영향을 미칩니다.

• 클라이언트 사이드 렌더링 (CSR): 고전적인 SPA 모델입니다. 서버는 거의 비어있는 HTML 파일과 큰 자바스크립트 번들을 보냅니다. 브라우저가 자바스크립트를 실행하면, 이 자바스크립트가 데이터를 가져와 전체 페이지를 렌더링합니다.

  • 장점: 초기 로드 후 매우 풍부하고 상호작용적인 사용자 경험.

  • 단점: 느린 초기 페이지 로드("상호작용까지의 시간") 및 검색 엔진 크롤러가 빈 페이지를 보기 때문에 역사적으로 SEO에 불리했습니다.

• 서버 사이드 렌더링 (SSR): CSR의 문제를 해결하기 위해 SSR이 도입되었습니다. 서버가 자바스크립트 애플리케이션 자체를 실행하여 요청된 페이지를 완전한 HTML 문서로 미리 렌더링한 후 브라우저에 보냅니다. 브라우저는 즉시 콘텐츠를 표시할 수 있습니다. 그런 다음, 하이드레이션(hydration) 이라는 프로세스를 통해 자바스크립트를 HTML에 연결하여 페이지를 상호작용 가능하게 만듭니다.

  • 장점: 빠른 초기 로드("첫 콘텐츠 페인트") 및 SEO에 탁월함.

  • 단점: 더 복잡한 서버 설정이 필요하며, 순수 CSR 앱보다 페이지 간 이동이 느릴 수 있음.

  • 프레임워크: Next.js (React용), Nuxt (Vue용), Angular Universal.

SPA의 장점과 단점 ⚖️

장점

• 빠르고 유연한 UX: 거슬리는 전체 페이지 새로고침이 없어 앱과 같은 매끄러운 경험을 제공합니다.

• 향상된 성능 (초기 로드 후): 전체 페이지가 아닌 작은 데이터 조각만 전송되므로 후속 탐색이 훨씬 빠릅니다.

• 명확한 관심사 분리: 프론트엔드(SPA)와 백엔드(API)가 분리되어 팀이 독립적으로 작업할 수 있습니다.

단점

• 느린 초기 로드: 브라우저는 첫 방문 시 잠재적으로 큰 자바스크립트 번들을 다운로드해야 하므로 시간이 걸릴 수 있습니다.

• SEO 문제: 구글의 크롤러가 자바스크립트를 실행하는 능력이 훨씬 향상되었지만, CSR 전용 SPA는 여전히 서버 렌더링 페이지보다 SEO 친화적이지 않을 수 있습니다. 이는 SSR이나 SSG를 사용하여 대부분 해결됩니다.

• 복잡성: 클라이언트 측에서 애플리케이션 상태, 라우팅 및 메모리 누수를 관리하는 것은 전통적인 MPA보다 더 복잡할 수 있습니다.

references