[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

교보문고

알라딘

인터파크도서

 

 

저작자표시비영리동일조건

• 카카오스토리
• 트위터
• 페이스북

'Web' 카테고리의 다른 글

[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!  (2)	2020.07.31
[WWDC20] Safari Web Extension/사파리 웹 확장 살펴보기  (0)	2020.06.30
[PWA] 프로그레시브 웹 앱 시작하기 (6) - Push, 푸시 알림  (15)	2019.08.27
[PWA] 프로그레시브 웹 앱 시작하기 (5) - Push, 푸시 알림  (23)	2019.08.11
[PWA] 프로그레시브 웹 앱 시작하기 (4) - 서비스워커 상태  (7)	2019.01.10
[PWA] 프로그레시브 웹 앱 시작하기 (3) - 리소스 캐싱 및 Fetch  (4)	2019.01.10