The Progressive
JavaScript Framework
Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.
MVVM 패턴의 ViewModel 레이터에 해당하는 View 단 라이브러리
-. 데이터 바인딩과 화면 단위를 컴포넌트(Component) 형태로 제공하며, 관련 API를 지원하는데에 궁긍적인 목적이 있음.
-. Angular에서 지원하는 2 way data bindings을 동일하게 제공 ( 뒤쪽 데이터 모델과 Vue에서 표현하는 단위가 동일 함 )
-. Component 간 통신의 기본 골격은 React의 1 way data flow ( 부모 -> 자식) 과 유사 ( Component 규칙 자체가 트리형태 )
-. Virtual DOM을 이용한 렌더링 방식이 React와 거의 유사
-. 다른 Front-End FW(Angular, React) 와 비교했을때 훨씬 가볍고 빠름.
-. 간단한 Vue를 적용하는데 있어서도 러닝커브가 낮고, 쉽게 접근 가능
※ Virtual DOM https://kr.vuejs.org/v2/guide/render-function.html#The-Virtual-DOM
※ Front End Framework 비교글 https://kr.vuejs.org/v2/guide/comparison.html
※ 2 Way data bindings
https://kr.docs.angularjs.org/guide/databinding
■ Vue.js 시작하기
https://kr.vuejs.org/v2/guide/index.html#시작하기
■ Vue.js 2.0 소개 및 시작하기
■ Vue.js 한국 사용자 모임
| 주차 | 상세내용 |
|---|---|
| 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주차 | 만들고 싶은 애플리케이션 직접 개발하기 실제로 만들고 싶은 애플리케이션을 스스로 구현하며 자신감을 얻습니다. 막히는 부분이 있을 때에도 걱정하지마세요. 강사님과 함게 페어 프로그래밍으로 진행하며 문제해결능력을 갖출 수 있습니다. |