Do It! Vue.js 입문

Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개!
실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서!
실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.js 입문서! 이 책은 Vue.js 실무 개발 경험을 바탕으로 입문자 대상 강의를 수차례 진행해 온 현업 Vue.js 능력자가 집필했습니다. Vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고, 실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과 프로젝트 구조화 노하우까지 알차게 담았습니다. 특히 입문자들이 어려워하는 웹팩, ES6, NPM을 몰라도 쉽게 학습할 수 있도록 목차를 구성하여 배우기 쉬운 Vue.js의 특성을 잘 살렸습니다.
책에서 제공하는 ‘예제’와 ‘직접 해보세요’를 일단 직접 만들어 보세요. 그리고 상용 웹 앱 설계 방식과 컴포넌트 구조화까지 녹여낸 종합 프로젝트 ‘할 일 관리 앱’까지 만들고 나면 실무에 사용되는 기술 90%가 해결됩니다. 실무 개발자와 입문자의 고민을 누구보다 잘 이해하는 책, 《Do it! Vue.js 입문》으로 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 뷰로 프로그레시브 웹 앱을 개발하려면 어떻게
시작해야 하죠?