Vue.js
정복 CAMP

실무에 바로 적용할 수 있는 프로젝트를 통해
캡틴판교의 노하우를 가져가는 6주 강의

#Vuex#ES6#상태관리

기간 & 일정

2019.6.24. – 7.31.
매주 월/수요일 20:00 – 23:00
주 2회, 총 36시간

장소 & 준비물

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

담당자 & 문의

장명희 매니저
02-517-0562
help.camp.dev@fastcampus.co.kr

Vue.js는 복잡한 기술을 몰라도 쉽게 입문하기 좋은 프레임워크입니다.
하지만 실제로 실무에서 웹 앱을 구현하다 보면 애플리케이션 구조, 라우팅, API 처리와 같은 부분을 고민하게 됩니다.
실무에서 Vue.js 사용할 때 겪을 수 있는 모든 어려움을 이해할 수 있도록 도와드리겠습니다.

강사 장기효

VUE_MOUNTAIN

실무를 겪기 전
공식 문서로는 알기 어려운 부분을 중심으로
학습합니다

프레임워크가 처음인 분들도 비교적 익숙한 ES5 문법으로 시작해
ES6로 Vue를 사용하기까지 발전하는 점진적 학습법으로
쉽고·빠르고·강력한 Vue를 마스터합니다.

구글에서 찾아 봤던 Vue.js 학습자료의 원작자

뷰를 뷰답게 만들어 줄 강사님

vue_teacher

장 기 효

[Career]
Google 웹 기술 공식 사이트 번역자
기업용 JavaScript 프레임워크 및 프론트엔드 개발자
[Awards]
2014 대한민국 소프트웨어 기술대상 우수상
[Publication]
Do it! Vue.js 입문(이지스퍼블리싱), 2018

Vue.js의 장점은 복잡한 기술을 몰라도 누구나 쉽게 배울 수 있다는 점입니다. 하지만, 실제로 웹 앱을 구현하다 보면 애플리케이션 구조, 라우팅, api 처리와 같은 부분을 고민하게 됩니다. 이번 강의를 통해 Vue.js의 기초 동작 원리부터 고급 기법까지 탄탄한 개발 지식을 쌓고, 사용자 경험을 중시하는 프론트엔드 개발자가 될 수 있게 도와드리겠습니다.

1

수강생이 만족하는

준비된 강의

수강생 평점
4.94/5
★★★★★

이미지를 클릭하면 자세한 수강후기를 볼 수 있습니다.

blog_thum1
blog_thum
small
blog_thum_vue2

2

수강생에게만 공개하는

뷰로 만든 강의 자료

vue-camp

강의자료를 웹에 준비했습니다.
강의가 끝나도 언제 어디서나 Vue.js를 공부할 수 있습니다.

3

언제 어디서든 예습/복습 할 수 있게!

온라인 강의 무료 제공

온라인 강의예시2

강사님이 웹에 만들어주신 강의자료와 온라인 강의를 회사에서도 집에서도 볼 수 있어서 좋았습니다.
복습을 통해 질문거리를 정리할 수 있었고 질문에 대한 강사님의 답을 들으면서 가장 많이 배웠습니다.”
_18년 10월 수강생 후기 中

4

수강생의 고충은,

개인 코드 리뷰로 해결

기존 코드를 Vue로 바꾸는 법, ES6에대한 막연한 두려움이 있으셨나요?
개인 코드리뷰를 통해 두려움을 극복 할 수 있게 도와드립니다.

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

결제액의 10%를 학습지원금으로 드립니다.

패스트캠퍼스의 수강의지를 강화하기 위한 지원금 제도를 운영합니다
패캠이 제안하는 학습 목표를 달성하고 커리어 이상의 성취감을 얻어가길 바랍니다.

*학습지원금은 제세공과금(22%)을 제하고 드립니다.

출석

100% 참석

과제

100% 제출

뷰를 전혀 몰라도, 조금만 알아도!

정복할 수 있는 방법

vue_student_1

JS 프레임워크 입문할 때,

JavaScript 기본문법을 이해하고 계시다면,
온라인 기초 강의와 오프라인 강의를 통해
JS 프레임워크를 정복할 수 있습니다.

vue_student_2

기존 코드를 Vue로 변환할 때,

바닐라JS 또는 다른 프레임워크로
이미 개발 된 코드를 Vue로 어떻게
리팩토링 할 지 강사님과 함께 고민합니다.

vue_student_3

신규 프로젝트를 Vue로 진행할 때,

프로젝트의 성격에 맞추어
강사님과 함께 전체 설계도를 그려보고
Vue를 어떻게 사용할 지 알아봅니다.

실무 경험에서 나온

실무 중심 커리큘럼

1주차. 동작 원리로 알아보는 Vue.js (ES5)
  • 현대 프론트엔드 개발 생태계와 빌드 시스템(NPM, Webpack)
  • Vue.js Reactivity in Depth
  • Vue.js 인스턴스와 라이프 싸이클
  • Vue.js 컴포넌트와 컴포넌트 설계 실습
  • Vue.js 라우터와 SPA 기반 페이지 설계 실습
  • Vue.js 템플릿과 Form 제작 실습
  • Virtual DOM과 render 함수

Vue.js의 필수 기술요소(컴포넌트·라우터·템플릿 등)를 실전 예제로 제작하며 배웁니다. 현대 웹 애플리케이션의 빌드 시스템을 구성하는 방법과 최신 뷰 CLI의 특징을 살펴봅니다. Vue.js의 내부 동작 과정을 자바스크립트로 직접 구현하며 원리를 학습합니다.

2주차. Vue.js 기술 요소로 구현하는 할 일 관리 앱(ES5)
  • 싱글파일 컴포넌트로 구현하는 할 일 관리 앱
  • Vue.js 애니메이션
  • Vue.js 슬롯과 scoped 슬롯
  • Vue.js 개발을 위한 주요 ES6 문법
  • 웹개발 사고방식 전환하기(jQuery→Vue.js)
  • (특집)수강생의 실무코드 분석 및 Vue.js 기반 리팩토링을 위한 설계

할 일 관리 앱을 제작하며 컴포넌트 설계, 컴포넌트 통신방법을 배웁니다. Vue.js 코드를 간결하게 해주는 ES6 문법도 알아봅니다. 수업에서 배운 내용을 수강생의 실무 코드에 적용하기 위한 분석&설계를 진행합니다.

3주차. Vuex로 배워보는 상태 관리(ES6)
  • 상태 관리 등장 배경 및 개요
  • Vue.js에서의 상태 관리 방법과 Vuex
  • Vuex 주요 기술 요소 4가지
  • 복잡한 애플리케이션을 위한 스토어 모듈화 방법
  • Vuex 개발을 위한 주요 ES6 문법
  • Vuex로 할 일 관리 앱 리팩토링
  • (특집)실무에서 흔히 저지르는 5가지 실수

복잡한 웹 애플리케이션에서 필수로 구현해야 하는 상태 관리에 대해 알아봅니다. Vuex의 기술 요소와 스토어를 모듈 별로 분할하여 관리하는 방법을 배웁니다. 실무에서 Vue.js를 사용할 때 흔히 저지를 수 있는 실수에 대해 알아봅니다.

4주차. 뉴스 피드·게시판·사용자 데이터를 이용한 싱글페이지 애플리케이션 제작(ES6)
  • 애플리케이션 설계서 공유 및 자기주도적 설계
  • Vue.js 프로젝트 폴더 구조화 방법
  • 라우터 설계 및 구현
  • 컴포넌트 설계 및 구현
  • Vuex 설계 및 구현
  • Axios&Promise 기반 api 설계 및 구현

뉴스, 사용자 정보, 게시판 api를 이용하여 싱글 페이지 애플리케이션을 제작합니다. 페이지, 라우터, 컴포넌트, 스토어를 설계하고 actions, axios를 이용하여 api 통신 인터페이스를 구현해봅니다.

5주차. 싱글페이지 애플리케이션 제작(ES6)
  • High Order Component(HOC)를 이용한 컴포넌트 디자인
  • 외부 라이브러리 모듈화 설계 및 구현 방법
  • UX 개선을 위한 뷰 트랜지션
  • Vue.js로 구현하는 무한 스크롤/스피너
  • (특집) 고급 컴포넌트 디자인 패턴
  • 퍼블리셔, 개발자 협업을 위한 Vue.js 기반 기술 문서 제작 방법

SPA를 제작하면서 외부 라이브러리를 컴포넌트, 플러그인으로 모듈화 하는 방법을 배웁니다. 컴포넌트의 재사용성을 극대화하는 High Order Component에 대해 알아봅니다. 사용자 경험을 높여주는 무한 스크롤, 스피너, 뷰 트랜지션 등을 구현해봅니다.

6주차. 실무 서비스에 적용하는 Vue.js
  • UX 개선을 위한 고급 라우터 기법
  • 리팩토링에서 배우는 async await 기반 비동기 프로그래밍
  • 재사용성을 높이는 컴포넌트 설계 방법
  • 웹 성능 최적화를 위한 코드 스플리팅
  • (특집)수강생의 실무코드에 학습내용 적용
  • 테스팅 자동화를 위한 Jest & Vue.js 테스트 라이브러리 사용 방법

구현한 SPA의 구조에 고급 Vue.js 패턴을 적용하여 사용자 경험 중심으로 개선해봅니다. Promise 기반 api 처리 방식을 async/await 비동기 패턴으로 개선해봅니다. 수강생의 실무 코드에 학습 내용을 반영하는 시간을 갖습니다.

내가 찾던 그 강의인가?

수강 대상

icon_man3_2_happy-150x150

회사에서 Vue를 쓴다. 다들 Vue.js를 이야기 하는데 나만 잘 모르는 것 같다.

icon_woman1_2_happy-150x150

기존에 있던 코드를 Vue.js로 바꾸는 업무를 맡았다. 하지만 잘 하고 있는 건지 확신이 없다.

icon_woman4_4_unhappy

Vue.js에 관심이 생겨서 공부하려고 하는데, 스스로 학습하는데 어려움이 있다.

사전 학습이 필요한 강의입니다.

JavaScript 기본 문법을 알고, 기본적인 코드 구현이 가능한 수준이어야 합니다.
Vue는 전혀 몰라도 수강하실 수 있습니다. (코드 예시 Click)

Vue.js 정복 CAMP

무엇이든 물어보세요

ES5로도 사용할 수 있는데 왜 ES6까지 배워서 Vue.js를 써야하죠?

Vue.js의 장점은 ES6, Typescript, JSX를 배우지 않고도 기본 웹 기술인 HTML, CSS, JS만으로 프레임워크를 활용할 수 있다는 점입니다. 그런데 Vue.js의 기능을 150% 활용하시고 싶다면 ES6를 꼭 배우시는 게 좋습니다. Vuex의 상태 관리나 컴포넌트의 모듈화 등 뷰의 구석구석에 ES6의 최신 문법들을 활용하면 훨씬 빠르게 간결한 코드를 작성하실 수 있습니다.

ES6가 생소해서 배우는걸 꺼리는 개발자가 많습니다. ES6를 왜 배워야할까요?

ES6는 기존 자바스크립트 문법이 주는 단점을 보완하고, 개발자의 타이핑 속도를 줄이는데 궁극적인 목적이 있습니다. 고급 개발자라면 같은 시간 내에 더 많은 기능과 페이지를 구현할 수 있어야 합니다. ES6로 고급 프론트엔드 개발자가 되실 수 있게 도와드리겠습니다.

실습은 어떤 기준으로 선택하셨나요?

이번 실습 프로젝트의 선정 기준은 실무자들이 들고가서 그대로 적용할 수 있는 코드입니다. 오랜 기간 고민하며 정리한 뷰의 가장 이상적인 폴더 구조, 이상적인 라우팅, 컴포넌트 모듈화 방법들을 공유합니다. 기존에는 간단히 기초 개념을 학습하고, 할 일 관리 앱을 만드는데 그쳤다면 이번 프로젝트에서는 실무에서 사용할 실제 API에 고급 상태 관리 패턴을 적용합니다.

실습 프로젝트는 수업에서 배우는 뷰의 기초, 중급 개념들을 활용해 실무에서 활용되는 기능들을 구현합니다. 뉴스, 게시판, 사용자 정보 API를 활용하여 싱글 페이지 웹 애플리케이션을 구현합니다. 페이지 이동을 위한 간단한 라우터 설계부터 리팩토링으로 공통된 영역을 컴포넌트화하고 HOC(High Order Component)를 활용하여 컴포넌트 재사용성을 극대화하는 방법을 배웁니다. 또한, 코드 구조 개선뿐만 아니라 사용자 경험을 증가하기 위한 고급 라우터, 고급 컴포넌트 패턴을 알아봅니다. 코드 스플리팅, 무한 스크롤, 스피너 같은 것들도 직접 구현해보시면서 단순한 기능 구현을 벗어나 사용자 경험을 향상시키는 방법에 배울 예정입니다.

{ FASTCAMPUS COMMUNITY MEMBERSHIP }

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

매주 목요일마다 할인 마감!

수강료 안내

강의 정보, 한 번 더 확인!

기 간 : 2019. 6. 24. ~ 2019. 7. 31. (총 6주)
일 정 : 월/수요일 20:00 – 23:00 (주 2회 총 36시간)
준비물 : 개인 노트북 권장
장 소 : 패스트캠퍼스 강의장


95만원 100만원

마지막 할인 | 5% OFF

✓ 6월 20일 자정에 할인이 마감됩니다.
✓ 매주 목요일마다 가격이 소폭 상승합니다.

다음 모집은 언제죠?

출시알림을 신청해주세요

최저가로 강의를 수강할 수 있게, 강의 홍보 시작 시 가장 먼저 메일을 보내드립니다.

강남역 4번 출구 근처

강의장 안내

학습 지원 프로젝트

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

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

학습 목표 1. 출석 100%

Toggle content goes here, click edit button to change this text.

학습 목표 2. 과제 제출

학습노트를 Vue로 만들기
일요일 24:00까지 폼스택으로 매주 과제 제출. 과제접수여부는 폼스택 접수시간으로 판단.

학습지원금을 받으려면?

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

환불규정

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