Do it! Vue.js 입문

첫째마당 Vue.js 필수 기술 살펴보기

01 Vue.js 소개
01-1 Vue.js란 무엇인가?
Vue.js란?
프레임워크 시장 속에서 뷰의 위치와 성장성
뷰의 장점

01-2 Vue.js의 특징
UI 화면단 라이브러리
컴포넌트 기반 프레임워크
리액트와 앵귤러의 장점을 가진 프레임워크

02 개발 환경 설정 및 첫 번째 프로젝트
02-1 뷰 학습을 위한 개발 환경 설정하기
크롬 브라우저 설치하기
아톰 에디터 설치하기
아톰 테마
아톰 패키지
노드제이에스 설치하기
뷰 개발자 도구 설치하기

02-2 Hello Vue.js! 프로젝트 만들기
뷰 시작하기
크롬 개발자 도구로 코드 확인하기
뷰 개발자 도구로 코드 확인하기
뷰 개발자 도구 사용 방법

03 화면을 개발하기 위한 필수 단위
인스턴스 & 컴포넌트
03-1 뷰 인스턴스
뷰 인스턴스의 정의와 속성
뷰 인스턴스 옵션 속성
뷰 인스턴스의 유효 범위
뷰 인스턴스 라이프 사이클

03-2 뷰 컴포넌트
컴포넌트란?
컴포넌트 등록하기
지역 컴포넌트와 전역 컴포넌트의 차이

03-3 뷰 컴포넌트 통신
컴포넌트 간 통신과 유효 범위
상·하위 컴포넌트 관계
상위에서 하위 컴포넌트로 데이터 전달하기
하위에서 상위 컴포넌트로 이벤트 전달하기
같은 레벨의 컴포넌트 간 통신
관계 없는 컴포넌트 간 통신 - 이벤트 버스

04 상용 웹 앱을 개발하기 위한 필수 기술들
라우터 & HTTP 통신
04-1 뷰 라우터
라우팅이란?
뷰 라우터
네스티드 라우터
네임드 뷰

04-2 뷰 HTTP 통신
웹 앱의 HTTP 통신 방법
뷰 리소스
액시오스

05 화면을 개발하기 위한 기본 지식과 팁
템플릿 & 프로젝트 구성
05-1 뷰 템플릿
뷰 템플릿이란
데이터 바인딩
자바스크립트 표현식
디렉티브
이벤트 처리
고급 템플릿 기법

05-2 뷰 프로젝트 구성 방법
HTML 파일에서 뷰 코드 작성 시의 한계점
싱글 파일 컴포넌트 체계
뷰 CLI
뷰 CLI로 프로젝트 생성하기
뷰 로더

둘째마당 Vue.js 실전 투입!
06 실전 애플리케이션 만들기
06-1 할 일 관리 앱 살펴보기
왜 할 일 관리 앱을 만들어야 하나?
할 일 관리 앱 살펴보기
애플리케이션 컴포넌트 구조도

06-2 프로젝트 생성하고 구조 확인하기
뷰 CLI를 이용한 프로젝트 생성
프로젝트 초기 설정

06-3 컴포넌트 생성하고 등록하기
컴포넌트 생성
컴포넌트 등록

06-4 컴포넌트 내용 구현하기
애플리케이션 제목을 보여주는 TodoHeader
컴포넌트
할 일을 입력하는 TodoInput 컴포넌트
저장된 할 일 목록을 표시하는 TodoList
컴포넌트
TodoList.vue에 할 일 삭제 기능 추가하기
모두 삭제하기 버튼을 포함하는 TodoFooter
컴포넌트

06-5 기존 애플리케이션 구조의 문제점 해결하기
현재 애플리케이션 구조의 문제점
문제 해결을 위한 애플리케이션 구조 개선
props와 이벤트 전달을 이용해 할 일 입력 기능
개선하기
이벤트 전달을 이용해 Clear All 버튼 기능
개선하기
이벤트 전달을 이용해 할 일 삭제 기능 개선하기

06-6 더 나은 사용자 경험을 위한 기능 추가하기
뷰 애니메이션
뷰 모달

07 Vue.js 고급 개발자 되기
07-1 뷰 중·고급 레벨로 올라가기 위한 지식
Vuex
뷰의 반응성
서버 사이드 렌더링

07-2 뷰 개발을 위한 웹팩
웹팩이란?
웹팩의 주요 속성
웹팩 데브 서버
webpack-simple 프로젝트의 웹팩 설정
파일 분석

07-3 뷰 개발을 위한 ES6
ES6란?
const와 let 예약어
블록의 유효 범위
화살표 함수
Import와 Export

07-4 뷰 CLI에서 사용하는 NPM
NPM 소개
NPM 설치 명령어
전역 설치와 지역 설치
NPM 커스텀 명령어

현장 밀착 취재
지금 당장 실무에서 써먹는 Vue.js
Tip 1 뷰와 제이쿼리를 같이 사용해도 되나요?
Tip 2 개발 기간이 너무 짧은데 기존 레거시 코드에
어떻게 뷰를 바로 적용하죠?
Tip 3 뷰에 UI 라이브러리와 차트를 어떻게
연동할까요?
Tip 4 뷰로 프로그레시브 웹 앱을 개발하려면 어떻게
시작해야 하죠?