[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!

SNS 앱 예제로 배우는 프로그레시브 웹 앱

 

🎉 소개

이번에 프로그레시브 웹 앱(PWA)을 주제로 한 첫 번째 저서, "SNS 앱 예제로 배우는 프로그레시브 웹 앱"
을 출간하게 되어 간략히 소개하려고 한다.

본 블로그에도 프로그레시브 웹 앱에 대해 간략히 알아볼 수 있는 강좌를 작성했었는데, 프로그레시브 웹 앱에 대해 보다 더 다양하고 자세한 내용을 다룰 수 있는 내용을 정리하여 집필하게 되었다.

📖 책 보러 가기

책에 대한 자세한 내용은 아래 온라인 서점에서 확인해볼 수 있다.

YES24
교보문고
알라딘
인터파크도서

프로그레시브 웹 앱의 전반적인 내용과 다양한 핵심 기능을 밑바닥부터 구현해보며 한 걸음 더 나아갈 수 있도록 구성되어있다.

오프라인 환경에서 웹 페이지를 사용하거나 게시물에 대한 백그라운드 동기화 작업 수행, 그리고 좋아요 알림 기능까지 모두 웹 기술만을 사용하여 개발하고 활용하는 방법에 대해 알아보는 내용으로 구성되어있다.

모든 실습을 통해 구현하는 기능들은 점진적인 향상을 고려하여 구현하기 때문에, 최종 결과물을 IE11에서도 정상적으로 사용할 수 있는 모습을 확인할 수 있다.

단순히 프로그레시브 웹 앱과 관련된 기술적인 내용만 다루는 것이 아니라, 웹 기술의 발전과 프로그레시브 웹 앱의 개념, PWA로 구현된 웹 앱 사례와 이를 통해 얻을 수 있던 이점 등 기술 도입 이전에 고려해야 할 사항들에 대해서도 간략히 소개한다.

전반적인 내용은 일반적인 웹 앱 예제인 Paper를 프로그레시브 웹 앱으로 발전시켜나가는 방향으로 실습이 진행된다.

실습을 통해 배울 수 있는 주요 내용은 아래와 같으며, 이론 > 기본 > 활용 순서로 내용이 전개된다.

[간단한 SNS 웹 앱 - Paper 미리 보기]

최종 모습 살펴보기

 

실습을 위해 기본 제공되는 Paper 서버

 

좋아요 푸시 알림

 

iOS / Android / Window / macOS 등 다양한 환경에 PWA를 설치하여 사용할 수 있다

[주요 내용]

서비스 워커(Service Worker)
오프라인 캐싱(캐시 스토리지)
IndexedDB
웹 앱 매니페스트(Web App Manifest)
백그라운드 동기화
서비스 워커와 페이지간 메시지 통신
푸시 메시지 (Firebase + 서버 연동)

(부록)
ES6 자바스크립트 살펴보기
라이트하우스(Lighthouse)
워크 박스(Workbox)

---

이처럼 다양한 내용에 대해 상세하게 살펴보며, 이론적인 내용은 최대한 쉽게 이해할 수 있도록 100장가량의 그림 자료가 준비되어 있다.
(책 전체 이미지 수 188장, 그중 100장가량의 이미지가 이해를 돕기 위한 자료)

다만, 웹 개발을 한 번도 해보지 않은 초보자분들에겐 다소 어려울 수 있으며, 미리 준비되어있는 웹 앱을 하나씩 개선해나가기 때문에 웹 개발에 대한 기본적인 지식(약간의 HTML, CSS, JS)이 필요하다.

---

더 많은 내용을 전달하고 싶으나 소개는 이쯤에서 줄이도록 하겠다.

실습을 진행하며 하나하나 직접 구현해본다면, 프로그레시브 웹 앱의 전반적인 구성과 각 기능이 어떻게 동작하고 구현/활용해야 하는지에 대한 방향을 잡을 수 있을 것으로 기대한다.

많은 관심과 피드백 부탁하며 블로그에 방문해주는 모든 분들께 감사의 인사를 올린다.


[책 보러 가기]
YES24
교보문고
알라딘
인터파크도서