구글이 주도하고 MS와 삼성이 주목했다! 웹과 앱을 한방에 만드는 프로그레시브 웹앱, 한 권으로 끝내기! 이 책은 글로벌 IT 기업들이 주목하는 차세대 웹 기술인 프로그레시브 웹앱(PWA)을 다룹니다. 뷰와 뷰티파이, ES6 버전 이상의 모던 자바스크립트를 활용해 기본적인 반응형 웹을 개발하고, 여기에 PWA(progressive web apps)의 핵심 요소를 추가함으로써 데스크톱이나 모바일 등 어디서나 실행되는 웹앱을 만듭니다. 또한 파이어베이스를 활용해 실시간 데이터베이스 연동과 푸시 알림, 구글 인증 등의 기능을 구현하면서 서버리스 웹 애플리케이션 개발을 경험할 수 있으며, PWA를 하이브리드 앱으로 만들어 구글 플레이에 직접 배포하는 방법까지 안내합니다. 독자는 스위프트나 코틀린, 자바와 같은 언어를 새로 배우지 않고도 모던 웹 기술로 네이티브 앱 수준의 성능과 사용자 경험을 제공하는 모바일 앱을 개발하고 배포하는 방법을 배웁니다. 프런트엔드 개발자는 물론 웹 디자이너도 쉽게 배운다! 프로그레시브 웹앱부터 하이브리드 앱 개발 및 배포까지 한번에! 웹 전문가들은 "앞으로 웹은 프로그레시브 웹앱이어야 한다"라고 말합니다. 즉, 네이티브 앱보다 편리하게 설치하고 푸시 알림이 가능하며, 기기의 자원을 활용할 수 있고 오프라인에서도 실행되는 프로그레시브 웹앱이야 말로 모바일 퍼스트 시대에 웹의 미래라고 말합니다. 프로그레시브 웹앱은 성능이나 사용자 경험, 발견성, 개발 효율 면에서 기존 웹뿐만 아니라 네이티브 앱을 만들던 개발자에게도 충분히 매력적입니다. 이 책에서는 프로그레시브 웹앱을 만들고 하이브리드 앱으로 배포하는 방법을 다룹니다. 모던 웹 기술의 핵심을 쉽게 풀어내서 HTML과 자바스크립트의 기본만 알아도 완성된 웹앱을 만들 수 있습니다. 따라서 프런트엔드 개발자뿐만 아니라 웹 디자이너도 웹앱 만들기에 도전할 수 있습니다. 특히 소스를 한 줄 한 줄 세세하게 설명하는 부분에서, 잊을만 하면 한 번 더 떠오르게 해주는 친절함에서 독자를 향한 저자의 진정성을 느낄 수 있습니다.

첫째마당 프로그레시브 웹앱 시작하기 ==================== [01] 헬로! 프로그레시브 웹앱 01-1 프로그레시브 웹앱이 뭐예요? 01-2 프로그레시브 웹앱을 대표하는 6가지 핵심 기술 01-3 비주얼 스튜디오 코드 설치하기 01-4 '안녕하세요' 예제 만들기 [02] 모던 자바스크립트 꼭 필요한 것만 배우기 02-1 재활용할 수 있는 블록 함수 02-2 변수 선언 02-3 화살표 함수 02-4 모듈 내보내기와 가져오기 02-5 콜백 함수와 비동기 처리 방식 02-6 JSON과 Fetch API 02-7 Promise와 비동기 처리 방식 02-8 await 연산자와 async 비동기 함수 미션 코딩! 입력된 숫자의 범주 판별하기 [03] 순수 자바스크립트로 PWA 만들기 03-1 '안녕하세요! PWA by JS' 구경하기 03-2 매니페스트 작성하기 03-3 메인 화면 작성하기 03-4 서비스 워커 만들고 실행하기 미션 코딩! 캐시 변경하고 서비스 워커 다시 등록하기 ==================== 둘째마당 프레임워크로 PWA 손쉽게 디자인하기 ==================== [04] 뷰 기초 쌓기 04-1 뷰, 자바스크립트 프레임워크의 절대 강자 04-2 '안녕하세요!' 예제 만들기 04-3 단방향 바인딩과 v-bind 디렉티브 04-4 양방향 바인딩과 v-model 디렉티브 04-5 조건 판단과 v-if, v-else 디렉티브 04-6 반복문과 v-for 디렉티브 04-7 이벤트 핸들러 실행과 v-on 디렉티브 미션 코딩! v-for 디렉티브로 고객 정보 출력하기 [05] 뷰 고급 기능 익히기 05-1 복잡한 로직과 computed 속성 05-2 이벤트 핸들러 로직과 methods 속성 05-3 컴포넌트로 HTML 엘리먼트 만들기 05-4 컴포넌트 속성 props 05-5 상탯값 관리와 Vuex 05-6 내비게이션과 라우터 05-7 새로 고침이 필요 없는 SPA 만들기 미션 코딩! 카운터 컴포넌트 프로그램 만들기 [06] 뷰티파이 기초 쌓기 06-1 뷰티파이, 뷰 최고의 UI 프레임워크 06-2 기본 레이아웃 만들기 1 06-3 기본 레이아웃 만들기 2 06-4 카드 UI 만들기 06-5 그리드 기본 원리 06-6 반응형 그리드 06-7 리스트와 아이콘 사용법 미션 코딩! 플로팅 버튼 UI 컴포넌트 넣기 [07] 뷰티파이 고급 기능 익히기 07-1 바닥 내비게이션 07-2 탐색 서랍 07-3 라우터로 멀티 페이지 관리하는 SPA 만들기 07-4 Vuex로 상탯값 관리하는 SPA 만들기 미션 코딩! 매개변수만으로 상탯값 관리하기 [08] 뷰 프레임워크로 PWA 만들기 08-1 '반가워요! PWA by VueJS' 구경하기 08-2 프로젝트 만들고 매니페스트 작성하기 08-3 워크박스로 오프라인 관리하기 08-4 앱 실행 화면 만들기 08-5 HTTPS로 파이어베이스 호스팅에 PWA 배포하기 08-6 PWA 성능 테스트하기 미션 코딩! 기본 레이아웃을 적용한 앱 만들어 배포하기 ==================== 셋째마당 PWA 실전 앱 만들기 ==================== [09] To-Do 앱 만들기 09-1 To-Do 앱 구경하기 09-2 매니페스트 작성하기 09-3 워크박스로 오프라인 관리하기 09-4 파이어베이스 실시간 DB 준비하기 09-5 앱 실행 화면 만들기 [10] 사진 갤러리 앱 만들기 10-1 사진 갤러리 앱 구경하기 10-2 매니페스트 작성하기 10-3 워크박스로 런타임 캐시 관리하기 10-4 앱 실행 화면 만들기 10-5 모바일 기기에서 로컬 사이트 테스트하기 [11] 카메라 사진 갤러리 앱 만들기 11-1 카메라 사진 갤러리 앱 구경하기 11-2 매니페스트 작성하기 11-3 파이어베이스 스토리지 DB 준비하기 11-4 앱 실행 화면 만들기 11-5 컴포넌트 작성하기 11-6 워크박스로 서비스 워커에서 캐시 관리하기 [12] 구글 로그인 서비스 만들기 12-1 구글 로그인 서비스 구경하기 12-2 매니페스트 작성하기 12-3 파이어베이스 인증 사용하기 12-4 앱 실행 화면 만들기 12-5 스토어 작성하기 12-6 컴포넌트 작성하기 [13] 푸시 알림 서비스 만들기 13-1 푸시 알림 서비스 구경하기 13-2 매니페스트 작성하기 13-3 파이어베이스 준비하기 13-4 앱 실행 화면 만들기 13-5 컴포넌트 작성하기 13-6 파이어베이스 서버 함수 작성하기 13-7 워크박스로 서비스 워커에서 알림 메시지 받기 [14] 오프라인 동기화 기능 만들기 14-1 오프라인 동기화 구경하기 14-2 매니페스트 작성하기 14-3 클라우드 파이어스토어 준비하기 14-4 앱 실행 화면 만들기 14-5 컴포넌트 작성하기 ==================== 넷째마당 PWA를 하이브리드 앱으로 배포하기 ==================== [15] 코르도바로 하이브리드 앱 만들기 15-1 하이브리드 앱이란? 15-2 하이브리드 앱 실전 예제 5가지 15-3 'Hello Hybrid' 앱 만들기 ― 준비 15-4 'Hello Hybrid' 앱 만들기 ― 제작 미션 코딩! 사진 갤러리 안드로이드 앱 만들기 [16] 웹앱을 안드로이드 앱으로 만들기 16-1 To-Do 안드로이드 앱 만들기 16-2 아파치 코르도바 플러그인 사용하기 16-3 모바일 기기 상태를 체크하는 안드로이드 앱 만들기 미션 코딩! 카메라 사진 갤러리 안드로이드 앱 만들기 [17] 구글 플레이 스토어에 앱 등록하기 17-1 안드로이드 앱 번들 준비하기 17-2 구글 플레이 스토어에 앱 등록하기 찾아보기