VUEXPWA

VUE를 활용한 8주간의
Progressive Web App프로젝트.

dev_camp_wap
프론트엔드 개발자를 위한 웹앱 프로젝트 CAMP
기간 9. 9(토) ~ 11. 4(토) 총 8주
* 10/7(토)는 휴강입니다.
일정 토요일 13:30 ~ 18:30 (5시간, 총 40시간)
준비물 개인 노트북 필수
장소 패스트원 강남센터 14층 A강의실 (지도보기)
주차 지원은 죄송하게도 불가합니다.
문의 김용성 매니저 02-517-0686
**제출용 강의소개 다운로드 (클릭)
**자주 묻는 Q&A가 궁금하다면? (클릭)

JavaScript 기본 문법만 알고 있다면
8주 뒤, Vue & PWA를 당당히 기술스택에 적을 수 있습니다.

alibaba_logo

알리바바는 PWA로 네이티브 앱에서
모바일 웹으로의 전환율을 76%로 이끌었다.

Alibaba.com increases conversions
on the mobile web by 76% with PWA.

twitter_logo

트위터 라이트 PWA는 상당수 사용자들의
재방문을 유도하고, 데이터 사용량을 감소 시켰다.

Twitter Lite PWA significantly increases
engagement and reduces data usage.

jumia_logo

Jumia는 네이티브 앱에서 모바일 웹으로
33% 전환 시켰으며, PWA 사용자가 12배 늘었다.

Jumia sees 33% increase in conversion rate,
12X more users on PWA.

wego_logo

Wego 여행사는 PWA
기반으로한 성공적인 AMP를 구축했다.

Travel company Wego has built
a successful AMP based PWA.

pwa_logos

그 외 PWA를 실서비스에 적용중인 해외 많은 기업들

washington_logo

AMP는 워싱턴포스트가 모바일
 재방문자를 23% 증가하는걸 도왔다.

AMP helps the Washington Post increase
returning users from mobile search by 23%.

PWA의 등장으로 HTML과 CSS 그리고 JavaScript 언어를 이용하여 네이티브 앱을 넘어서는 웹 애플리케이션 개발이 가능해졌습니다.
(1) 오프라인에서도 사용이 가능하며 (2) 충분히 빠르고 (3) 네이티브 앱과 같은 기능 을 웹 기술로 구현할 수 있기 때문에
국내에서도 이미 PWA에 대한 관심이 높아지고 있습니다.

성장을 갈망한다면, 지금 바로 시작하세요!


네이티브 앱을 뛰어넘는 웹앱, PWA
이탈율을 줄이는 성능최적화AMP
인기도가 급상승중인 Vue 프레임워크

수강대상

실서비스 가능한 앱을
개발해야하는 웹 개발자

기존에는 네이티브앱에 비해 느린 속도와 불편함으로 웹앱이 뒤쳐졌지만 PWA의 등장으로 빠른 속도와 다양한 기능(Push알람, GPS, 블루투스, 오프라인에서도 동작)의 구현이 가능하게 되었습니다. 앞으로 앱도 대응해야 하는 웹 개발자에게 PWA는 미래를 함께 할 신기술이 될 것 입니다.

트렌디한 최신 기술을
습득하고 싶은 JS 개발자

페이지 로딩 속도를 최대 4배까지 빠르게 증가시키고 SEO까지 해결해줄 AMP 기술, 사용자 수가 급성장하고 있는 Vue 프레임워크, 아이오닉2와 리액트 네이티브로도 어려움이 따랐던 웹앱의 상용화 꿈을 실현 시켜줄 PWA를 학습합니다.

JS입문 이상으로
성장하고 싶은 퍼블리셔

단순히 화면을 구현하는 것은 당장은 문제가 없어 보이지만 로딩 속도의 지연과 같은 문제가 발생할 수 있습니다. 앞으로 계속 프론트엔드 개발을 지속하기 위해선 브라우저의 동작원리를 이해하고 화면 렌더링에 영향을 미치지 않는 코딩 방식과 웹 성능 최적화 방법을 놓쳐서는 안됩니다.

학습 키워드

Vue Framework
Vue Framework
Github
Github
Firebase
Firebase
Webpack
Webpack
Lighthouse
Lighthouse
AMP
AMP

강의 특장점

프론트엔드 개발자를 위한
개념 총집합 강의

프론트엔드 개발자로서 최신 트렌드 기술을 따라가다보면 Webpack, Gulp, ES6, Firebase, Lighthouse, Github 등 한 번쯤 마주하는 용어들입니다. 하지만 지금까지 익숙하지 않아 효과적으로 사용하지 못했던 분들이라면 강의를 통해 프로젝트에 직접 사용하시면서 체득할 수 있습니다.

배우고 바로 쓸 수 있는
실무밀착형 강의

Facebook 웹앱 제작, SPA 기반의 미세먼지 측정 PWA 제작을 경험하며 브라우저의 동작 원리부터 프로젝트를 진행하며 다루게 될 핵심 기술까지 단계적으로 경험합니다. 단순 이론강의로는 만날 수 없는 실무 노하우를 전달합니다.

Vue.js까지 학습하는
미래지향형 강의

최신 웹 트렌드인 PWA와 동일하게 최신 자바스크립트 프레임워크인 Vue를 활용하여 프로젝트를 진행합니다. PWA와 더불어 자바스크립트 활용능력까지 한층 더 성장할 수 있는 기회를 제공합니다.

wap_for

실서비스 가능한 앱을
개발해야하는 웹 개발자

기존 하이브리드 앱은 네이티브앱에 비해 느린 속도와 불편함이 있었지만, PWA의 등장으로 빠른 속도와 다양한 기능(Push알람, GPS, 블루투스, 오프라인에서도 동작)의 구현이 가능하게 되었습니다. 앞으로 앱도 대응해야 하는 웹 개발자에게 PWA는 미래를 함께 할 신기술이 될 것 입니다.

트렌디한 최신 기술을
습득하고 싶은 JS 개발자

페이지 로딩 속도를 최대 4배까지 빠르게 증가시키고 SEO까지 해결해줄 AMP 기술, 사용자 수가 급성장하고 있는 Vue 프레임워크, 아이오닉2와 리액트 네이티브로도 어려움이 따랐던 웹앱의 상용화 꿈을 실현 시켜줄 PWA를 학습합니다.

JS입문 이상으로
성장하고 싶은 퍼블리셔

단순히 화면을 구현하는 것은 당장은 문제가 없어 보이지만 로딩 속도의 지연과 같은 문제가 발생할 수 있습니다. 앞으로 계속 프론트엔드 개발을 지속하기 위해선 브라우저의 동작원리를 이해하고 화면 렌더링에 영향을 미치지 않는 코딩 방식과 웹 성능 최적화 방법을 놓쳐서는 안됩니다.

wap_feature

프론트엔드 개발자를 위한
기술, 도구 총집합 강의

최신 트렌드 기술을 따라가다보면 Webpack, Gulp, ES6, Firebase, Lighthouse, Github 등 한 번쯤 마주하는 용어들입니다. 하지만 지금까지 익숙하지 않아 효과적으로 사용하지 못했던 분들이라면 강의를 통해 프로젝트에 직접 사용하시면서 체득할 수 있습니다.

배우고 바로 쓸 수 있는
실무밀착형 강의

Facebook 웹앱 제작, SPA 기반의 미세먼지 측정 PWA 제작을 경험하며 브라우저의 동작 원리부터 프로젝트를 진행하며 다루게 될 핵심 기술까지 단계적으로 경험합니다. 단순 이론강의로는 만날 수 없는 실무 노하우를 전달합니다.

Vue.js까지 학습하는
미래지향형 강의

최신 웹 트렌드인 PWA와 동일하게 최신 자바스크립트 프레임워크인 Vue를 활용하여 프로젝트를 진행합니다. PWA와 더불어 자바스크립트 활용능력까지 한층 더 성장할 수 있는 기회를 제공합니다.

기술 습득 그 이상을 얻어 갈, 프로젝트형 커리큘럼!

8주 동안 웹 개발 트렌드에 발맞춰 PWAVue를 익히고,
Webpack이나 Gulp 등 프론트엔드 개발 능력을 업그레이드 시켜줄
도구들도 다뤄보며 단단한 실력을 쌓아봅니다.

Vue Framework
Vue Framework
Github
Github
Firebase
Firebase
Webpack
Webpack
Lighthouse
Lighthouse
AMP
AMP
1주 웹 개발 기본
  • 프론트엔드 웹 개발 개론 및 개발 생산성을 높이는 툴과 플러그인 소개 (1H)
  • Facebook Open API, Github Page, 웹 개발 기본지식을 이용하여 간단한 Facebook 애플리케이션 제작하기 (3H)
  • Node.js & NPM 소개 및 간단한 HTTP 서버 구축 (1H)
2주 브라우저 동작 원리와 웹 성능
  • 웹 페이지가 브라우저에 파싱, 렌더링 되기까지 거치는 세부적인 동작 방식 뜯어보기 (1H)
  • Chrome 개발자 도구로 Javascript Debugging 방법 학습 및 실습 예제의 성능 최적화 진행 (1H)
  • [조교님 특강] 초심자를 위한 GitHub 협업 튜토리얼 (1H)
  • 성능 최적화 도구 (Gulp, Webpack) 소개 (1.5H)
  • 성능 진단 도구 및 배포시 자동화 방법 소개 (0.5H)
3주 PWA 소개
  • 최신 웹 트렌드인 Progressive Web App 소개 및 시연 (1H)
  • Web App Manifest 를 이용한 웹 앱 Splash Image 제작, Install Banner 생성 실습 (1H)
  • 오프라인 웹 앱 구현을 위한 Service Worker 특징, 생명 주기, Cache 구현 방법 학습 및 간단한 Offline 애플리케이션 제작 (1.5H)
  • PWA Native Feature 를 이용한 Push 알람 애플리케이션 제작 (1.5H)
4주 Vue와 Firebase 소개
  • Vue + PWA 앱 제작에 필요한 ES6 학습 및 실습 (0.5H)
  • 최신 프론트엔드 프레임워크 Vue.js – Instance, Component, Router, Template, Resource, Data Binding 소개 및 실습 (3H)
  • Google Cloud Platform 인 Firebase 의 실시간 DB, Storage, Auth, Hosting 기능 소개 및 간단한 앱 제작 (1.5H)
5주 Vue 실전 애플리케이션 제작
  • Vue Single File Components 구조화, Vue Loader 를 위한 Webpack 구성 파일 분석 및 실습 (1H)
  • Vue Components 구조화 및 Vue Components 통신을 익히기 위한 Todo App 제작 (3.5H)
  • 최종 프로젝트 앱 소개 및 설계서 공유 (0.5H)
6~8주 Vue & PWA 애플리케이션 제작
  • Vue + Open API + GPS + Push 알람 + Firebase 를 이용하여 SPA 기반 미세먼지 측정 PWA 제작 (13H)
  • 최신 웹 트렌드 AMP(Accelerated Mobile Page) 소개 및 제작 (2H)

실습으로 완성하는, Vue & PWA프로젝트!

Vue의 Components 구조화와 통신 체득
빠른 프로토타이핑을 위한 Firebase
Open APIMobile 기능 활용

FACEBOOK
웹 애플리케이션 제작

facebook-app_resize
학습요소
  • Facebook 프론트엔드 코드 해부 및 패턴 분석
  • Facebook Open API
  • GitHub Usage, Github Page 호스팅

Vue 를 활용한
Todo 앱 제작

vue-todo-app-re
학습요소
  • Vue.js 화면 개발을 위한 모든 기술 요소 종합
  • Webpack
  • Firebase

SPA 기반
미세먼지 측정 PWA 제작

pwa_app_resize
학습요소
  • PWA & Vue.js & ES6(ES5)
  • Open API & GPS + Push알람
  • SPA + Firebase + Webpack

실무 경험이 풍부한, 강사님과 조교님

성능 최적화를 위해 코드를 함께 고쳐보는 문제풀이 방식.
코드리뷰를 통해 발견하기 어려운 문제 확인.
구체적인 결과물을 함께 완성해나가는 프로젝트 강의.

wap_instructor_khj(2)

실제 운영하던 서비스 장애에서부터 시작된 웹 성능 최적화에 대한 고민, 그리고 PWA 부터 AMP 까지, 그 과정속에서 얻은 지식과 경험을 모두 공유드리고자 합니다. 탄탄한 웹 개발 지식으로 모바일 앱과 같은 웹 앱을 개발해볼 수 있는 시간이 될 것입니다. 수강생 여러분에게 또 다른 성장의 축이 될 수 있도록 노력하겠습니다. – 장기효 강사님 –

장기효 강사님 [ 캡틴판교 ]
강사님 GitHub 바로가기(클릭)
강사님 블로그 바로가기(클릭)
Google Developer Group WebTech 리더
Google PWA 공식 사이트 번역자
강사님이 구현한 PWA 서비스 바로가기 (클릭)

Personal Projects
Google Web Fundamentals, Open Source Contributor
Google HTML5Rocks, Open Source Contributor
Mozilla Developer Network, Open Source Contributor
RealTime Vote Application, Software Engineer
POSCO Reporting Process Automation, Software Engineer

Awards
포스코 ICT 우수 사내 전문강사, 2017
대한민국 소프트웨어 기술대상 우수상, 2014

jinyoorim_assistant

디자인과 WEB을 좋아하는 잡식 개발자 입니다. 사람들의 생산성을 높여 삶의 질을 좋게 만드는 일에 관심이 많습니다. 아름다운 웹과 iOS 개발, 새로운 언어와 프레임워크 그리고 개발자들 오프라인 모임과 그들의 개그를 사랑합니다. 빠르고 효율적이게 PWA, AMP, Vue 실습을 진행하실 수 있도록 도와드리겠습니다. – 진유림 조교님 –

Stack
Python / Django / React

Works
SMARTSTUDY/Artistic Software Engineer, 2015 JUL – present
레진엔터테인먼트/Software Engineer 2015 JAN – 2015 JUN

외부 강연
Google Women Techmakers Seoul, 국민대, 성신여대, 대덕마이스터고, 코드스쿼드, 나는프로그래머다, 9XD
– 낮은 가지의 열매 (슬라이드 보기)
– 신입 개발자 생활백서 (슬라이드 보기)

수강후기

wap1_yungbokim

프론트엔드 개발자가 아니더라도 퍼블리셔 또한 항상 고민해야 할 부분이지만 어디에서도 가르쳐주지 않았던 브라우저의 동작 원리와 웹 성능 최적화 등의 많은 부분을 배우게 되었습니다. 이 강의를 들으면 분명 퍼블리셔는 프론트엔드 개발자로, 프론트엔드 개발자는 한 단계 레벨업 할 수 있는 기회가 될 것입니다.

wap1_heechanlee

웹 성능과 PWA, AMP에 대해 알아보고 공부해서 적용해보고 싶으신 분, 포트폴리오를 만들 때 남들과는 차별화된 프로토타입을 만들고 적용해보고 싶으신 분들은 물론이고 웹에 대한 내용, 트렌드를 많이 다루기 때문에 프론트엔드를 공부하고 있는 분이라면 정말 많은 것을 얻어가실 수 있으실겁니다.

QnA

Q. 취업준비생에게는 어떤 점이 좋은가요?

지금까지 개발 실무 경험이 없어 기죽어서 면접을 봤다면, 이 수업 이후로는 그러지 않아도 됩니다. 실 서비스 구축에 필수인 성능최적화를 체득하기 위해, 필요한 도구들을 학습 및 리펙토링을 수 없이 해봅니다. 최신 웹 기술(PWA,AMP) 과 Vue로 프로젝트도 만들어 볼 것이기 때문에 이 수업만 잘 들으면 면접 자신 있게 할 수 있습니다. 매끄러운 화면 개발을 위해 필요한 성능 최적화 도구 사용법 학습, 브라우저 동작 원리를 이해한 웹 애플리케이션 설계가 가능해집니다.

Q. 어느정도 수준이어야 들을 수 있나요?

jQuery를 사용해본 경험이 있거나, 생활코딩 또는 코드아카데미와 같은 온라인 강의를 통해 JavaScript 기본을 이해하셨다면 충분히 수강 가능하십니다. 수업 중 어려운 부분이 있다면 조교님과 함께 짝코딩으로 함께할 것이며 JavaScript가 부족하다고 생각되시는 분들은 강사님과 함께 추가적인 스터디를 진행할 예정입니다.

Q. 8주 뒤, 강의가 끝나면 무엇을 할 수 있나요?

최신 웹 트렌드인 PWA 와 AMP 로 모바일 앱을 대체할 수 있는 고성능 웹 애플리케이션을 제작할 수 있고, 화면을 구성하는 코드를 깊게 이해하고 구현하는 고급 프론트엔드 개발자가 되실 수 있습니다. 느려서 답답한 웹 사이트를 속시원하게 개선할 수 있는 프론트엔드 개발자가 되실 수 있습니다. Open API, 라이브러리, 프레임워크를 그냥 사용하는 다른 프론트엔드 개발자와 차별화된 개발자가 될 수 있습니다. 해외 사용자가 웹 사이트 접속 안된다고 불평 늘어놓는 것 이제 그만 들으셔도 됩니다. 해외 사용자도 불평 없이 사용할만한 웹 사이트 접근을 보장하실 수 있습니다.

Q. 안드로이드와 IOS 모두 PWA를 적용할 수 있나요?

Android, Mac OS는 PWA에 필요한 모든 기술들을 지원하여 온전히 동작하며, 현재 iOS 또한 PWA에 필요한 기술을 개발 중에 있다는 공식 발표가 있었습니다(2017. 8 기준). 지금까지 Safari에서는 PWA에 필요한 Service Worker를 지원하지 않아 PWA가 iOS에서 온전히 동작하지 못했습니다. 하지만, Apple에서 공식적으로 Service Worker를 개발 중에 있다는 발표를 하였습니다. 이전까지는 기술 개발 로드맵에 있었을 뿐이었는데 PWA를 구현하기 위하여 정식적으로 개발을 시작한 것이지요. 그래서 곧 머지 않은 시기에 안드로이드폰과 아이폰에서 모두 PWA를 맞이하실 수 있을 것이라 기대하고 있습니다.

Q. 웹앱을 제작하는 다른 기술인 React Native, IONIC2와는 무슨 차이가 있나요?

React Native와 Ionic2가 프레임워크라면 PWA는 개발 방법입니다. 두 프레임워크는 모두 웹 기술로 앱을 대응하기 위해 등장 하였습니다. 하지만 React Native는 화면 UI 위젯부터 Native코드가 관여하기 때문에 온전히 웹 기술(HTML,CSS,JavaScript)만으로 개발하는 것엔 한계가 있습니다. 또한 Ionic2는 하이브리드 앱을 만드는 기술로 성능상 느리다는 평가가 있었습니다. 그래서 최근에 Ionic2는 PWA를 공식 패키지에 넣어 개발할 것을 권고하고 있습니다. 이는 웹 기술로 앱을 개발할 때 PWA가 필수적인 기술 요소가 되었음을 의미한다고 볼수 있습니다.

Q. PWA의 미래 전망은 어떤가요?

PWA 는 웹의 미래이자 모바일 애플리케이션을 대체할 수 있는 고성능 웹 애플리케이션입니다. 세계적으로 Google 이 주도하고 있으며, 국내에서는 Samsung 이 적극적으로 기술 개발에 참여하고 있습니다. 모바일 기기가 보급화 되고 전 세계로 확산됨에 따라 개발 시장은 모바일 웹 과 모바일 앱 으로 나뉘게 됩니다. 웹 애플리케이션으로도 충분히 모바일 앱을 커버할 수 있다면 굳이 모바일 앱을 개발해야 할 이유가 있을까요? 이젠 모바일 웹에서도 모바일 앱에 뒤지지 않는 빠른 로딩 속도와 Push 알람, GPS, 블루투스와 같은 기능들을 PWA 로 구현할 수 있습니다. 오프라인에서도 웹 애플리케이션을 동작시킬 수 있는 건 PWA 의 또 다른 장점입니다.

이해하고 끝나는 강의가 아닌, 직접 구현한 웹앱을 가져가는 실무형 강의
당신의 개발 커리어에 방점을 찍어줄 40시간, 지금 바로 시작하세요

마지막 등록 기회

100만 원

대학생 특별 할인

대학생에게는 10%의 추가 할인 혜택을 제공합니다.
수강신청 페이지에서 재학증명서를 첨부해주세요! 🙂