조기마감 예상 | 2자리 남았습니다!

개강 → D-

Vue로 구현하는
PWA CAMP

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

#Vue.js#PWA#웹앱

main_phone

기간 & 일정

2019.08.24-11.02
(9/14, 10/5, 10/26 휴강)
토요일 14:00 – 19:00
주 1회, 총 40시간

장소 & 준비물

패스트캠퍼스 강남강의장
강남역 4번 출구, 미왕빌딩
개인 노트북

담당자 & 문의

장명희 매니저
02-517-0562
help.camp.dev@fastcampus.co.kr
※주차 지원은 불가합니다.

웹 개발 트렌드에 맞춰 PWAVue를 익히고,
다양한 프로젝트 실습으로 프론트엔드 개발 능력을 업그레이드 시키세요!

Web Development Trends

PWA는 이미 2019년 웹 개발 트렌드
중에서도 상위권인 3위를
차지하고 있습니다.

Alibaba.com

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

Twitter Lite

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

8주 후, 당신도 PWA를 개발할 수 있습니다.

오프라인에서도 사용이 가능하며 실행속도가 충분히 빠르고
네이티브 앱과 같은 기능(GPS, Push 알림 등)을 구현할 수 있는 PWA 기술을 내 것으로 만드세요.

PWA(Progressive Web App), 왜 배워야할까요?

 네이티브 앱 
 PWA 

 Point 1 

네이티브 앱 같은 웹

Push알람, GPS, 블루투스 등
네이티브 앱에서 구현되는 기능을
동일하게 구현할 수 있습니다.

 Point 2 

빠른 로딩 속도

모바일 웹에서도
모바일 앱에 뒤지지 않는
빠른 로딩 속도를 구현합니다.

 Point 3 

연결 독립적

오프라인이나 또는
느린 네트워크에서도
원활하게 동작합니다.

다음 단계의 개발자로
성장하고 싶다면
지금 바로 시작하세요!

pwa로고

네이티브 앱을 뛰어넘는 웹앱

프론트엔드 개발 대세 프레임워크

코스특징.

01

프론트엔드 개발자를 위한
최신 기술과 도구의 총집합

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

02

배워서 바로 쓸 수 있는
실무 밀착형 커리큘럼

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

03

PWA와 함께 Vue.js까지 학습하는, 1석 2조 코스

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

실습으로 완성하는
Vue.js & PWA 프로젝트

 1 

Vue.js 컴포넌트
설계 방식

통신 방법

 2 

회원 가입, 로그인 등의
인증 처리
API 함수
구조화
방법

 3 

프로그레시브 웹/앱을
제작하며 배우는 Offline 웹과
Push 알람 기능

Vue를 활용한
Todo 앱 제작

패스트캠퍼스_뷰투두앱
[활용 기술 스택]
– Vue.js(ES5) + Vuex
– Vue CLI + Webpack
– Firebase

Vue.js 학습 노트
애플리케이션 제작

Vue로 구현하는 PWA 캠프 수업 자료
[활용 기술 스택]
– Vue.js(ES6) + Vuex
– Vue Router + 라우터 권한 및 인증 처리
– Form Validation + 테스트 코드 작성

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

pwa_app_resize
[활용 기술 스택]
– PWA + Vue.js(ES6)
– Open API + GPS + Push 알람
– Firebase + SPA

Vue.js 학습 노트
애플리케이션 제작

실무에서 겪은
경험과 지식을 얻어 갈
프로젝트형 커리큘럼!

 1 

PWA와 Vue.js로
서비스를 제작하면서 얻은
전문가의 노하우와 지식

가져갈 기회입니다.

 2 

예전 웹 개발 방식에서 벗어나
프론트엔드 개발 프레임워크를
썼을 때의 업무 절차와
협업 방식
에 대해 알아봅니다.

 3 

최신 프론트엔드 개발
생태계
에 대해 알아보고
Webpack과 같은 빌드 도구
함께 살펴봅니다.

커리큘럼.

웹 개발 기본

1주차 자세히 보기

  • 최신 프론트엔드 프레임워크를 이용한 개발 방법과 현대 프론트엔드 개발 생태계 소개
  • Vue.js 소개 및 자바스크립트로 Vue.js 라이브러리 제작하기 실습
  • 입문자를 위한 GitHub 소개와 실무자를 위한 협업 튜토리얼 특강 
  • NPM과 프론트엔드 빌드 시스템 이해
  • REST API를 이용한 데이터 호출 방법과 자바스크립트 비동기 처리 이해 

Vue.js 기본 및 브라우저 동작 원리

2주차 자세히 보기

  • 웹 페이지가 브라우저에 파싱, 렌더링 되기까지 거치는 세부적인 동작 방식 뜯어보기
  • Vue.js 인스턴스와 라이프 사이클 실습
  • Vue.js 컴포넌트와 컴포넌트 설계 방법 실습 
  • Vue.js 컴포넌트 통신 방법과 이벤트 버스 실습
  • Vue.js 템플릿과 Form 제작 실습

실전 웹 애플리케이션 제작 1

3주차 자세히 보기

  • Vue CLI 및 싱글 파일 컴포넌트 소개
  • Vue.js 컴포넌트 구조화 및 컴포넌트 통신 방법을 익히기 위한 할 일 관리 앱 제작
  • Vue.js 애니메이션과 트랜지션 실습
  • Vue.js 슬롯과 scoped 슬롯 실습 
  • 할 일 관리 앱 빌드 및 서버에 배포하기 실습

Vue.js 실무 개발

4주차 자세히 보기

  • 프론트엔드 빌드 시스템 Webpack 이해 및 실습
  • 차트, 데이트 피커 등의 외부 라이브러리 모듈화 실습
  • 레거시 프로젝트에 Vue.js를 적용하는 방법
  • 실무에서 흔히 저지르는 5가지 실수 소개 및 실습 

실전 웹 애플리케이션 제작 2

5주차 자세히 보기

  • Vue.js 라우터 고급 패턴 및 SPA 기반 페이지 설계 실습
  • Vue.js 실전 싱글 페이지 애플리케이션 제작
  • Vue.js에서 필요한 주요 ES6 문법 7가지 학습 및 실습
  • 퍼블리셔와 협업하기 위한 뷰 컴포넌트 스타일링 방법 

대규모 앱 개발을 위한 Vuex

6주차 자세히 보기

  • 상태 관리의 개념 및 Vuex 소개
  • Vuex 주요 기술 요소 4가지 학습 및 실습 
  • Vuex에서 사용자 토큰 관리를 위한 회원 가입, 로그인 실습 
  • 복잡한 애플리케이션을 위한 스토어 모듈화 방법 소개
  • 컴포넌트, API 함수, 라우터에서의 스토어 활용 방법

PWA 기본과 오프라인 웹 앱 제작

7주차 자세히 보기

  • Progressive Web App 소개 및 시연
  • 웹/앱 매니페스트 파일을 이용한 웹 앱 Splash Image 제작과 Install Banner 생성 실습
  • Offline 웹 앱을 구현하기 위한 서비스 워커 특징, 생명 주기, 캐싱 방법 학습 
  • 웹/앱 매니페스트 파일과 서비스 워커를 이용한 오프라인 웹 앱 제작 
  • 푸시 알람 앱 제작을 위한 Firebase CLI, 인증, 데이터베이스 학습

Vue.js로 구현하는 Progressive Web App

8주차 자세히 보기

  • 푸시 알람 + 오픈 API를 이용한 실시간 미세먼지 측정 Progressive Web App 제작
  • 향후 학습 로드맵 안내 및 프로젝트 관련 질의 응답

수강대상.

웹개발자

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

JS

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

퍼블리셔

한 단계
성장하고 싶은
퍼블리셔

수강 신청 전, 수강생 선수 지식을 확인하세요!

jQuery를 사용해 본 경험이 있거나, JavaScript 기본을 이해하고있다면 충분히 수강 가능합니다.

코스와 관련한 문의는 담당매니저(02-517-0562)에게 언제든 연락해주세요🙂

Vue.js & PWA 실무 경험과
강의 경험이 풍부한 강사진

 1 

Vue.js 창시자 에반유에게
직접 들은 내용을 전합니다.

 2 

강사님의 실무 경험 및
강의 경험
을 바탕으로 전합니다.

 3 

기초를 넘어
Advanced Vue.js까지 전합니다.

강사소개.

장기효 강사님
[캡틴판교]

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

[약력]

현| 프론트엔드 개발자

– 네이버, 이베이 코리아, SK 그룹 Vue.js 강의

– Google PWA 공식 문서 번역자 (문서 바로가기)
– Do it! Vue.js 입문 저자 (책 자세히보기)
– 기술 블로그 (블로그 바로가기)
Github 바로가기

진유림 보조강사님
[율무]

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

[약력]

현| ZEPL Software Enginner

전| 레진엔터테인먼트, 스마트스터디

– 삼성전자, Google Women Techmakers Seoul, 국민대, 성신여대 등 다수 강연
– 한빛미디어 Git 서적 집필중

– 신입 개발자 생활백서 (슬라이드 보기)
– 낮은 가지의 열매 (슬라이드 보기)
– 기술 블로그 (블로그 바로가기)

Github 바로가기

수강후기.

★★★★★
김영보 수강생

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

인터뷰 보기 〉

★★★★★
이희찬 수강생

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

인터뷰 보기 〉

★★★★★
임송이 수강생

강의에서 배우는 기술들이 어떤 배경에서 등장했고, 어떤 장점이 있고 관련 기술과 어떻게 이어지는지 등 기술의 바탕이 되는 설명을 들을 수 있었습니다. 독학으로는 배우기 힘든 PWA와 Vue 등 최신 프론트엔드 기술을 가져갈 수 있어서 무척이나 좋았습니다.

인터뷰 보기 〉

★★★★★
익명 수강생

수업을 통해 PWA 푸쉬기능이 있는 알림 게시판을 직접 만들었습니다. 두고두고 읽을만큼 좋은 퀄리티의 수업자료가 가장 인상깊었습니다. 일일이 참고링크도 첨부되어 있어서 복습하기에도 좋고 특히 PWA의 서비스워커 부분은 지금도 참고하고 있습니다. PWA를 직접 현업에서 적용해보는 기회를 만들 좋은 강의라고 생각합니다.

QnA.

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

기업에서 프런트엔드 개발자로 일하기 위해 필요한 역량과 지식을 체화합니다. 실무에서는 프런트엔드 개발자가 어떤 역할을 하는지 어떤 방식으로 다른 직군과 협업하는지에 대해서 배울 수 있습니다. 또한, 수업에서 제작하는 애플리케이션으로 포트폴리오 뿐만 아니라 취업 후 실제 업무를 할 때 참고 자료로도 활용할 수 있습니다.

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

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

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

PWA 로 모바일 앱을 대체할 수 있는 고성능 웹 애플리케이션을 제작할 수 있고, 화면을 구성하는 코드를 깊게 이해하고 구현하는 고급 프론트엔드 개발자가 되실 수 있습니다. 느려서 답답한 웹 사이트를 속시원하게 개선할 수 있는 프론트엔드 개발자가 되실 수 있습니다. 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 의 또 다른 장점입니다.

수강료안내.

강의 정보, 한 번 더 확인!

기 간 : 2019. 08. 24 – 11. 02 (총 8주)
일 정 : (9/14, 10/5, 10/26 휴강)
토요일 14:00 – 19:00(주 1회)
준비물 : 개인 노트북
장 소 : 패스트캠퍼스 강의장

110만원

출시알림을 신청해주세요.

✓ 출시알림을 신청해주시면 다음 개강 시 가장 먼저 알려드립니다.
✓ 매주 목요일마다 가격이 소폭 상승합니다.

강의장안내.

학습 지원 프로젝트

공부도 하고! 학습지원금도 받고!

*학습지원금(제세공과금 22% 차감 후 지급)은 강의마다 개인마다 상이할 수 있습니다.

학습 목표. 학습노트 제출

-학습노트/과제 제출 일정: 매주 목요일 자정 24:00까지 폼스텍으로 제출합니다.
-제출 시간을 엄수하지 못한 노트는 추후 환급에 불이익이 있습니다.
-과제 제공 방식 : 강사님께서 수업시간에 hand-out(또는 이메일)으로 배포합니다.
-수강중 학습 콘텐츠 일정 : 1-6 주차 학습노트 제출

학습지원금을 받으려면?

미션을 모두 완료하면 신청페이지를 통해 신청 가능합니다.
다만, 강의 종료 후 30일 이내에 신청페이지를 통해서 신청해주셔야 합니다.
아래의 환급신청 링크로 신분증 사본 / 환급받을 통장사본을 제출 (반드시 본인 명의로만 가능)해 주세요.
결제한 수강료의 10% (환급 금액의 22% 제세공과금으로 차감) 를 드리며, 학습지원금은 개인마다 상이할 수 있습니다.

환불규정

* 학습지원금은 기수강생 및 얼리버드 할인과 중복 적용이 가능합니다. (기타 다른 이벤트와 중복 적용이 불가합니다.)
* 과제물이 허위로 작성되거나 표절일 경우 환급이 거절될 수 있습니다.
* 환불은 환불규정(https://www.fastcampus.co.kr/refund/)에 따라 진행됩니다. 규정에 의거하여 환불금액이 없을 수 있습니다.

{ FASTCAMPUS COMMUNITY MEMBERSHIP }

패스트캠퍼스 오프라인 강의를 수강하셨다면!
별도의 가입절차없이 패스트캠퍼스 커뮤니티 멤버쉽 회원이 됩니다.
커뮤니티 멤버쉽은 수강 후 1년 동안 유지되며,
오직 멤버들만을 위한 비공개 스터디클럽, 네트워킹행사, 세미나 등 비정기적 행사에 모실 예정입니다.