SPA

SPA(Single Page Application)란

SPA의 개념

SPA(Single Page Application)이란 정적 파일을 한 번에 모두 다운로드 받고, 이후 사용자와의 상호작용 가운데 필요한 데이터만 서버에서 동적으로 받아 트래픽의 총량을 줄이는 애플리케이션의 형태입니다. 웹의 사용성, 속도 향상의 이점을 가지므로 모바일 퍼스트 전략에 부합합니다.

SPA의 장점

• 서버에 들어가는 요청이 적음
• 개발이 간단하고 능률적
• 네트워크 작업을 모니터링하고 페이지 요소 및 이와 관련된 데이터를 조사할 수 있기 때문에 크롬에서 디버그가 쉬움
• 어떤 로컬 저장소라도 효율적으로 캐시할 수 있음
• 프론트엔드와 백엔드 분리로 인한 개발업무 분업화 및 협업이 용이함

SPA의 단점

• 모든 정적 리소스를 한번에 다운로드하기 때문에 초기 구동속도가 상대적으로 느림
• SPA의 소스코드는 앱을 실행하기 위한 태그나 스크립트로만 구성되어 있어서 웹 크롤러가 데이터를 수집할 수 없음
• 자바스크립트의 메모리 누수가 시스템을 느리게 만들 수 있음

SPA 단점의 극복 방안

• 한번에 모든 리소스를 다운로드 받는 것이 아니라 리소르를 청크 단위로 묶어 해당 리소스에 대한 요청이 있을 때만 받도록 함
• 클라이언트에서 수행되는 핵심 로직을 최소화

SPA의 특징

라우팅

라우팅은 출발지에서 목적지까지의 경로를 결정하는 기능입니다. 애플리케이션의 라우팅은 사용자가 작업을 수행하기 위한 어떤 화면에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미합니다. 일반적으로 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위한 데이터를 취득하기 위해 서버에 필요한 데이터를 요청하고 화면을 전환하는 일련의 행위를 말합니다. 이러한 라우팅을 서버가 아닌 브라우저에서 구현해야 하는 것이 SPA 개발의 핵심입니다. 이 방식을 쉽게 말하자면, 요청 URL에 따라 브라우저에서 돔을 변경하는 방식입니다. 따라서 요청 경로에 따라 동적으로 렌더링 되도록 만들면 라우팅에 따라 다른 화면을 구현할 수 있는 것입니다.

컴포넌트

컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념입니다. 쉽게 말하자면 index.html 파일 하나에서 js, css 등 리소스 파일드로가 모듈들을 로드해서 페이지 이동 없이 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념입니다.