PWA 시작하기 - 웹 기술로 앱을 만들자

PWA 시작하기 - 웹 기술로 앱을 만들자

(6개의 수강평)

331명의 수강생
55,000원
지식공유자 · 장기효(캡틴판교)
36회 수업 · 총 3시간 29분 수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 '초급'

PWA 시작하기

Web 기술로 모바일 App 을 만들수 있는 PWA! 2018년에 주목할 웹 기술로 가장 먼저 거론되는 프로그레시브 웹 앱(Progressive Web App) 학습 강좌입니다.

HTML, CSS, 자바스크립트로 어떻게 모바일 애플리케이션 느낌이 나는 웹 애플리케이션을 만들 수 있는지 궁금하신가요?
프로그레시브 웹 앱이 발전해온 시대적 배경과 주요 특징을 배우고, 주요 기술들로 실제 프로그레시브 웹 앱을 만들어보세요.
전체적인 강의 방식은 코드 중심의 학습형 강좌 형태로 구성되어 있습니다.

자바스크립트 입문자도 듣기 쉽게끔 최대한 쉽고 자세하게 설명합니다.
웹 개발자들의 새로운 무기! 프로그레시브 웹 앱을 재밌게 배워보세요 :)
강좌는 크게 3가지 파트로 나뉩니다.
  • 프로그레시브 웹 앱 시연 및 소개
  • 웹 앱 매니페스트 파일 제작하기
  • 서비스 워커 다루기
 

 어떤 걸 배우나요?

프로그레시브 웹 앱의 등장 배경부터 실제로 구현하기 위해서 필요한 기술들을 배웁니다. 웹 앱 매니페스트 파일, 서비스 워커 등을 배우면서 제작할 때 실제로 마주치는 문제점들과 디버깅을 쉽게 하는 방법에 대해서 2년간 쌓아온 노하우를 공유합니다.

 누구에게 도움이 되나요?

  • 모바일 기기에서도 사용성이 뛰어난 웹 애플리케이션을 만들고 싶은 프런트엔드 개발 입문자
  • HTML, CSS, Javascript로 모바일 앱을 만들어보고 싶은 웹 개발자
  • 웹 페이지의 성능과 사용자 경험을 높이고 싶은 프런트엔드 개발자, 퍼블리셔
  • 웹 기술 밖에 모르는데 회사에서 모바일 앱 제작하라고 강요받은 퍼블리셔
  • 하이브리드 앱은 이제 벗어나고 싶다 하는 하이브리드 앱 개발자

 이미 대세인 기술 PWA

 강좌 특징

배운 내용을 바로바로  코드로 구현하는 실습 중심의 온라인 강좌입니다. PWA에 대한 개념을 잡고 나면 바로 주요 기술 요소들을 이용하여 프로그레시브 웹 앱을 만들면서 배운 내용들을 체화합니다. 공식 문서에서 가르쳐 주지 않는 디버깅 요령과 상세한 코드 설명은 이 강좌에서만 접할 수 있습니다 :)

지식공유자 소개

장기효(캡틴 판교)
  • 구글 PWA 공식 문서 한글 번역
  • 패스트 캠퍼스 Vue로 구현하는 PWA 캠프 강사 (2017 ~ 현재)
  • 실무에서 PWA를 적용한 경험을 바탕으로 기업 및 교육 기관 강의 (2016 ~ 현재)
  인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

교육과정

모두 펼치기 36 강의 3시간 29분
섹션 0. 강의소개
3 강의 04 : 00
섹션 1. PWA 소개
6 강의 18 : 00
PWA 소개
03 : 00
PWA 등장 배경
03 : 00
PWA 특징
04 : 00
PWA 적용 사례
05 : 00
PWA 제작 기술
02 : 00
PWA 지원 브라우저
01 : 00
섹션 2. 웹 앱 매니페스트 구성하기
8 강의 39 : 00
웹 앱 매니페스트 파일 소개
02 : 00
웹 앱 매니페스트 파일 생성 및 등록
04 : 00
웹 앱 매니페스트 앱 아이콘, 런치 이미지
07 : 00
웹 앱 매니페스트 시작 주소, 화면 형태
05 : 00
웹 앱 매니페스트 테마색, 화면 방향
02 : 00
웹 앱 매니페스트 인스톨 배너 소개, 조건
06 : 00
웹 앱 매니페스트 인스톨 배너 디버깅, 사용자 조사 우회 방법
05 : 00
웹 앱 매니페스트 정리 및 트위터 소스 확인
08 : 00
섹션 3. 서비스 워커로 오프라인 웹 앱 제작하기
14 강의 108 : 00
서비스 워커 수업 개요, 오프라인 웹 시연
05 : 00
서비스 워커 정의, 자바스크립트와 워커의 차이점
08 : 00
서비스 워커 특징 8가지
06 : 00
서비스 워커 배경
07 : 00
서비스 워커 등록과 Promise 이해
11 : 00
서비스 워커 설치 - install 이벤트와 self
07 : 00
서비스 워커 설치 - 파일 캐싱과 디버깅시 주의 사항
12 : 00
서비스 워커 설치 - 파일 캐싱 에러 처리 요령
07 : 00
실습 브랜치 안내
05 : 00
서비스 워커 네트워크 요청 - fetch 이벤트 구현 및 동작 확인
09 : 00
서비스 워커 네트워크 요청 - 캐싱할 파일 추가 및 캐시 스토리지 디버깅 요령
07 : 00
서비스 워커 활성화 - activate 이벤트 설명
03 : 00
서비스 워커 활성화 - activate 이벤트 구현 및 자바스크립트 map(), indexOf()
14 : 00
서비스 워커 라이프 사이클
07 : 00
섹션 4. PWA 보조 라이브러리
5 강의 40 : 00
PWA 보조 라이브러리 소개
05 : 00
PWA 보조 라이브러리 실습
11 : 00
웹팩 PWA 플러그인 소개
07 : 00
sw-precaching 웹팩 플러그인 실습
12 : 00
마무리 및 수업 정리
05 : 00

공개 일자

2018년 9월 12일 (마지막 업데이트 일자 : 2018년 12월 5일)

수강 후기

4.3
6개의 수강평
엄미정 7달 전
처음부터 자세하게 알려주셔서 처음 시작할때 아주 이해하기 쉬웠습니다. 배우고 둘러보니 실제 적용된곳이 생각보다 많더군요, 강의내용은 아주 만족합니다만 다만 pwa의 큰 강점중 하나인 알림 기능이 빠져있어서 살짝 아쉬운감이 있었습니다. 물론 구글링해보면 여러 자료가 많지만 그래도 아쉬운감이 있네요...
서영준 4달 전
기본 개념잡기 좋네요. 다만 아쉬운건 alert가 빠지거나, 라이브러리 활용법이 조금 아쉽습니다. 그리고 github에 제공된 branch가 없는 부분들이 존재합니다
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스