Home-theater-designers
단일 페이지 애플리케이션(SPA) 및 프로그레시브 웹 앱(PWA)은 웹에 혁명을 일으키고 있습니다. 둘 다 비슷해 보이지만 그렇지 않은 새로운 기술입니다. 얼굴에서 사람들은 종종 그것들을 서로 바꿔서 사용합니다.
더 나은 이해를 위해 각각의 핵심 기능과 아키텍처를 파헤쳐 보겠습니다.
단일 페이지 응용 프로그램이란 무엇입니까?
SPA는 말 그대로 단일 페이지 내에서 콘텐츠를 동적으로 로드하는 웹 사이트입니다. 본질적으로 상호 작용해야 하는 모든 형태의 콘텐츠와 요소가 한 페이지에 늘어납니다. 즉, 이러한 웹 사이트를 탐색할 때 별도의 DOM(문서 개체 모델)을 로드할 필요가 없습니다.
즉, 목표는 한 번에 사용하고 볼 필요가 있는 모든 것을 로드하여 사용자를 동일한 페이지에 유지하는 것입니다. 이는 더 나은 사용자 경험으로 이어집니다.
반면에 사용자 인터페이스는 SPA를 설계하고 배치하는 방법에 따라 다릅니다. 이것은 확장된 페이지를 탐색으로 분할하려는 이유로 요약됩니다. 콘텐츠는 여전히 한 번만 로드되므로 단일 페이지가 되는 것은 아닙니다.
따라서 SPA에서 탐색할 때 단일 DOM에서 미리 로드된 콘텐츠를 탐색하고 잘못 믿었을 수 있는 다른 DOM을 방문하지 않습니다.
SPA를 별도의 콘텐츠 섹션으로 나누려면 일반적으로 JavaScript 보기를 사용하여 각 섹션에 URL을 제공해야 합니다. NS 데이터 링크 커넥터는 해당 섹션을 기본 DOM에 연결하고 비동기식으로 액세스할 수 있도록 합니다.
다른 기술과 같은 같이 그리고 느릅나무 스파 자바스크립트는 SPA를 만들기 위한 가장 일반적인 프로그래밍 언어입니다.
관련: 배울 가치가 있는 JavaScript 프레임워크
자바스크립트는 비동기/대기 하나의 입력이 다른 요청의 출력을 차단하지 않고 동적 및 정적 콘텐츠를 비동기적으로 로드할 수 있는 기능입니다. 따라서 SPA는 비차단 입출력(I/O) 시스템에서 작동합니다.
즉, ReactJS, Vue.js, AngularJS, Ember.js 및 Backbone.js와 같은 JavaScript 프레임워크는 모두 SPA의 빠른 개발을 지원합니다. 시작하려면 이 초보자용 Vue.js 개요를 살펴보세요.
속도를 제공하기 때문에 대부분의 엔터프라이즈 앱은 웹 사이트를 단일 페이지로 변환하는 아이디어를 채택했습니다. Netflix, YouTube, PayPal, Facebook, Instagram, Twitter 및 Pinterest는 모두 SPA의 예입니다.
프로그레시브 웹 앱이란 무엇입니까?
PWA는 기능에서 표준 및 최신 웹 브라우저 지침을 사용하는 웹 응용 프로그램 또는 소프트웨어입니다. PWA는 SPA와 달리 확장성, 사용자 적응성, 초고속, 설치 및 기본 기능을 제공하는 몇 가지 지침을 기반으로 아키텍처를 구성합니다.
Google에서 2015년에 도입한 PWA의 목표는 사용자와 직접적이고 점진적으로 대화하는 앱을 구축하는 것입니다. 네트워크 연결이 불량하거나 존재하지 않는 경우에도 사용자가 앱을 계속 사용하도록 하는 것을 목표로 합니다.
변함없이 PWA는 필요한 모든 것을 순식간에 제공합니다. SPA의 일반적인 초기 콘텐츠 로딩 특성을 거치지 않습니다.
결과적으로 사용자는 앱이 기본 앱인 것처럼 상호 작용합니다. PWA의 핵심 특징은 설치 가능성이지만 설치하지 않고도 웹 브라우저를 통해 계속 액세스할 수 있습니다. 즉, 다른 웹사이트와 마찬가지로 PWA에도 URL이 있어야 합니다.
관련된: 프로그레시브 웹 앱이란 무엇이며 어떻게 설치합니까?
프로그레시브 웹 앱은 눈 깜짝할 사이에 콘텐츠를 제공하는 백그라운드 도우미가 있다는 점에서 독특합니다. 따라서 웹 앱에 액세스하기 전에도 콘텐츠와 구성 요소를 쉽게 사용할 수 있습니다. 이를 통해 매우 빠르고 신뢰할 수 있습니다.
Spotify, Slack 및 Uber와 같은 앱이 PWA의 예입니다.
PWA에는 일반적으로 공통 아키텍처 규칙이 있습니다. PWA가 정상적으로 작동하려면 다음 속성이 있어야 합니다.
1. 노동자
서비스 작업자는 PWA에서 콘텐츠를 쉽게 제공합니다. 네트워크 연결이 없을 때 앱이 관련 캐시된 데이터를 로드할 수 있는지 확인합니다. 이것은 오프라인 요청에 대한 응답을 저장하는 Cache API의 도움으로 가능합니다. 따라서 작업자는 탐색 및 사용자 요청을 방해합니다.
관련된: CPU 캐시는 어떻게 작동합니까?
사용 약속하다 객체를 사용하면 작업자는 사용자가 최종 요청하는 경우(오프라인 상태일 때도) 이미 다운로드한 콘텐츠를 전달할 수 있습니다. 그러나 서비스 워커는 PWA에 비차단 속성을 부여합니다.
2. 보안 컨텍스트
서비스 작업자는 전달된 콘텐츠의 기밀성을 위해 보안 연결(HTTPS)이 필요합니다. 요청을 보내면 작업자가 PWA와 브라우저 간에 보안 통신을 설정합니다. 따라서 보안 컨텍스트는 PWA의 MITM(Man-in-the-Middle attack)과 같은 기밀 침해를 방지합니다.
3. 웹 애플리케이션 매니페스트 파일
웹 매니페스트는 PWA의 특성을 정의하는 JSON 파일입니다. PWA 콘텐츠에 액세스, 검색 및 사용하기 위한 전제 조건을 자세히 설명합니다. 일반적으로 앱 이름, 해당 URL 및 구성 요소가 포함됩니다. 궁극적으로 매니페스트 파일에는 웹 앱을 설치 가능한 애플리케이션으로 바꾸는 데 필요한 정보가 포함되어 있습니다.
PWA와 SPA의 유사점은 무엇입니까?
PWA와 SPA의 배경 논리는 다르지만 여전히 몇 가지 공통점만 공유합니다. 전송 속도는 크게 다를 수 있지만 기존 웹 사이트는 속도와 접근성 면에서 여전히 뒤떨어져 있습니다.
둘 다 반응형 인터페이스를 제공하여 사용자 경험을 개선하는 것을 목표로 합니다.
둘 다 앱 경험을 제공하기 때문에 혼동하기 쉽고 상호 작용할 때 어느 것이 무엇인지 거의 알 수 없습니다. 마지막으로 이 메모에서 둘 다 액세스하려면 URL이 필요합니다.
SPA와 PWA의 주요 차이점
PWA와 SPA는 공통적으로 몇 가지 눈에 띄는 특성을 공유할 수 있지만 두 가지는 다릅니다. 주목해야 할 주요 기능 차이점은 다음과 같습니다.
단일 페이지 애플리케이션의 주요 기능
- 브라우저를 통해서만 액세스할 수 있습니다.
- 권장되지는 않지만 보안되지 않은 네트워크(HTTP)를 통해 서비스를 제공할 수 있습니다.
- 서비스 워커가 필요하지 않습니다.
- SPA에는 JSON 매니페스트 파일이 없으므로 제거할 수 있습니다.
- 단일 페이지여야 합니다.
- 네트워크가 없을 때는 액세스할 수 없습니다.
프로그레시브 웹 앱의 주요 기능
- 브라우저를 통해 액세스하는 것은 설치가 가능하기 때문에 옵션입니다.
- 모든 PWA에는 서비스 워커가 필요하며 보안 네트워크(HTTPS)를 통해 요청해야 합니다.
- 응답은 캐시되어 다음을 통해 전달됩니다. 약속하다 물체.
- 네트워크 연결이 없는 경우에도 액세스할 수 있습니다.
- SPA보다 빠릅니다.
- 항상 매니페스트 파일이 있으므로 다운로드하고 설치하고 쉽게 액세스할 수 있습니다.
- PWA는 단일 페이지 응용 프로그램이 아닐 수 있습니다.
SPA 및 PWA가 웹사이트 제공에 영향을 미치고 있습니다
현재 많은 기업 웹사이트가 이러한 새로운 기술을 채택하면서 서비스 제공을 향한 긍정적인 변화가 일어나고 있습니다.
더 중요한 것은 PWA를 채택하면 일반적인 사용자 경험이 향상되어 결과적으로 대부분의 엔터프라이즈 앱에서 이탈률이 감소하고 수익이 증가한다는 것입니다. 반면에 SPA는 소셜 미디어를 활성화하여 사람들이 느린 페이지 로드 없이 웹을 통해 쉽게 상호 작용할 수 있도록 합니다.
Windows 10을 더 잘 보이게 하는 방법공유하다 공유하다 트위터 이메일 동기 프로그래밍과 비동기 프로그래밍: 어떻게 다른가요?
다음 프로젝트에 동기 또는 비동기 프로그래밍을 사용해야 합니까? 여기에서 알아보십시오.
다음 읽기 관련 항목- 프로그램 작성
- 프로그램 작성
- 앱 개발
Idowu는 스마트 기술과 생산성에 대한 열정을 가지고 있습니다. 여가 시간에는 코딩을 하거나 지루할 때 체스판으로 전환하지만 가끔씩 일상에서 벗어나는 것도 좋아합니다. 사람들에게 현대 기술에 대한 방법을 보여주고자 하는 그의 열정은 그가 더 많은 글을 쓰도록 동기를 부여합니다.
Idowu Omisola가 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.