WebDevCurriculum / 프로그레시브 웹앱

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다.

Introduction

• 이번 퀘스트에서는 2021년 현재 웹 프론트엔드의 많은 최신 기술 중 프로그레시브 웹앱에 관해 알아보겠습니다.

Checklist

• 웹 어플리케이션을 프로그레시브 웹앱 형태로 만들면 어떤 이점을 가질까요?

프로그레시브 웹앱(PWA)은 모바일 앱과 웹 사이의 중간 형태로, 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 어플리케이션입니다. PWA로 웹 어플리케이션을 만드는 것은 다음과 같은 이점을 가질 수 있습니다:

• 오프라인 사용 가능성: PWA는 서비스 워커라는 기술을 사용하여 오프라인에서도 동작할 수 있습니다. 이것은 사용자가 인터넷 연결 없이도 앱을 사용할 수 있다는 것을 의미합니다.
• 빠른 속도: PWA는 캐싱 및 미리 다운로드 기술 등을 사용하여 더 빠른 속도로 로드되고 작동할 수 있습니다.
• 앱 스토어 필요 없음: PWA는 앱 스토어를 통해 다운로드하거나 설치할 필요가 없습니다. 사용자는 웹 브라우저를 통해 PWA를 쉽게 액세스할 수 있습니다.
• 모바일 앱과 같은 사용자 경험: PWA는 네이티브 앱과 유사한 사용자 경험을 제공합니다. 홈 화면에 아이콘을 추가하고, 푸시 알림을 제공하며, 전체 화면 모드로 실행할 수 있습니다.
• 유지 보수 비용 절감: PWA는 하나의 코드베이스를 사용하여 모바일 앱과 웹 어플리케이션 모두를 대상으로 개발할 수 있습니다. 이것은 유지 보수 비용을 줄이고 개발자의 작업 효율성을 높일 수 있습니다.

따라서, PWA로 웹 어플리케이션을 만드는 것은 사용자 경험과 유지 보수 비용을 개선할 수 있는 효과적인 방법입니다.

 

• 서비스 워커란 무엇인가요? 웹 워커와의 차이는 무엇인가요?

서비스 워커(Service Worker)는 웹 브라우저와 백그라운드 스크립트 간의 중간 매개체 역할을 하는 웹 기술입니다. 서비스 워커는 브라우저에서 동작하며, 네트워크 요청과 응답을 가로채고, 캐싱과 오프라인 지원 기능 등을 제공합니다.

 

서비스 워커는 다음과 같은 기능을 수행합니다:

1. 오프라인 사용 가능성: 서비스 워커는 브라우저가 오프라인 상태일 때도 작동할 수 있도록 하며, 캐시된 리소스를 제공하여 사용자 경험을 개선합니다.
2. 빠른 로딩 속도: 서비스 워커는 네트워크 요청과 응답을 가로채고 캐싱을 제공하여 더 빠른 로딩 속도를 제공합니다.
3. 푸시 알림: 서비스 워커는 백그라운드에서 실행되므로, 푸시 알림과 같은 백그라운드 작업을 처리할 수 있습니다.

웹 워커(Web Worker)는 다른 스레드에서 실행되는 JavaScript 코드입니다. 웹 워커는 브라우저의 주 스레드와 별개로 실행되므로, 대규모 작업을 수행할 때 브라우저의 성능 저하를 방지할 수 있습니다.

 

서비스 워커와 웹 워커는 모두 브라우저에서 실행되는 JavaScript 코드이지만, 목적과 사용 방법이 다릅니다. 서비스 워커는 주로 오프라인 지원, 캐싱, 백그라운드 작업 처리와 같은 기능을 제공하는 반면, 웹 워커는 대규모 작업 처리와 같은 CPU 집약적인 작업을 수행하는 데 사용됩니다.

 

• PWA의 성능을 높이기 위한 방법론에는 어떤 것들이 있고, 어떤 식으로 적용할 수 있을까요?

1. 빠른 로딩 속도: PWA는 모바일 기기에서 실행되는 웹 애플리케이션입니다. 느린 로딩 속도는 사용자 경험을 저하시키고, 앱의 성능을 저하시킬 수 있습니다. 빠른 로딩 속도를 위해서는 이미지 크기를 줄이거나, 캐시를 이용하여 페이지 로딩 속도를 개선하는 등의 방법이 있습니다.
2. 캐싱: PWA는 오프라인 상태에서도 실행될 수 있어야 합니다. 이를 위해, 캐시를 이용하여 이전에 방문한 페이지를 저장해 두고, 다음에 방문할 때 빠르게 로딩되도록 할 수 있습니다. 이는 서비스 워커를 이용하여 구현할 수 있습니다.
3. 푸시 알림: PWA는 푸시 알림을 이용하여 사용자에게 메시지를 전송할 수 있습니다. 이를 위해서는 서비스 워커를 이용하여 푸시 알림을 등록하고, 사용자가 허용한 경우에만 푸시 알림을 전송할 수 있습니다.
4. 반응형 디자인: PWA는 모바일 기기에서 실행되는 웹 애플리케이션입니다. 따라서, 반응형 디자인을 적용하여 다양한 모바일 기기에서도 잘 보이도록 할 필요가 있습니다.
5. 최적화된 코드: PWA는 웹 애플리케이션으로서 실행됩니다. 따라서, 최적화된 코드를 작성하여 성능을 최적화할 필요가 있습니다. 이를 위해, 코드를 압축하거나, 불필요한 코드를 제거하는 등의 방법이 있습니다.

위의 방법론을 적용하기 위해서는, 웹 개발에 대한 기본적인 지식이 필요합니다. 또한, 서비스 워커를 이용하여 캐싱이나 푸시 알림 등을 구현할 수 있어야 합니다.