PWA - PWA 시작하기 - 프로그레시브 웹 앱을 만들어보세요

Web 기술로 오프라인 환경에서 작동하는 App 을 만들 수 있습니다. 프로그레시브 웹 앱이 발전해온 시대적 배경과 주요 특징을 배우고, 주요 기술들로 실제 프로그레시브 웹 앱을 만들어보세요.

PWA 시작하기

Web 기술로 모바일 App 을 만들수 있는 PWA! 2018년에 주목할 웹 기술로 가장 먼저 거론되는 프로그레시브 웹 앱(Progressive Web App) 학습 강좌입니다. HTML, CSS, 자바스크립트로 어떻게 모바일 애플리케이션 느낌이 나는 웹 애플리케이션을 만들 수 있는지 궁금하신가요? 프로그레시브 웹 앱이 발전해온 시대적 배경과 주요 특징을 배우고, 주요 기술들로 실제 프로그레시브 웹 앱을 만들어보세요.

전체적인 강의 방식은 코드 중심의 학습형 강좌 형태로 구성되어 있습니다. 자바스크립트 입문자도 듣기 쉽게끔 최대한 쉽고 자세하게 설명합니다. 웹 개발자들의 새로운 무기! 프로그레시브 웹 앱을 재밌게 배워보세요 🙂

강좌는 크게 3가지 파트로 나뉩니다.

프로그레시브 웹 앱 시연 및 소개
웹 앱 매니페스트 파일 제작하기
서비스 워커 다루기

어떤 걸 배우나요?

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

누구에게 도움이 되나요?

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

이미 대세인 기술 PWA

강좌 특징

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

지식공유자 소개

장기효(캡틴 판교)

구글 PWA 공식 문서 한글 번역

패스트 캠퍼스 Vue로 구현하는 PWA 캠프 강사 (2017 ~ 현재)

실무에서 PWA를 적용한 경험을 바탕으로 기업 및 교육 기관 강의 (2016 ~ 현재)

인프런이 만난 사람 #02 | 장기효님 인터뷰 보러가기

1편 _ 결국엔 ‘같이 간다’는 마음으로

2편 _ 지금이 웹 개발하기엔 ‘참 좋은 시기’

강좌 평가

...

개의 수강평

5 점0
4 점0
3 점0
2 점0
1 점0

아직 수강평이 없네요

강좌 교육과정

강의소개
	강의 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'	미리보기	00:02:00
	개발 환경 안내학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'	미리보기	00:01:00
	깃헙 비공개 리포지토리 안내학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:01:00
PWA 소개
	PWA 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'	미리보기	00:03:00
	PWA 등장 배경학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:03:00
	PWA 특징학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:04:00
	PWA 적용 사례학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'	미리보기	00:05:00
	PWA 제작 기술학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:02:00
	PWA 지원 브라우저학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:01:00
웹 앱 매니페스트 구성하기
	웹 앱 매니페스트 파일 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'	미리보기	00:02:00
	웹 앱 매니페스트 파일 생성 및 등록학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:04:00
	웹 앱 매니페스트 앱 아이콘, 런치 이미지학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:07:00
	웹 앱 매니페스트 시작 주소, 화면 형태학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:05:00
	웹 앱 매니페스트 테마색, 화면 방향학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:02:00
	웹 앱 매니페스트 인스톨 배너 소개, 조건학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:06:00
	웹 앱 매니페스트 인스톨 배너 디버깅, 사용자 조사 우회 방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:05:00
	웹 앱 매니페스트 정리 및 트위터 소스 확인학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:08:00
서비스 워커로 오프라인 웹 앱 제작하기
	서비스 워커 수업 개요, 오프라인 웹 시연학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'	미리보기	00:05:00
	서비스 워커 정의, 자바스크립트와 워커의 차이점학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:08:00
	서비스 워커 특징 8가지학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:06:00
	서비스 워커 배경학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:07:00
	서비스 워커 등록과 Promise 이해학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:11:00
	서비스 워커 설치 – install 이벤트와 self학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:07:00
	서비스 워커 설치 – 파일 캐싱과 디버깅시 주의 사항학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:12:00
	서비스 워커 설치 – 파일 캐싱 에러 처리 요령학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:07:00
	실습 브랜치 안내학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:05:00
	서비스 워커 네트워크 요청 – fetch 이벤트 구현 및 동작 확인학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:09:00
	서비스 워커 네트워크 요청 – 캐싱할 파일 추가 및 캐시 스토리지 디버깅 요령학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:07:00
	서비스 워커 활성화 – activate 이벤트 설명학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:03:00
	서비스 워커 활성화 – activate 이벤트 구현 및 자바스크립트 map(), indexOf()학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:14:00
	서비스 워커 라이프 사이클학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:07:00
PWA 보조 라이브러리
	PWA 보조 라이브러리 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:05:00
	PWA 보조 라이브러리 실습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:11:00
	웹팩 PWA 플러그인 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:07:00
	sw-precaching 웹팩 플러그인 실습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:12:00
	마무리 및 수업 정리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요'		00:05:00

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

Web 기술로 오프라인 환경에서 작동하는 App 을 만들 수 있습니다. 프로그레시브 웹 앱이 발전해온 시대적 배경과 주요 특징을 배우고, 주요 기술들로 실제 프로그레시브 웹 앱을 만들어보세요.