icon
11장 : 프론트엔드

SPA 개념

우리는 지금까지 웹의 기본 동작 원리, HTML/CSS/JavaScript의 핵심 문법, 그리고 웹 API를 활용하여 브라우저의 다양한 기능을 제어하는 방법을 학습했습니다. 특히 9장와 10장에서는 Fetch API를 통한 비동기 통신, Web Storage를 통한 클라이언트 측 데이터 저장, History API를 활용한 라우팅, Web/Service Workers를 통한 성능 최적화, 그리고 테스팅과 디버깅 기법까지 익히며 동적이고 안정적인 웹 애플리케이션을 만드는 데 필요한 기초 지식을 다졌습니다.

이제 이 모든 지식을 바탕으로 현대 웹 개발의 중심에 있는 프론트엔드(Frontend) 개발 영역으로 한 걸음 더 나아가고자 합니다. 과거의 웹 페이지는 주로 정적이었거나, 매 페이지 전환마다 전체를 새로고침하는 방식이었습니다. 하지만 스마트폰의 등장과 함께 사용자들은 데스크톱 애플리케이션처럼 빠르고 부드러운 반응성과 상호작용성을 웹에서도 기대하게 되었습니다.

이러한 요구를 충족시키기 위해 등장한 패러다임이 바로 Single Page Application (SPA) 입니다. 11장 "프론트엔드"에서는 SPA의 개념을 시작으로, 이를 구현하는 데 필수적인 프론트엔드 프레임워크(React, Vue, Angular 등)의 등장 배경과 핵심 원리를 다룰 것입니다. 그 첫 번째 장으로, SPA가 무엇인지, 왜 등장했으며, 어떤 장단점을 가지는지 상세히 알아보겠습니다.

웹 페이지를 마치 데스크톱 애플리케이션처럼 동작하게 만드는 것이 Single Page Application (SPA) 의 핵심 목표입니다. 이름 그대로 "단일 페이지 애플리케이션"이라는 뜻을 가지며, 웹 브라우저에서 로드되는 HTML 파일이 단 하나뿐인 것이 특징입니다.

전통적인 웹 애플리케이션과의 비교

SPA의 개념을 이해하기 위해서는 먼저 전통적인 웹 애플리케이션의 동작 방식을 떠올려 볼 필요가 있습니다.

전통적인 웹 애플리케이션 (MPA: Multiple Page Application)

  • 동작 방식: 사용자가 링크를 클릭하거나 폼을 제출할 때마다, 브라우저는 서버에 새로운 HTML 파일을 요청하고, 서버는 해당 요청에 대한 새로운 HTML 문서를 응답으로 보냅니다. 브라우저는 이 응답을 받아 페이지 전체를 처음부터 다시 로드하고 렌더링합니다.
  • 장점
    • SEO(검색 엔진 최적화) 유리: 각 페이지가 별도의 HTML 파일로 존재하여 검색 엔진 크롤러가 콘텐츠를 파악하기 용이합니다.
    • 초기 로딩 빠름: 필요한 최소한의 리소스만 로드하므로 첫 페이지 로딩이 빠를 수 있습니다.
  • 단점
    • 사용자 경험 저해: 페이지 전환 시 전체 화면이 깜빡이고, 네트워크 지연으로 인해 느리게 느껴질 수 있습니다.
    • 불필요한 리소스 재로드: 페이지 전환마다 CSS, JavaScript 파일 등 변경되지 않는 공통 리소스도 매번 다시 로드되어 네트워크 및 브라우저 리소스 낭비가 발생할 수 있습니다.
    • 서버 부담: 모든 페이지 요청을 서버가 처리해야 하므로 서버에 부담이 가중될 수 있습니다.

SPA (Single Page Application)

  • 동작 방식

    최초 한 번만 필요한 모든 HTML, CSS, JavaScript 리소스(또는 최소한의 초기 리소스)를 서버로부터 로드합니다.

    이후 사용자가 다른 페이지로 이동하거나 특정 기능을 사용할 때, 전체 페이지를 새로고침하는 대신, JavaScript를 사용하여 필요한 데이터만 서버와 비동기적으로 통신(Ajax/Fetch API) 하여 받아옵니다.

    받아온 데이터를 바탕으로 페이지의 특정 부분만 동적으로 업데이트(DOM 조작) 합니다.

    이때 브라우저의 URL은 History API를 사용하여 변경하여 사용자가 뒤로가기/앞으로가기 기능을 사용할 수 있도록 합니다.

  • 장점
    • 매끄러운 사용자 경험: 페이지 전환 시 화면 깜빡임이 없고, 필요한 부분만 업데이트되므로 데스크톱 앱과 같은 부드러움을 제공합니다.
    • 빠른 반응성: 초기 로딩 후에는 데이터만 받아오므로, 페이지 전환 및 기능 실행 속도가 매우 빠릅니다.
    • 네트워크 사용량 감소: 필요한 데이터만 주고받으므로 서버와 클라이언트 간의 네트워크 트래픽이 줄어듭니다.
    • 모바일 앱 개발 용이: 웹과 모바일 앱 간의 코드 및 로직 공유가 용이하여, 하이브리드 앱 개발에 유리합니다.
    • 서버 부담 감소: 서버는 데이터(API)만 제공하고, 렌더링은 클라이언트가 담당하므로 서버의 역할이 가벼워집니다.
  • 단점
    • 초기 로딩 시간: 첫 로딩 시 애플리케이션에 필요한 모든(또는 많은) JavaScript, CSS 파일을 한꺼번에 로드하므로 초기 로딩 시간이 길어질 수 있습니다. (코드 스플리팅 등으로 완화 가능)
    • SEO 불리: 검색 엔진 크롤러가 JavaScript로 동적으로 렌더링되는 콘텐츠를 완전히 파악하기 어려울 수 있습니다. (SSR, SSG 등으로 완화 가능)
    • JavaScript 의존성: 브라우저에서 JavaScript가 비활성화되어 있거나 오류가 발생하면 애플리케이션이 제대로 동작하지 않을 수 있습니다.
    • 메모리 누수 가능성: DOM을 동적으로 조작하고 컴포넌트를 생성/제거하는 과정에서 메모리 관리에 주의하지 않으면 메모리 누수가 발생할 수 있습니다.
    • 보안 취약점: 클라이언트에 비즈니스 로직이 더 많이 노출되므로 XSS(크로스 사이트 스크립팅) 등 클라이언트 측 보안에 더 주의를 기울여야 합니다.

SPA의 핵심 기술 요소 (복습)

SPA가 원활하게 동작하기 위해서는 우리가 9장에서 배웠던 여러 웹 API들이 필수적으로 활용됩니다.

  • Fetch API (또는 XMLHttpRequest): 서버로부터 데이터를 비동기적으로 받아오기 위한 핵심 기술입니다. (데이터만 주고받음)
  • History API: 페이지 전체를 새로고침하지 않고도 브라우저의 URL을 변경하고, 뒤로가기/앞으로가기 기능을 정상적으로 작동시키기 위해 사용됩니다. (클라이언트-사이드 라우팅)
  • Web Storage (로컬/세션 스토리지): 사용자 설정, 로그인 토큰, 장바구니 정보 등 클라이언트 측에서 데이터를 영구적으로 또는 세션 동안 저장하고 관리하는 데 사용됩니다.
  • Web Workers & Service Workers: 복잡한 연산을 메인 스레드에서 분리하거나, 오프라인 지원, 캐싱 등을 통해 SPA의 성능과 사용자 경험을 극대화하는 데 사용됩니다.

이러한 기술들이 조합되어 SPA는 사용자에게 네이티브 앱과 같은 경험을 제공할 수 있게 됩니다.

왜 SPA가 현대 웹 개발의 주류가 되었는가?

SPA가 위에서 언급된 단점들에도 불구하고 현대 웹 개발의 대세가 된 이유는 다음과 같습니다.

  • 향상된 사용자 경험에 대한 요구: 데스크톱 애플리케이션이나 모바일 앱에 익숙해진 사용자들은 웹에서도 빠르고 매끄러운 반응성을 기대합니다. SPA는 이러한 기대를 충족시킵니다.
  • 프론트엔드와 백엔드의 분리: SPA는 클라이언트 측 렌더링을 강조하며, 백엔드는 순수하게 API를 제공하는 역할만 수행합니다. 이는 프론트엔드와 백엔드 개발 팀이 독립적으로 작업할 수 있게 하여 개발 속도를 높이고, 각 영역의 전문성을 강화합니다.
  • 강력한 프론트엔드 프레임워크의 등장: React, Vue, Angular와 같은 프론트엔드 프레임워크/라이브러리는 SPA 개발을 위한 효율적인 도구와 패턴을 제공하여, 복잡한 UI를 쉽게 구축하고 관리할 수 있도록 해줍니다.
  • 개발 생산성 향상: 컴포넌트 기반 개발, 가상 DOM, 상태 관리 등 프레임워크의 기능은 개발 생산성을 크게 높입니다.
  • 크로스 플랫폼 개발의 용이성: 한 번 작성된 프론트엔드 코드를 웹뿐만 아니라 모바일 앱(React Native, NativeScript 등)이나 데스크톱 앱(Electron) 개발에도 재활용할 수 있어 개발 비용을 절감할 수 있습니다.

마무리하며

이번 장에서는 현대 웹 개발의 중심 패러다임인 Single Page Application (SPA) 의 개념을 심도 있게 학습했습니다.

여러분은 전통적인 MPA 방식과 SPA 방식의 근본적인 차이점과 각각의 장단점을 명확히 이해했습니다. SPA가 초기 로딩 후 페이지의 부분적인 업데이트를 통해 데스크톱 애플리케이션과 같은 매끄러운 사용자 경험을 제공한다는 점, 그리고 이를 위해 Fetch API, History API 등 우리가 9장에서 배웠던 웹 API들이 필수적으로 활용된다는 점을 다시 한번 확인했습니다. 또한, SPA가 현대 웹 개발의 주류가 된 배경에는 사용자 경험에 대한 높은 기대치, 프론트엔드/백엔드의 역할 분리, 그리고 강력한 프론트엔드 프레임워크의 등장이 있었다는 점을 알아보았습니다.

SPA는 현대 웹 개발의 핵심적인 개념이며, 이제 여러분은 이 개념을 바탕으로 다음 장부터 React, Vue와 같은 실제 프론트엔드 프레임워크들이 어떻게 SPA를 구현하고 개발 생산성을 높이는지 구체적으로 학습할 준비가 되었습니다. 단점들을 보완하기 위한 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)과 같은 고급 개념들도 있음을 염두에 두시면서 앞으로도 학습을 이어나가길 바라겠습니다.

성능 프로파일링

Previous Page

React 기초 (컴포넌트, JSX, 상태 관리)

Next Page