SPA(단일 페이지 응용 프로그램)는 단일 HTML 페이지를 통해 사용자에게 제공되는 웹 응용 프로그램으로, 데스크톱 응용 프로그램이나 기본 응용 프로그램을 더 밀접하게 복제하고 응답성을 높입니다.
스파는 가끔 온다 defi단일 페이지 인터페이스(SPI).
단일 페이지 애플리케이션은 초기 로드 중에 애플리케이션의 모든 HTML, JavaScript 및 CSS를 가져오거나 사용자 상호 작용 또는 기타 이벤트에 대한 응답으로 업데이트하기 위해 리소스를 동적으로 로드할 수 있습니다.
다른 웹 응용 프로그램은 별도의 HTML 페이지에서 응용 프로그램의 일부에 연결된 홈 페이지를 사용자에게 제공합니다. 즉, 사용자는 새 요청을 할 때마다 새 페이지가 로드될 때까지 기다려야 합니다.
기술
SPA는 HTML5 및 Ajax(비동기 JavaScript 및 XML)를 사용하여 사용자 요청에 대한 유동적이고 동적인 응답을 가능하게 하여 사용자가 작업을 수행하는 즉시 콘텐츠를 업데이트할 수 있도록 합니다. 페이지가 로드되면 Ajax 호출을 통해 서버와의 상호 작용이 발생하고 다시 로드할 필요 없이 페이지를 업데이트하기 위해 JSON(JavaScript Object Notation) 형식으로 감지된 데이터가 반환됩니다.
스파 자세히 보기
단일 페이지 앱은 HTML을 가져오기 위해 서버를 왕복할 필요 없이 사용자 인터페이스의 일부를 재설계할 수 있는 기능으로 유명합니다. 이는 데이터를 관리하는 모델 계층과 모델에서 읽는 뷰 계층으로 데이터 프레젠테이션에서 데이터를 분리하여 수행됩니다.
좋은 코드는 동일한 문제를 여러 번 해결하거나 리팩토링하는 데서 나옵니다. 일반적으로 이 프로세스는 동일한 작업을 일관되게 수행하는 하나의 메커니즘과 함께 반복되는 패턴으로 발전합니다.
유지 관리 가능한 코드를 작성하려면 간단한 방법으로 코드를 작성해야 합니다. 이것은 끊임없는 투쟁입니다. 사실 문제를 해결하기 위해 코드를 작성함으로써 복잡성(엔터런스/종속성)을 추가하기 쉽습니다. 복잡성을 줄이지 않는 방식으로 문제를 쉽게 해결할 수 있습니다.
네임스페이스가 이에 대한 예입니다.
단일 페이지 애플리케이션(SPA) 다중 페이지 애플리케이션(MPA) 비교
다중 페이지 애플리케이션(MPA)에는 정적 데이터가 있는 여러 페이지와 다른 사이트에 대한 링크가 포함되어 있습니다. HTML 및 CSS는 MPA 웹 사이트를 개발하는 데 사용되는 주요 기술입니다. JavaScript를 사용하여 부하를 줄이고 속도를 높일 수 있습니다. 온라인 상점과 같이 광범위한 서비스를 제공하는 조직은 다양한 사용자 데이터베이스에 대한 연결을 용이하게 하므로 MPA 사용을 고려해야 합니다.
단일 페이지 애플리케이션은 다음과 같은 면에서 다중 페이지 애플리케이션과 다릅니다.
- 개발 과정: MPA를 생성할 때 SPA와 달리 JavaScript 숙련도가 필요하지 않습니다. 그러나 MPA는 프론트엔드와 백엔드가 결합되어 있기 때문에 SPA보다 상대적으로 공사기간이 길다.
- Velocità: MPA는 상대적으로 느리게 실행되므로 각각의 새 페이지를 처음부터 로드해야 합니다. 그러나 SPA는 나중에 사용할 수 있도록 데이터를 캐시하므로 초기 다운로드 후 훨씬 빠르게 로드됩니다.
- 오티미자치오네 페르 이 모토리 디 라이세르카: 검색 엔진은 MPA를 사용하여 웹사이트를 쉽게 색인화할 수 있습니다. MPA는 더 나은 SEO 순위를 생성하기 위해 검색 엔진에서 더 많은 페이지를 크롤링합니다. 각 페이지의 콘텐츠도 정적이어서 접근성이 더 좋습니다. 반대로 SPA에는 단일 고유 URL(Uniform Resource Locator)이 있는 페이지가 있습니다. 그들은 또한 대부분의 검색 엔진에서 제대로 인덱싱되지 않는 JavaScript를 사용합니다. 이것은 SPA의 SEO 순위를 더욱 어렵게 만듭니다.
- 보안: MPA에서는 각 온라인 페이지를 개별적으로 보호해야 합니다. 그러나 SPA는 해커 공격에 더 취약합니다. 그러나 올바른 접근 방식을 통해 개발 팀은 애플리케이션 보안을 개선할 수 있습니다.
더 많은 기업이 SPA를 사용하기 위해 마이그레이션함에 따라 크롤러와 검색 엔진은 SPA를 더 잘 인덱싱하도록 발전할 것입니다. 속도를 감안할 때 SPA가 웹 응용 프로그램 개발을 위한 이동 옵션이 되는 시기는 문제일 뿐입니다. 그러면 SPA에 비해 MPA의 이점이 사라지기 시작할 것입니다.
단일 페이지 애플리케이션은 언제 사용합니까?
이러한 응용 프로그램이 가장 관련성이 높은 다섯 가지 시나리오가 있습니다.
- 동적 플랫폼과 적은 데이터 볼륨으로 웹 사이트를 개발하려는 사용자는 SPA를 사용할 수 있습니다.
- 웹 사이트용 모바일 애플리케이션을 구축하려는 사용자는 SPA 사용을 고려할 수도 있습니다. 사이트 및 모바일 애플리케이션에 대한 백엔드 API(Application Programming Interface)를 사용할 수 있습니다.
- SPA 아키텍처는 SEO가 덜 필요하기 때문에 Facebook, SaaS 플랫폼 및 폐쇄형 커뮤니티와 같은 소셜 네트워크 구축에 적합합니다.
- 소비자에게 원활한 상호 작용을 제공하려는 사용자도 SPA를 사용해야 합니다. 소비자는 라이브 스트리밍 데이터 및 그래프에 대한 라이브 업데이트에 액세스할 수도 있습니다.
- 장치, 운영 체제 및 브라우저에서 일관되고 기본적이며 동적인 사용자 경험을 제공하려는 사용자.
좋은 팀은 고품질 단일 페이지 애플리케이션을 만들 수 있는 예산, 도구 및 시간이 있어야 합니다. 이렇게 하면 트래픽 관련 다운타임이 발생하지 않는 안정적이고 효율적인 SPA가 보장됩니다.
단일 페이지 애플리케이션 아키텍처
단일 페이지 앱은 현재 페이지를 로드하고 작업하여 방문자와 상호 작용하므로 서버에서 여러 웹 페이지를 로드할 필요가 없습니다.
SPA가 있는 웹사이트는 단일 URL 링크로 구성됩니다. 클릭하면 콘텐츠가 다운로드되고 특정 사용자 인터페이스(UI) 구성 요소가 업데이트됩니다. 서버에서 새 콘텐츠를 가져올 때 사용자가 현재 페이지와 상호 작용할 수 있으므로 사용자 경험이 향상됩니다. 새로 고침이 발생하면 현재 페이지의 일부가 새 콘텐츠로 업데이트됩니다.
SPA의 초기 클라이언트 요청은 응용 프로그램과 HTML, CSS 및 JavaScript와 같은 모든 관련 자산을 로드합니다. 초기 로드 파일은 복잡한 애플리케이션에 중요할 수 있으며 로드 시간이 느려질 수 있습니다. 애플리케이션 프로그래밍 인터페이스(API)는 사용자가 SPA를 탐색할 때 새 데이터를 가져옵니다. 서버는 JSON(JavaScript Object Notation) 형식의 데이터로만 응답합니다. 이 데이터를 수신하면 브라우저는 사용자가 페이지를 다시 로드하지 않고 보는 애플리케이션의 보기를 새로 고칩니다.
단일 페이지 애플리케이션 아키텍처에는 서버 측 및 클라이언트 측 렌더링 기술이 포함됩니다. 사이트는 CSR(클라이언트측 렌더링), SSR(서버측 렌더링) 또는 SSG(정적 사이트 생성기)를 통해 사용자에게 표시되고 표시됩니다.
- 클라이언트측 렌더링(CSR)
클라이언트 측 렌더링을 통해 브라우저는 서버에 HTML 파일을 요청하고 스크립트와 스타일이 첨부된 기본 HTML 파일을 받습니다. JavaScript를 실행하는 동안 사용자에게 빈 페이지 또는 로더 이미지가 표시됩니다. SPA는 데이터를 가져오고, 시각화를 생성하고, 데이터를 문서 개체 모델(DOM)로 푸시합니다. 그러면 SPA를 사용할 준비가 됩니다. CSR은 종종 세 가지 대안 중 가장 길며 콘텐츠를 볼 때 장치 리소스를 많이 사용하기 때문에 때때로 브라우저를 압도할 수 있습니다. 또한 CSR은 과도한 서버 통신 없이 소비자에게 정보를 제공하여 더 빠른 사용자 경험을 제공하므로 트래픽이 많은 웹 사이트에 대한 훌륭한 대안입니다.
- 서버측 렌더링(SSR)
서버 측 렌더링 중에 브라우저는 서버에서 HTML 파일을 요청합니다. 이 파일은 요청된 데이터를 가져오고 SPA를 렌더링하며 이동 중에 애플리케이션용 HTML 파일을 생성합니다. 그런 다음 액세스 가능한 자료가 사용자에게 표시됩니다. SPA 아키텍처는 이벤트를 연결하고 가상 DOM을 생성하며 추가 작업을 수행하는 데 필요합니다. 그러면 SPA를 사용할 준비가 됩니다. SSR은 SPA의 속도와 사용자의 브라우저에 과부하를 주지 않는 것을 결합하여 프로그램을 빠르게 만듭니다.
- 정적 사이트 생성기(SSG)
정적 사이트 빌더 내에서 브라우저는 즉시 서버에 HTML 파일을 요청합니다. 페이지가 사용자에게 표시됩니다. SPA는 데이터를 가져오고 뷰를 생성하며 DOM(문서 개체 모델)을 채웁니다. 그러면 SPA를 사용할 준비가 된 것입니다. 이름에서 알 수 있듯이 SSG는 대부분 정적 페이지에 적합합니다. 그들은 좋고 빠른 옵션으로 정적 페이지를 제공합니다. 동적 콘텐츠가 포함된 웹사이트의 경우 사용자는 다른 두 가지 정보 렌더링 옵션 중 하나를 선택하는 것이 좋습니다.
단일 페이지 애플리케이션의 장점
Meta, YouTube 및 Netflix와 같은 대기업은 다중 페이지 애플리케이션에서 단일 페이지 애플리케이션으로 이동했습니다. SPA는 더 부드러운 사용자 경험, 더 높은 성능 및 응답성을 제공합니다. 다음은 단일 페이지 응용 프로그램을 사용할 때의 이점입니다.
- 캐싱 기능
단일 페이지 애플리케이션은 초기 다운로드 시 서버에 단일 요청을 하고 수신한 모든 데이터를 저장합니다. 소비자는 필요한 경우 수신된 데이터를 사용하여 오프라인으로 작업할 수 있으므로 데이터 리소스를 적게 사용하므로 사용자가 더 편리합니다. 또한 클라이언트의 인터넷 연결 상태가 좋지 않은 경우 LAN 연결이 허용되는 경우 로컬 데이터를 서버와 동기화할 수 있습니다.
- 빠르고 반응이 빠른
SPA를 사용하면 전체 페이지를 새로 고치는 대신 요청한 콘텐츠만 새로 고치므로 웹 사이트 속도를 향상시킬 수 있습니다. SPA는 새 페이지가 아닌 부 JSON 파일을 로드합니다. JSON 파일은 더 빠른 로딩 속도와 효율성을 보장합니다. 지연 없이 페이지의 모든 기능에 즉시 액세스할 수 있습니다. 웹사이트의 로드 시간이 수익과 판매에 상당한 영향을 미칠 수 있기 때문에 이것은 큰 장점입니다.
SPA는 페이지의 모든 정보를 즉시 제공하여 원활한 전환을 허용합니다. 웹사이트를 업데이트할 필요가 없으므로 일반적인 온라인 앱보다 프로세스가 더 효율적입니다.
또한 SPA를 사용하면 HTML, CSS 및 스크립트와 같은 자산 자바 애플리케이션 수명 동안 한 번만 가져옵니다. 필요한 데이터만 주고 받습니다.
SPA가 포함된 페이지는 또한 캐싱 및 감소된 데이터 볼륨 덕분에 사용자가 더 빠르게 탐색할 수 있도록 합니다. 필요한 데이터만 주고받으며 업데이트된 콘텐츠 중 누락된 부분만 다운로드합니다.
- Chrome으로 디버깅
디버깅은 성능을 저하시키는 버그, 오류 및 웹 애플리케이션 보안 취약성을 감지하고 제거합니다. Chrome 개발자 도구를 사용하면 SPA 디버깅이 쉬워집니다. 개발자는 브라우저에서 JS 코드 렌더링을 제어하고 여러 줄의 코드를 검토하지 않고도 SPA를 디버그할 수 있습니다.
SPA는 AngularJS 및 React 개발자 도구와 같은 JavaScript 프레임워크 위에 구축되어 Chrome 브라우저를 사용하여 더 쉽게 디버깅할 수 있습니다.
개발자 도구를 사용하면 개발자는 브라우저가 서버에서 데이터를 요청하고 캐시하는 방법과 페이지 요소를 표시하는 방법을 이해할 수 있습니다. 또한 이러한 도구를 통해 개발자는 페이지 요소, 네트워크 작업 및 관련 데이터를 모니터링하고 분석할 수 있습니다.
- 급속 성장
개발 과정에서 SPA의 프런트엔드와 백엔드를 분리하여 두 명 이상의 개발자가 병렬로 작업할 수 있습니다. 프런트엔드 또는 백엔드를 변경해도 다른 쪽 끝에 영향을 미치지 않으므로 더 빠른 개발이 촉진됩니다.
개발자는 프런트 엔드 UI에서 서버 측 코드 및 별도의 SPA를 재사용할 수 있습니다. SPA의 분리된 아키텍처는 프런트 엔드 디스플레이와 백 엔드 서비스를 분리합니다. 이를 통해 개발자는 콘텐츠에 영향을 미치거나 백엔드 기술에 대해 걱정하지 않고 관점을 변경하고 빌드하고 실험할 수 있습니다. 그러면 고객은 이러한 애플리케이션을 사용하여 일관된 경험을 할 수 있습니다.
- 향상된 사용자 경험
SPA를 사용하면 사용자는 한 번에 모든 콘텐츠와 함께 본 페이지에 즉시 액세스할 수 있습니다. 사용자가 편안하고 원활하게 스크롤할 수 있어 더욱 편리합니다. 기본 데스크톱 또는 모바일 앱을 사용하는 것과 같은 느낌입니다.
SPA는 시작, 중간, 끝이 뚜렷한 긍정적인 UX를 제공합니다. 또한 사용자는 MPA와 같이 여러 링크를 클릭하지 않고도 원하는 콘텐츠에 도달할 수 있습니다. 페이지를 로드하는 데 상당한 시간이 걸리기 때문에 사용자가 좌절하는 MPA와 달리 사용자가 정보에 즉시 액세스할 때 이탈률이 낮아집니다. 페이지 요소가 재사용되기 때문에 탐색도 더 빠릅니다.
- IOS 및 Android 애플리케이션으로 변환
iOS 및 Android 애플리케이션으로 전환하려는 개발자는 상대적으로 전환하기 쉬운 SPA를 사용해야 합니다. 동일한 코드를 사용하여 SPA에서 모바일 애플리케이션으로 전환할 수 있습니다. 전체 코드가 단일 인스턴스로 제공되기 때문에 SPA는 탐색하기 쉬워 모바일 애플리케이션에 이상적입니다.
- 플랫폼 간 호환성
개발자는 단일 코드 베이스를 사용하여 모든 장치, 브라우저 및 운영 체제에서 실행할 수 있는 애플리케이션을 구축할 수 있습니다. 어디서나 SPA를 사용할 수 있으므로 소비자 경험이 향상됩니다. 또한 개발자와 DevOps 엔지니어가 콘텐츠 편집 애플리케이션을 개발할 때 실시간 분석을 포함하여 기능이 풍부한 애플리케이션을 구축할 수 있습니다.
단점
단일 페이지 애플리케이션의 모든 장점에도 불구하고 SPA 프레임워크를 사용할 때 몇 가지 단점이 발생합니다. 다행히 SPA로 이러한 문제를 극복하기 위한 작업이 진행 중입니다. 다음은 몇 가지 단점입니다.
- 검색 엔진 최적화(SEO)
단일 페이지 애플리케이션은 SEO에 적합하지 않다는 것이 널리 알려져 있습니다. Google 또는 Yahoo와 같은 대부분의 검색 엔진은 한동안 서버와의 Ajax 상호 작용을 기반으로 SPA 웹 사이트를 크롤링할 수 없었습니다. 결과적으로 이러한 SPA 사이트의 대부분은 인덱싱되지 않은 상태로 유지되었습니다. 현재 Google 봇은 일반 HTML 대신 JavaScript를 사용하여 SPA 웹 사이트를 인덱싱하는 방법을 학습하여 순위를 손상시킵니다.
미리 만들어진 SPA 사이트에 SEO를 맞추는 것은 어렵고 비용이 많이 듭니다. 개발자는 검색 엔진 서버에 의해 렌더링되는 별도의 웹사이트를 구축해야 하는데 이는 비효율적이고 많은 추가 코드가 필요합니다. 기능 감지 및 사전 렌더링과 같은 다른 기술도 사용할 수 있습니다. SPA 시설에서 각 페이지에 대한 단일 URL은 SPA의 SEO 기능을 제한합니다.
- 뒤로 및 앞으로 버튼 탐색
브라우저는 웹 페이지를 빠르게 로드할 수 있도록 정보를 저장합니다. 소비자가 뒤로 버튼을 누를 때 대부분의 사람들은 페이지가 마지막으로 보았을 때와 유사한 상태에 있고 전환이 빠르게 일어날 것이라고 기대합니다. 기존의 웹 아키텍처에서는 사이트 및 관련 리소스의 캐시된 복사본을 사용하여 이를 허용합니다. 그러나 순진한 SPA 구현에서 뒤로 버튼을 누르면 링크를 클릭하는 것과 같은 효과가 있습니다. 서버 요청, 지연 증가 및 눈에 보이는 데이터 변경이 발생합니다.
사용자 기대치를 충족하고 더 빠른 경험을 제공하기 위해 SPA 개발자는 JavaScript를 사용하여 기본 브라우저의 기능을 모방해야 합니다.
- 스크롤 위치
브라우저는 방문한 페이지의 마지막 스크롤 위치와 같은 정보를 저장합니다. 그러나 사용자는 브라우저의 뒤로 및 앞으로 버튼을 사용하여 SPA를 탐색할 때 스크롤 위치가 변경되었음을 알 수 있습니다. 예를 들어 Facebook에서 때때로 사용자는 마지막 스크롤 위치로 다시 스크롤하지만 그렇지 않은 경우도 있습니다. 이전 스크롤 위치로 다시 스크롤을 수동으로 다시 시작해야 하므로 차선의 사용자 경험이 발생합니다.
이 문제를 해결하려면 개발자는 사용자가 앞뒤로 스크롤할 때 올바른 스크롤 위치를 저장, 검색 및 프롬프트하는 코드를 제공해야 합니다.
- 웹사이트 분석
페이지에 분석 코드를 추가하여 사용자는 페이지에 대한 트래픽을 추적할 수 있습니다. 그러나 SPA는 단일 페이지이기 때문에 어떤 페이지나 콘텐츠가 가장 인기 있는지 판단하기 어렵습니다. 유사 페이지가 표시될 때 이를 추적하려면 분석에 추가 코드를 제공해야 합니다.
- 안전성 문제
SPA는 다음을 통해 손상되기 쉽습니다. 크로스 사이트 스크립팅. 이를 통해 소비자는 전체 애플리케이션을 다운로드할 수 있으므로 리버스 엔지니어링을 통해 취약성을 찾을 수 있는 더 많은 기회에 노출됩니다. 이 문제를 해결하기 위해 개발자는 인증 및 입력 유효성 검사와 같은 웹 애플리케이션 보안과 관련된 모든 클라이언트 측 논리가 확인을 위해 서버에서 이중화되도록 해야 합니다. 또한 개발자는 제한된 역할 기반 액세스를 제공해야 합니다.
결론
단일 페이지 앱은 앱 경험의 진화에서 다음 단계를 표시합니다. 더 빠르고 직관적이며 사용자 지정과 같은 고급 기능과 통합할 수 있습니다. 그렇기 때문에 Gmail, Netflix 또는 Facebook의 뉴스 피드와 같이 동시 사용자가 많은 최고의 회사는 단일 페이지 아키텍처에 의존합니다. 이 기술을 구현함으로써 기업은 온라인 자산에서 더 많은 가치를 얻고 디지털 비즈니스로 새롭게 진출할 수 있습니다.
Ercole Palmeri
