Do it! 프로그레시브 웹앱 만들기 (반응형 웹 개발부터 하이브리드 앱 배포까지 PWA 완전 정복!)

김응석

교수이기전에개발팀장과기술이사로IT산업현장을경험한전문가다.전국100여개대학에서강의교재로채택된도서를집필한IT전문저술가이기도하다.한양대학교에서컴퓨터공학을전공한후같은대학원에서멀티미디어를공부했다.인문학과예술이정보기술과결합될때놀라운창조력이나올수있음에매료되어숭실대학교대학원에서미디어아트로박사학위를받았다.현재안산대학교멀티미디어디자인과에서정보디자인,웹UI/UX디자인을가르치고있다.교수들에게학습방법론을지원하는교수학습지원센터장과융복합교육과정정책위원을역임하며가르치고배우는방법을연구하고있다.프로그레시브웹앱개발과UI/UX디자인을위한‘CODE*DESIGN웹앱(code-design.web.app)’커뮤니티카페에서모던웹앱개발과디자인방법을안내하는데힘쓰고있다.
저서로는《Doit!쉽게배우는웹앱&하이브리드앱》,《구글완전활용법》,《新한글비주얼베이직6》,《안녕하세요터보C》,《안녕하세요컴퓨터길라잡이》등이있다.

머리말
이책의구성
베타테스터의한마디

====================
첫째마당프로그레시브웹앱시작하기
====================
[01]헬로!프로그레시브웹앱
01-1프로그레시브웹앱이뭐예요?
01-2프로그레시브웹앱을대표하는6가지핵심기술
01-3비주얼스튜디오코드설치하기
01-4‘안녕하세요’예제만들기

[02]모던자바스크립트꼭필요한것만배우기
02-1재활용할수있는블록함수
02-2변수선언
02-3화살표함수
02-4모듈내보내기와가져오기
02-5콜백함수와비동기처리방식
02-6JSON과FetchAPI
02-7Promise와비동기처리방식
02-8await연산자와async비동기함수
미션코딩!입력된숫자의범주판별하기

[03]순수자바스크립트로PWA만들기
03-1‘안녕하세요!PWAbyJS’구경하기
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-4Vuex로상탯값관리하는SPA만들기
미션코딩!매개변수만으로상탯값관리하기

[08]뷰프레임워크로PWA만들기
08-1‘반가워요!PWAbyVueJS’구경하기
08-2프로젝트만들고매니페스트작성하기
08-3워크박스로오프라인관리하기
08-4앱실행화면만들기
08-5HTTPS로파이어베이스호스팅에PWA배포하기
08-6PWA성능테스트하기
미션코딩!기본레이아웃을적용한앱만들어배포하기

====================
셋째마당PWA실전앱만들기
====================
[09]To-Do앱만들기
09-1To-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‘HelloHybrid’앱만들기-준비
15-4‘HelloHybrid’앱만들기-제작
미션코딩!사진갤러리안드로이드앱만들기

[16]웹앱을안드로이드앱으로만들기
16-1To-Do안드로이드앱만들기
16-2아파치코르도바플러그인사용하기
16-3모바일기기상태를체크하는안드로이드앱만들기
미션코딩!카메라사진갤러리안드로이드앱만들기

[17]구글플레이스토어에앱등록하기
17-1안드로이드앱번들준비하기
17-2구글플레이스토어에앱등록하기

찾아보기

프런트엔드개발자는물론웹디자이너도쉽게배운다!
프로그레시브웹앱부터하이브리드앱개발및배포까지한번에!
웹전문가들은“앞으로웹은프로그레시브웹앱이어야한다”라고말합니다.즉,네이티브앱보다편리하게설치하고푸시알림이가능하며,기기의자원을활용할수있고오프라인에서도실행되는프로그레시브웹앱이야말로모바일퍼스트시대에웹의미래라고말합니다.프로그레시브웹앱은성능이나사용자경험,발견성,개발효율면에서기존웹뿐만아니라네이티브앱을만들던개발자에게도충분히매력적입니다.

이책에서는프로그레시브웹앱을만들고하이브리드앱으로배포하는방법을다룹니다.모던웹기술의핵심을쉽게풀어내서HTML과자바스크립트의기본만알아도완성된웹앱을만들수있습니다.따라서프런트엔드개발자뿐만아니라웹디자이너도웹앱만들기에도전할수있습니다.특히소스를한줄한줄세세하게설명하는부분에서,잊을만하면한번더떠오르게해주는친절함에서독자를향한저자의진정성을느낄수있습니다.

====================
기초부터실무까지6가지앱을만들어보자!
====================
이책에서는앱을개발하고운용할때가장많이사용하는기능을엄선해6가지프로그레시브웹앱프로젝트에담았습니다.또한파이어베이스를활용해호스팅,실시간데이터베이스,회원인증관리,이미지업로드등을적용하는방법도소개합니다.다음주소에서독자여러분이만들프로그레시브웹앱을미리확인해보세요.
1.사진갤러리:https://pwa-gallery-pic.web.app/
2.To-Do리스트:https://pwa-to-do.web.app/
3.카메라사진갤러리:https://pwa-camera.web.app/
4.이메일-구글인증로그인:https://pwa-auth-login.web.app/
5.푸시알림서비스:https://pwa-notification-push.web.app
6.오프라인동기화:https://pwa-offline-sync.web.app/

====================
뷰&뷰티파이를이용한모던웹개발과디자인!
====================
이책에서는뷰와뷰티파이로멋진UI를적용한PWA를만듭니다.모던웹애플리케이션의큰흐름인싱글페이지앱(SPA,singlepageapp)은새로고침이나화면간이동에서발생하는성능문제를근본적으로해결해줍니다.SPA를구현하려면모던자바스크립트(ES6버전이상)를적용해야하는데,이때자바스크립트개발자에게이미익숙한웹기술을그대로활용할수있는뷰(Vue.js)프레임워크를활용하면더유리하게시작할수있습니다.또한뷰티파이도사용합니다.뷰티파이(Vuetify.js)는앱을제작할때구글의공식머티리얼디자인스펙을적용해주는뷰기반의UI라이브러리입니다.

====================
기본태그만알아도쉽게따라할수있는실습구성!
====================
각각의프로그레시브웹앱개발프로젝트는먼저저자가제공한소스파일을실행해확인하고,이후에직접따라서만들어보는순서로진행합니다.또한CLI환경에익숙하지않은독자도실습을쉽게따라할수있도록템플릿을함께제공합니다.이템플릿을열어서책에표시한단계를따라가면누구나쉽게프로그레시브웹앱을만들수있습니다.템플릿에는전체소스코드는물론앱에표시되는이미지와아이콘까지모두담았으므로실습하기전에따로준비해야하는번거로움이없습니다.

====================
하이브리드앱만들고구글플레이에배포까지완벽하게마무리!
====================
프로그레시브웹앱은웹에서바로설치할수있지만앱스토어에올려서내려받게할수도있습니다.이책에서는프로그레시브웹앱에서멈추지않고똑같은코드를안드로이드앱으로변환해서구글플레이에등록하는과정까지세세하게살펴봅니다.이로써앱을만들고배포하는전과정을경험할수있습니다.다음주소에접속하면이책에서만든프로그레시브웹앱을안드로이드앱으로변환해구글플레이에등록해둔것을확인할수있습니다.안드로이드폰이라면내려받아설치할수도있습니다.
ㆍhttps://play.google.com/store/apps/details?id=io.cordova.todo

★★★이책에서다루는14가지핵심주제★★★
1.모던자바스크립트ES6+의필수기능||2.뷰,뷰티파이기초&고급||
3.구글머티리얼디자인스펙2||4.반응형웹프로그래밍||
5.파이어베이스실시간DB||6.워크박스런타임캐시||
7.모바일하드웨어제어||8.이메일-구글인증||9.푸시알림||
10.오프라인동기화||11.아파치코르도바로하이브리드앱만들기||
12.PWA→네이티브앱변환||13.구글플레이스토어에배포||14.서버리스프로그래밍

★★★책을먼저읽어본베타테스터의한마디★★★
저는프론트앤드개발자로일하고있습니다.뷰를이용해웹화면을구축해본적은있지만,PWA와하이브리드앱을제작한경험은처음이었습니다.이책을읽으며예제를쭉따라하다보니,어느샌가멋진앱을제작하고있는제자신을보았습니다.실제앱제작에필요한모든것이한권에압축된느낌이었습니다.웹을다뤄본경험이있다면이책만으로도자신이원하는앱을손쉽게만들수있습니다.강추합니다!
-배으뜸(프런트엔드개발자)

이책은PWA기본개념과개발에필요한ES6문법,뷰와뷰티파이프레임워크로PWA를좀더쉽게배울수있습니다.다양한실전예제로PWA를익힐수있으며개발부터배포,테스트방법까지입문자가실습할수있게잘구성되어있습니다.웹개발기술을활용해프로그레시브웹앱을구현하는방법을배우고싶다면좋은입문서가될것입니다.
-이석곤(15년차개발자)

ㆍ네이티브앱과모바일웹앱,그리고프로그레시브웹앱까지구분과장단점이잘설명되어서좋았어요.
ㆍ개발환경을준비하는과정이단계별로잘설명되어있어서어렵지않게진행할수있었어요.
ㆍ일단두가지는확실하게얻고갑니다.서비스워커와매니페스트!(PWA의핵심이라죠?)
ㆍ뷰티파이에대해처음알았는데특징을잘설명하고있어빨리이해할수있었어요.
ㆍ뷰티파이를이용할때상태관리와라우터등의기능을조금더심도있게다뤄서좋았습니다.
ㆍVuex구조그림이좋았어요.실무에서꼭쓰이는로그인연동을세세하게설명해서좋았어요.
ㆍVuex,라우터등뷰의고급기능을실제프로그램에서어떻게사용하는지코드로이해는것이좋았습니다.
ㆍTo-Do앱에서CRUD의전과정을다뤄서좋았습니다.
ㆍ카메라설정과워크박스런타임캐시설정이자세하여좋았어요.
ㆍ파이어베이스는신의한수였어요.실전처럼느껴졌어요.파이어베이스만다룬책이없는데기대이상입니다.
ㆍ플리커같은나만의앱을만들수있는예제가실용적이어서좋았습니다.
ㆍngrok로외부에서로컬주소로테스트할수있는방법을배워서좋았습니다.오~놀라워요.엄청자주쓸듯!
ㆍ특히앱을만들어서파이어베이스에호스팅과배포하고성능테스트하는방법까지배울수있어전체흐름을이해하기에좋았습니다.
ㆍ구글플레이스토어에앱을등록하는절차까지자세하게알려줘서좋았어요.

★★★이런사람이읽으면좋아요★★★
ㆍHTML,CSS,JavaScript등으로기본적인웹페이지를만들어본경험은있어야해요.
ㆍES6+자바스크립트를사용할줄알면좋지만,이책의02장에서핵심을요약해서다루니문제없어요.
ㆍ뷰와뷰티파이를사용할줄알면좋지만,이책의04~07장에서핵심적으로다루니문제없어요.
ㆍ웹프런트엔드개발자가자바나코틀린,스위프트를배우지않고모바일앱을만들고싶을때좋아요.
ㆍ생산성을높이면서도성능은포기할수없는모바일앱개발자에게도움이돼요.
ㆍ‘디자인’중심에서‘설계’중심으로전환하려는웹디자이너도충분히따라할수있어요.
ㆍ모던웹기술과모바일대응전략에관심이있는웹기획자,프로젝트매니저(PM),프로덕트오너(PO)등이읽어도좋아요.

★★★독자학습지원★★★
이지스퍼블리싱에서운영하는‘두잇스터디룸’에서이책을읽는친구들과함께공부해보세요.스스로일정을계획하고스터디노트를작성하면선물로다른책을보내드려요.
ㆍ두잇스터디룸:cafe.naver.com/doitstudyroom

이책의전체실습파일은이지스퍼블리싱홈페이지자료실또는저자가운영하는커뮤니티카페에서내려받을수있어요.커뮤니티카페에서는질의응답과웹앱개발관련최신소식도얻을수있어요.
ㆍ이지스퍼블리싱홈페이지:www.easyspub.co.kr
ㆍCODE*DESIGN웹앱:code-design.web.app