Vue.js 의 모든걸 가져갈 8주 강의

ES6 는 물론 백엔드 개념까지-
탄탄한 기본기를 갖춘 프론트엔드 개발자로 거듭납시다.

Vue & ES6 정복 CAMP
기간 8. 28(월) ~ 10. 30(월) 총 8주 * 10. 2, 10. 4, 10. 9는 휴강입니다.
일정 월요일,수요일 19:30~22:30 (총 48시간)
준비물 개인 노트북(Windows/MacOS 무관)
장소 강남역 인근 강의장 (추후 자세한 안내 예정)
주차 지원은 죄송하게도 불가합니다.
문의 최민수 매니저 02-517-0652

Vue.js의 파도가 몰려오고 있다!

2013년 출시 이후 버전 2의 릴리즈를 통해 차세대 라이브러리로 주목받고 있는 Vue.js!
Vue.js가 가진 장점으로 인해 전세계 뿐 아니라 국내 개발자의 관심을 한 몸에 받고 있습니다.
뛰어난 성능과 편리한 사용성은 Vue.js를 자바스크립트 프레임워크들 중 인기있는 프레임워크로 만들 것 입니다.
최신 기술을 익혀 기술 트렌드를 앞서가는 경쟁력있는 프론트엔드 개발자가 되어봅시다.

< Vue의 다양한 장점들 >

수강생분들께 드리는 말씀

최근에는 오직 HTML, CSS와 간단한 JavaScript만을 사용하여 웹 프론트엔드를 제작하는 경우가 거의 없습니다. 그 이유는 웹 브라우저가 다양한 애니메이션을 보여줄 수 있을정도로 퍼포먼스가 발전했고 다양한 디바이스가 등장함에 따라 웹프론트엔드 개발자가 해야할 일이 과거에 비해 증가했기 때문입니다. 그렇기 때문에 웹 프론트엔드 개발자를 위한 라이브러리와 프레임워크는 계속해서 등장하고 있습니다. 너무 많은 라이브러리와 프레임워크가 등장하다보니 웹 프론트엔드는 너무 빠르게 발전한다거나 간단한 개발도 복잡하게 한다는 이야기를 듣기도 합니다.

그런 와중에 Vue.js라는 라이브러리가 등장했습니다. Vue.js는 다른 부분을 제외하고 View 부분에만 집중할 수 있도록 도와주는 라이브러리 입니다. 그리고 그 뷰를 컴포넌트 단위로 개발할 수 있도록 도와줍니다. Vue.js는 HTML과 JavsScript, CSS를 알고있다면 매우 쉽고 친숙하게 개발할 수 있습니다. 그리고 활발한 커뮤니티로 이미 쉽게 개발 환경을 구축할 수 있도록 도와줍니다.

이 강의에서는 Vue.js를 이용하여 최신 웹 프론트엔드 기술인 ES6, Babel, Webpack, SPA 등을 하나씩 배웁니다. 또한 Vue.js를 이용하여 실제 프론트엔드 프로젝트를 진행하며 개발에 대한 막연한 두려움을 극복하고 백엔드에 대한 지식을 익힐 것 입니다. 8주간 Vue.js를 공부하며 바로 실전에 투입될 수 있는 프론트엔드 개발자로 성장해봅시다! 감사합니다.

< Vue를 온전히 경험할 프로젝트들 >

예제 프로젝트를 통해 Vue.js의 핵심을 다뤄보며 단순한 이론 이상의 실무 경험치를 쌓아봅니다.
Google Firebase를 이용하여 서버를 연동하고 GitHub 배포까지 모두 경험해봅니다.

notebook

< Todo 애플리케이션 >

poker-playing-cards

< 카드 뒤집기 게임 >

rain

< 일기예보 웹 애플리케이션 >

chat (3)

< 나만의 애플리케이션 >

vue-memory-game

카드 뒤집기 게임

  • Vue.js 컴포넌트간의 통신
  • 트랜지션 효과
  • 단일 파일 컴포넌트 리팩토링

카드 뒤집기 게임을 구현하며 Vue의 컴포넌트 사이의 데이터 전달 방법과 트랜지션 기능, Webpack과 ES6를 배워봅니다. Vue.js 만의 문법인 단일 파일 컴포넌트를 배우며 모던 자바스크립트를 경험할 수 있습니다.

vue-weather_1

일기예보 웹 애플리케이션

  • axios 라이브러리와 네트워크 통신
  • vue-router
  • SPA

구글맵과 날씨 API를 이용하여 일기예보 웹 애플리케이션을 구현합니다. 동적으로 데이터를 받아오기 위한 라이브러리 사용법과 네트워크 통신등을 배워보며 기본기를 쌓아봅니다.

< 이런분들이라면 지금 바로 시작하세요! >

최신 프론트엔드 기술 트렌드에 목말라 있었던 분

새로 시작할 프로젝트에 Vue.js를 도입하고 싶으신 분

Vue.js로 SPA를 개발하고 서버 배포까지 다뤄보고 싶은 분

Vue.js 습득을 통해 React나 Angular 학습의 발판을 마련하고 싶은 분

프론트엔드 개발까지 커리어를 확장하고 싶은 백엔드 개발자

Vue.js를 정복하고 싶다면?

잠깐!
이 강의는 HTML과 CSS 그리고 JavaScript에 대한 이해가 있는 분들을 대상으로 하는 강의입니다. HTML & CSS 에 대한 이해가 없다면 [HTML&CSS 정복 CAMP] (클릭) 의 수강을 추천합니다. JavaScript 경험이 없거나, 문법에 대한 이해가 약하다면 [JavaScript 첫걸음/정복 CAMP] (클릭) 의 수강을 추천합니다.

< 코드 단 한줄도 놓치지 않도록 치밀하게 준비했습니다. >

매 회 강의에서 다루는 코드를 GitHub에 공유하여 언제나 복습 가능
코드에 상세한 주석을 첨부하여 마치 강사님이 함께하는 듯한 복습 가능
시공간을 초월한 질문답변 밀착지도! Slack 그룹 운영
바로 실무에 사용할 수 있는 수준의 예제 프로젝트 진행

< Vue를 제대로 활용하기 위해 갖춰야 할 필수 역량의 총집합 커리큘럼 >

주차 상세내용
1주차 Hello, Vue.js!
웹 프론트엔드 생태계가 변함에 따라 Vue.js를 배워야 하는 이유를 살펴봅니다.
프론트엔드 개발 시장의 변화 설명
자바스크립트 프레임워크를 사용하는 이유
Vue.js 소개 / 커리큘럼 소개
Vue.js 설치하기 및 간단한 예제 작성하기
다른 프레임워크(Angular, React)와 다른점 살펴보기
Vue.js를 이용한 데이터 컨트롤 & 이벤트 핸들링
데이터를 출력하고 사용자와의 인터렉션을 구현하여 동적인 웹 페이지를 구성해봅니다.
Vue 인스턴스 소개
Vue.js를 이용한 데이터 바인딩 & 이벤트 바인딩
바닐라 자바스크립트 혹은 jQuery를 이용한 방법과의 차이점 살펴보기
Vue.js의 생명주기(Life Cycle)
계산된 속성(computed)과 관찰된 속성(watch) 란?
필터 작성하기
2주차 Vue.js를 이용한 DOM 컨트롤
DOM 컨트롤을 통해 사용자에게 보여줘야할 데이터를 관리할 수 있습니다.
Vue.js를 이용한 DOM컨트롤 VS 바닐라 자바스크립트 혹은 jQuery를 이용한 DOM 컨트롤
조건부 렌더링 v-if, v-else, v-else-if, v-show
v-show와 v-if의 차이점
리스트 렌더링 v-for
이벤트 바인딩 v-on
Vue.js의 폼 입력 바인딩
사용자가 전달하는 데이터를 쉽게 컨트롤 하는 방법을 익혀봅니다.
v-model을 사용한 폼 입력 바인딩
양방향 바인딩이란?
텍스트 모델 작성하기
한글 사용시 주의할 점
라디오, 체크박스 모델 작성하기
셀렉트 모델 작성하기
수식어 사용하기
간단한 Todo 애플리케이션 구현하기
3주차 카드 뒤집기 게임 만들기
Vue.js 문법을 실제 프로젝트에 사용해봅니다. 배운 문법을 어떤 상황에 사용해야 하는지 등의 방법을 알게 됩니다.
구현한 게임을 배포해봅니다.
게임 상태 (시작, 진행 중, 끝) 구성하기
게임 상태에 따라 조건부 렌더링을 통해 화면 전환
리스트 렌더링을 통해 카드 리스트 렌더링
이벤트 바인딩을 통해 게임 진행/ 카드 뒤집기 구현
게임 끝 감지 및 엔딩 장면 처리
GitHub에 배포하기
Vue.js 컴포넌트와 컴포넌트간의 통신
Vue.js의 핵심 개념인 컴포넌트를 배웁니다. 코드의 재사용성, 캡슐화에 대해 자세히 알아봅니다.
컴포넌트란?
전역 컴포넌트와 지역 컴포넌트
부모 컴포넌트와 자식 컴포넌트의 관계
props를 이용한 데이터 전달
동적 props
props 검증하기
컴포넌트를 작성할 때 주의할 점
4주차 Vue.js 컴포넌트와 컴포넌트간의 통신
컴포넌트 사이의 데이터 전달 방법을 배우며 의존성에 대한 문제점을 이해하는 시간을 가져봅니다.
자식 컴포넌트에서 부모 컴포넌트에게 이벤트 이벤트 전달하기
이름을 갖는 slot, 범위를 갖는 slot
부모-자식 관계가 아닌 컴포넌트의 통신
동적 컴포넌트 사용하기
카드 뒤집기 게임을 컴포넌트를 이용하여 리팩토링
Vue.js의 트랜지션 기능
트랜지션(애니메이션)을 다루는 방법에 대해 배워봅니다.
전환 효과 (단일 엘리먼트, 슬라이드, 엘리먼트 간, 컴포넌트 간)
바운스 효과 및 초기 로딩 시 애니메이션 적용 속성
animate.css 라이브러리 활용 방법
애니메이션 유형 동적 변경
리스트 트랜지션
카드 뒤집기 게임에 트랜지션 효과 넣기
주차 상세내용
5주차 vue-cli를 이용한 프로젝트 생성 및 단일 파일 컴포넌트!
webpack과 ES6를 배우며 본격적인 모던 자바스크립트에 대해 배워봅니다.
Vue.js만의 문법인 단일 파일 컴포넌트를 배우며 모던 자바스크립트에 대해 더 자세히 알아봅니다.
단일 파일 컴포넌트란?
Webpack 이란?
vue-cli 설치하기
vue-cli를 사용하여 프로젝트 생성하기
새로운 ES6 문법
Hot Reload 기능 소개
외부 CSS 라이브러리 사용하기
카드 뒤집기 게임을 단일 파일 컴포넌트로 리팩토링
사용자 지정 디렉티브와 믹스인, 플러그인
공통 로직을 분리하는 방법과 플러그인을 사용하여 로직을 분리하고 오픈소스 플러그인을 사용하는 방법에 대해 배워봅니다.
사용자 지정 디렉티브 작성하기
믹스인을 활용한 코드 분리
플러그인의 사용법
플러그인 실사용 예제
플러그인 제작을 위한 Vue.js Template
6주차 axios를 사용한 네트워크 통신
최근 대부분의 웹 페이지는 ajax를 통해 동적으로 데이터를 받아옵니다.
axios라는 라이브러리와 네트워크 통신을 배우고 데이터를 받아오는 방법을 살펴봅니다.
Axios란?
axios를 사용하면 왜 좋을까?
vue-axios 소개
날씨 API 가져오기
구글맵과 날씨 API를 이용하여 일기예보 웹 애플리케이션 구현하기
GitHub에 배포하기
vue-router를 이용한 SPA 제작
vue-router 플러그인을 배우면서 SPA로 애플리케이션을 제작하는 방법을 배웁니다.
SPA(Single Page Application)란?
양방향 바인딩이란?
Vue-router란?
history 모드와 hash 모드의 차이점
vue-router를 이용한 페이지 이동 예제
vue-router를 이용하여 일기예보 모바일웹 애플리케이션 발전시키기
7주차 Google Firebase 사용하기
서버에 대한 기초를 배워 서버 개발자가 없더라도 언제든지 혼자 웹 애플리케이션을 만들 수 있는 역량을 키워봅니다.
Firebase 소개
Firebase 애플리케이션 생성방법
인증(로그인, 회원가입)하기
Firebase에 데이터 추가
Firebase에서 데이터 불러오기
Firebase를 이용한 에버노트 애플리케이션 제작하기
실제 서비스 중인 애플리케이션을 Firebase를 이용하여 비슷하게 제작해보는 과정을 통해 웹앱 제작에 대한 두려움을 극복해봅니다.
에버노트란?
데이터 모델 설계하기
컴포넌트 설계하기
Firebase를 이용하여 메모 쓰기/읽기 컴포넌트 구현
Firebase에서 불러온 데이터를 이용하여 메모 리스트 컴포넌트 구현
GitHub에 배포하기
8주차 만들고 싶은 애플리케이션 직접 개발하기
실제로 만들고 싶은 애플리케이션을 스스로 구현하며 자신감을 얻습니다. 막히는 부분이 있을 때에도 걱정하지마세요. 강사님과 함게 페어 프로그래밍으로 진행하며 문제해결능력을 갖출 수 있습니다.

강의와 관련하여 궁금한 점이 있으시다면 부담없이 최민수 매니저(02-517-0652) 에게 전화 혹은 카카오톡으로 문의주세요 :)

< Vue.js 세계에 푹빠질 8주 여정의 든든한 안내자 이선협 강사님 >

profile

개발자 이선협

현재 Trust Us에서 웹 프론트엔드 개발을 담당하고 있으며 Vue.js 관련 책을 집필하고 있습니다.
A&T Holdings와 파킹스퀘어등의 회사에서 웹 서버와 프론트엔드 개발, iOS 개발을 담당하였고 누구보다 지식 공유를 즐기고 있습니다. 그 일환으로 Vue.js Meetup 등 다양한 발표를 통해 개발 생태계 발전에 일조하고 있는 이선협 강사님은 Vue의 개념 뿐 아니라 업무 노하우를를 공유하며 수강생분들과 함께 성장하고 싶은 목표를 갖고 있습니다.

주요 발표 내용

– 2017. 4 Vue.js Meetup 운영
– 2017. 4 Swift Meetup 발표 (iOS, Reactive Programming With Swift) (자료보기)
– 2017. 2 Vue.js 사내 발표 (Tour of Vue.js) (자료보기)
– 2016. 5 Swift 사내 발표(Fuctional Reactive Programming with RxSwift) (자료보기)
– 2016. 3 Realm 사용 사례 발표 (파크히어 Realm 사용 사례) (자료보기)
– 2014. 4 C++ 코드 품질 관리 발표 (자료보기)

< 시간당 1만원 대의 투자로 최신 기술을 다룰 수 있는
프론트엔드 개발자가 될 수 있습니다. >

마지막 등록 기회!

110만 원