Vue.js 정복을 통한
Progressive Web App 프로젝트.

Vue로 구현하는 PWA CAMP
기간  6. 23(토) ~ 8. 11(토) 총 8주
일정 토요일 13:30 ~ 18:30 (5시간, 총 40시간)
준비물 개인 노트북 사용 추천(본인 PC에 맞는 개발환경 설정 및 원활한 개별 실습을 위하여)
장소 패스트캠퍼스 강의장
주차 지원은 죄송하게도 불가합니다.
문의 김용성 매니저 02-517-0686
**제출용 강의소개 다운로드 (클릭)
**자주 묻는 Q&A가 궁금하다면? (클릭)

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

wap_trendyvue
wap_google_trend

Google Trend

Google Trend에서
Vue.js 검색 결과

wap_vue_logo_star

+40.0k on Github

Vue.js is the trendiest project of the year, with more than 40,000 stars.

Github을 통해 확인한 JavaScript Rising Stars 랭킹에서 Vue.js는 2016년에 이어 2017년에도 1위를 차지하며 JavaScript의 가장 Trendy한 프레임워크임을 보여주었습니다. [링크]

wap_pwa
alibaba_logo

Alibaba.com

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

twitter_logo

Twitter Lite

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

오프라인에서도 사용이 가능하며 충분히 빠르고 네이티브 앱과 같은 기능(GPS, Push 알림 등)을 구현할 수 있는 PWA를 8주 뒤 개발할 수 있습니다.[링크]

JavaScript의 가장 트렌디한 프레임워크인 Vue.js를 정복하고
Progressive Web App을 구현할 8주 입니다.

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


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

wap_for_2

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

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

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

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

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

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

wap_feature_2

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

최신 트렌드 기술을 따라가다보면 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)
  • [특강] 초심자를 위한 GitHub 협업 튜토리얼 (1H)
  • Node.js & NPM 소개 및 간단한 HTTP 서버 제작 (1H)
  • Facebook Open API, Github Page, 웹 개발 기본지식을 이용하여 간단한 Facebook 애플리케이션 제작하기 (2H)
2주 브라우저 동작 원리와 웹 성능
  • 웹 페이지가 브라우저에 파싱, 렌더링 되기까지 거치는 세부적인 동작 방식 뜯어보기 (1H)
  • Chrome 개발자 도구로 Javascript Debugging 방법 학습 및 실습 예제의 성능 최적화 진행 (1H)
  • 성능 최적화 도구 Gulp, Webpack 소개 및 실습 (2H)
  • 성능 진단 도구 및 배포시 자동화 방법 소개 (1H)
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.js 및 Firebase 소개
  • 뷰 인스턴스, 인스턴스 라이프 사이클, 컴포넌트, 컴포넌트 통신, HTTP 통신, 템플릿, 동작 원리, 반응성, 뷰 CLI 소개 및 실습(4H)
  • Google Cloud Platform인 Firebase의 실시간 DB, Auth, Storage, Hosting 소개 및 실습(1H)
5주 Vue.js 실전 애플리케이션 제작
  • 뷰 컴포넌트 구조화 및 컴포넌트 통신 방법을 익히기 위한 할 일 관리앱 제작(3.5H)
  • Vue.js를 위한 ES6 주요 문법 소개 및 실습(1.5H)
6주 Vue.js 대규모 애플리케이션 개발을 위한 상태 관리 기법
  • 상태 관리 라이브러리 Vuex 활용법 소개 및 애플리케이션 구현(3.5H)
  • UI, 차트 등의 외부 라이브러리를 활용한 애플리케이션 구현(1.5H)
7주 Advanced Vue.js
  • 컴포넌트 설계 방법과 실무에서 알아두면 좋은 팁들(1H)
  • 뷰 트랜지션과 애니메이션(1H)
  • 자바스크립트로 Vue.js Reactivity System 구현(2.5H)
  • 최종 프로젝트의 애플리케이션 설계서 공유 및 Open API 설정(0.5H)
8주 Vue.js & PWA 애플리케이션 제작
  • Vue.js + Open API + GPS + Push 알람 + Firebase 를 이용하여 SPA 기반 미세먼지 측정 프로그레시브 웹앱 제작 (4H)
  • 최신 웹 트렌드 AMP(Accelerated Mobile Page) 소개 및 제작 (1H)

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

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

FACEBOOK
웹 애플리케이션 제작

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

Vue 를 활용한
Todo 앱 제작

학습요소
  • Vue.js + Vuex
  • Webpack
  • Firebase

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

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

Vue.js 실무 경험이 풍부한, 강사님과 보조강사님

강사님이 Vue.js 창시자 에반유에게 직접 들은 내용과
강사님의 실무 경험을 바탕으로
기초를 넘어 Advanced Vue.js까지 섭렵할 수 있는 강의.

뷰 창시자 에반 유와 함께
뷰 창시자 에반 유와 함께

“Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 개발하도록 도와주는데에 있다.”
지난 4번의 수업에서 수강생 분들이 빠르게 성장하고 개인 목표를 달성하시는 것을 보며 뿌듯함을 느꼈습니다. 이번 수업은 기존 수업 내용과 함께 새로운 컨텐츠로 8주 안에 더 빠르게 성장하실 수 있도록 준비하였습니다. 국내 어디에서도 찾아보기 힘든 강의를 목표로 수강생 분들의 역량 향상에 집중하겠습니다. – 장기효 강사님 –

장기효 강사님 [ 캡틴판교 ]
강사님 GitHub 바로가기(클릭)
강사님 블로그 바로가기(클릭)
Google Developer Group WebTech 리더
Google 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

Awards
대한민국 소프트웨어 기술대상 우수상, 2014

Author 
Do it! Vue.js 입문(이지스퍼블리싱), 2018  – 국내 Vue.js 도서 1위

바로 옆에서 코딩을 도와줄 보조 강사님
바로 옆에서 코딩을 도와줄 보조 강사님

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

Stack
Python / Django / React

Works
ZEPL, Software Engineer, 2018 FEB –
SMARTSTUDY/Artistic Software Engineer, 2015 JUL – 2017 DEC
레진엔터테인먼트/Software Engineer 2015 JAN – 2015 JUN

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

수강후기

Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 개발하도록 도와주는데에 있다.

-Evan You-

wap1_yungbokim
1기 김영보님
프론트엔드 개발자가 아니더라도 퍼블리셔 또한 항상 고민해야 할 부분이지만 어디에서도 가르쳐주지 않았던 브라우저의 동작 원리와 웹 성능 최적화 등의 많은 부분을 배우게 되었습니다. 이 강의를 들으면 분명 퍼블리셔는 프론트엔드 개발자로, 프론트엔드 개발자는 한 단계 레벨업 할 수 있는 기회가 될 것입니다.
wap1_heechanlee
1기 이희찬님
웹 성능과 PWA, AMP에 대해 알아보고 공부해서 적용해보고 싶으신 분, 포트폴리오를 만들 때 남들과는 차별화된 프로토타입을 만들고 적용해보고 싶으신 분들은 물론이고 웹에 대한 내용, 트렌드를 많이 다루기 때문에 프론트엔드를 공부하고 있는 분이라면 정말 많은 것을 얻어가실 수 있으실겁니다.
다운로드
2기 임송이님
강의에서 배우는 기술들이 어떤 배경에서 등장했고, 어떤 장점이 있고 관련 기술과 어떻게 이어지는지 등 기술의 바탕이 되는 설명을 들을 수 있었습니다. 독학으로는 배우기 힘든 PWA와 Vue 등 최신 프론트엔드 기술을 가져갈 수 있어서 무척이나 좋았습니다.
_됣뀫_솽꼹_╇꼩_⒰꼦_꿍넰_믟뀴__뗡뀫_뗡뀿_뤳뀳__icon_24
2기 N님
수업을 통해 PWA 푸쉬기능이 있는 알림 게시판을 직접 만들었습니다. 두고두고 읽을만큼 좋은 퀄리티의 수업자료가 가장 인상깊었습니다. 일일이 참고링크도 첨부되어 있어서 복습하기에도 좋고 특히 PWA의 서비스워커 부분은 지금도 참고하고 있습니다. PWA를 직접 현업에서 적용해보는 기회를 만들 좋은 강의라고 생각합니다.

QnA

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

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

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

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

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

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

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

네, 가능합니다. 이전에는 Safari에서 PWA에 필요한 Service Worker를 지원하지 않았으나, 공식적으로 사용이 가능해졌습니다. [링크]

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시간, 지금 바로 시작하세요

일반등록가

110만 원110만 원 (월 9만 원대, 12개월 무이자 할부 시)

대학생 특별 할인

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

*기수강생 할인과는 중복적용이 불가합니다.