초급자를 위해 준비한
[개발 ・ 프로그래밍] 강의입니다.
[개발 ・ 프로그래밍] 강의입니다.
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 | 장기효님 인터뷰 보러가기
안녕하세요
장기효(캡틴판교) 입니다.
장기효(캡틴판교) 입니다.
안녕하세요. 우리의 성장에 관심이 많은 웹 개발자입니다. 인프런에서 5년째 지식을 공유하고 있습니다. 지금까지 제 강의에 많은 응원과 격려를 보내주신 만큼 앞으로도 더 좋은 컨텐츠로 찾아뵙겠습니다. 감사합니다 😄 프론트엔드 개발 관련 컨텐츠가 더 보고 싶다면(클릭)
커리큘럼
총 36개 ˙ 3시간 29분의 수업
이 강의는 영상, 수업 노트이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의소개
3강 ∙ 4분
섹션 1. PWA 소개
6강 ∙ 18분
PWA 소개
미리보기
03:00
PWA 등장 배경
03:00
PWA 특징
04:00
PWA 적용 사례
미리보기
05:00
PWA 제작 기술
02:00
PWA 지원 브라우저
01:00
섹션 2. 웹 앱 매니페스트 구성하기
8강 ∙ 39분
웹 앱 매니페스트 파일 소개
미리보기
02:00
웹 앱 매니페스트 파일 생성 및 등록
04:00
웹 앱 매니페스트 앱 아이콘, 런치 이미지
07:00
웹 앱 매니페스트 시작 주소, 화면 형태
05:00
웹 앱 매니페스트 테마색, 화면 방향
02:00
웹 앱 매니페스트 인스톨 배너 소개, 조건
06:00
웹 앱 매니페스트 인스톨 배너 디버깅, 사용자 조사 우회 방법
05:00
웹 앱 매니페스트 정리 및 트위터 소스 확인
08:00
섹션 3. 서비스 워커로 오프라인 웹 앱 제작하기
14강 ∙ 1시간 48분
서비스 워커 수업 개요, 오프라인 웹 시연
미리보기
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분
PWA 보조 라이브러리 소개
05:00
PWA 보조 라이브러리 실습
11:00
웹팩 PWA 플러그인 소개
07:00
sw-precaching 웹팩 플러그인 실습
12:00
마무리 및 수업 정리
05:00
강의 게시일 : 2018년 09월 13일
(마지막 업데이트일 : 2018년 12월 05일)
수강평
총 11개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.4
11개의 수강평
5점
4점
3점
2점
1점
VIEW
좋아요 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
처음부터 자세하게 알려주셔서 처음 시작할때 아주 이해하기 쉬웠습니다. 배우고 둘러보니 실제 적용된곳이 생각보다 많더군요, 강의내용은 아주 만족합니다만 다만 pwa의 큰 강점중 하나인 알림 기능이 빠져있어서 살짝 아쉬운감이 있었습니다. 물론 구글링해보면 여러 자료가 많지만 그래도 아쉬운감이 있네요...
2019-04-25
기초적인 개념잡기에는 좋으나 몇 가지 불만이 있습니다.
1. 기본적인 install, fetch, activate만 알려주는 점
2. 푸시, 결제와 같은 고급기술은 강좌에 포함되지 않음
3. PWA 보조 라이브러리 파트에서 가르쳐주시는 sw-toolbox, sw-precache는 이미 deprecated라는 점
푸시는 이 강좌에 포함시키기 힘들더라도 보조 라이브러리 강좌를 Workbox으로 업데이트 해주셨으면 하는 바람입니다.
install, fetch, activate의 기초 잡기로는 좋았습니다.
2020-01-16
PWA 입문의 첫발을 디뎠습니다.
친절하고 자세한 강의 덕분에 PWA에라는 생소한 기술에 입문을 하게되었습니다.
이미 많은 분들이 사용하고 계신 것같은데 아직은 관련도서도 적은 편이라서 막막했는데
덕분에 시작하는데 큰 도움이 되었습니다.
다만 강의에서 설명해주시는 소스나 강의 교안은 저희도 미리 받을 수 있으면
일일히 기입하느라 강의에 집중하지 못하는 경우를 줄일 수 있을 것 같습니다.
저작권때문에 공개하기 어려우신 것 같은데 다른 방법으로도 유출 가능하므로 강의 수강자에게는
PDF형태로라도 요약본으로라도 제공되었으면 합니다.
제경우 따라하는 중간에 오류가 나서 시간이 좀 걸렸네요.
2019-04-15
기본 개념잡기 좋네요. 다만 아쉬운건 alert가 빠지거나, 라이브러리 활용법이 조금 아쉽습니다. 그리고 github에 제공된 branch가 없는 부분들이 존재합니다
2019-07-31
기초를 공부하기 좋습니다.
2020-10-15
장기효(캡틴판교)님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의들
같은 분야의 다른 강의를 만나보세요!
코로나맵 개발자와 함께하는 지도서비스 만들기
₩33,000
