책소개

<b>;Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개! <BR>;실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서! </b>;<BR>;실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.js 입문서! 이 책은 Vue.js 실무 개발 경험을 바탕으로 입문자 대상 강의를 수차례 진행해 온 현업 Vue.js 능력자가 집필했습니다. Vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고, 실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과 프로젝트 구조화 노하우까지 알차게 담았습니다. 특히 입문자들이 어려워하는 웹팩, ES6, NPM을 몰라도 쉽게 학습할 수 있도록 목차를 구성하여 배우기 쉬운 Vue.js의 특성을 잘 살렸습니다. <BR>;책에서 제공하는 ‘예제’와 ‘직접 해보세요’를 일단 직접 만들어 보세요. 그리고 상용 웹 앱 설계 방식과 컴포넌트 구조화까지 녹여낸 종합 프로젝트 ‘할 일 관리 앱’까지 만들고 나면 실무에 사용되는 기술 90%가 해결됩니다. 실무 개발자와 입문자의 고민을 누구보다 잘 이해하는 책, 《Do it! Vue.js 입문》으로 Vue.js를 시작하세요!<BR>;<BR>;<b>;현업에서 Vue.js를 사용 중인 저자만이 집필할 수 있는 친절한 목차 구성! <BR>;400명 이상 수강생에게 Vue.js를 가르치며 터득한 입문자의 눈높이로 설명합니다. </b>;<BR>;<BR>;대부분의 입문자들은 처음 프런트엔드 프레임워크를 배울 때 웹팩, ES6, NPM과 같은 기술들을 모두 이해해야만 시작할 수 있다고 생각합니다. 그래서 시작조차 하지 못하는 경우가 많습니다. <BR>;국내 최초 Vue.js 전문 강사인 저자는 온·오프라인 강의를 진행하며 입문자의 눈높이를 깨닫고, 실무 경험과 강의 경험을 바탕으로 입문자들의 진입 장벽을 낮출 수 있는 목차를 구성했습니다. 첫째마당에서 Vue.js의 기본 단위인 인스턴스와 컴포넌트를 익혀 애플리케이션을 컴포넌트 기반으로 설계할 수 있는 능력을 기릅니다. 이러한 구조를 먼저 익히면 라우터, HTTP 통신, 템플릿, 프로젝트 구성 방법을 더 쉽게 이해할 수 있습니다. 이를 바탕으로 둘째마당에서 실제 웹 앱까지 만들어 봅니다.<BR>;<BR>;<b>;50개 도해와 실전 예제로 더 빠르게 이해하는 Vue.js<BR>;일단 만들면 실무에 사용하는 기술 90%가 저절로 익혀집니다!</b>;<BR>;<BR>;이 책은 구글링이 필요 없을 만큼 자세한 용어 설명과 다양한 도해로 Vue.js 기본 개념을 쉽게 이해하고, ‘실전 예제’와 ‘직접 해보세요’ 코너를 통해 몸으로 습득합니다. 그야 말로 키보드 잡고 Do it! 하며 배웁니다. 배운 내용을 종합한 실전 애플리케이션인 ‘할 일 관리 앱’까지 직접 만들어 볼 수 있고, 책 곳곳에서 Vue.js 중·고급 개발자로 성장할 수 있는 팁까지 제공합니다. 이 책을 다 보고 나면 실무에 사용하는 기술 90%가 저절로 익혀지고, Vue.js를 스스로 응용할 수 있는 자신감이 생길 겁니다.<BR>;<BR>;<b>;Vue.js로 갈아탈지 말지 고민되나요? ‘현장 밀착 취재’에서 그 답을 확인하세요.</b>;<BR>;<BR>;지금 쓰고 있는 제이쿼리와 Vue.js를 같이 쓸 수 있는지 궁금한가요? 개발 기간이 너무 짧은데 기존 코드에 Vue.js를 바로 적용할 수는 없을까요? 더 이상 걱정하지 마세요. 이 책의 부록 ‘현장 밀착 취재’에서 개발자들이 고민하는 내용들을 Q&A 형태로 미리 정리해 두었습니다. Vue.js로 요즘 가장 핫한 프로그레시브 웹 앱(PWA) 개발을 시작하는 방법까지 덤으로 알려드립니다. <BR>;<BR>;<b>;주말 동안 공부하고 월요일에 바로 쓴다! - 맞춤형 학습 진도표</b>;<BR>;<BR>;이 책은 입문자와 실무자를 위한 맞춤형 학습 진도표를 제공합니다. Vue.js 입문자라면 하루 두 시간씩 7일, 프런트엔드 개발 경험이 있는 실무자라면 3일 안에 Vue.js를 완성할 수 있습니다. 진도표에 함께 제시된 학습 목표를 바탕으로 체계적인 학습을 시작해 보세요.<BR>;<BR>;<b>;혼자 공부하다 지치지 않도록 도와드립니다! - Do it! 스터디룸</b>;<BR>;<BR>;만약 혼자 공부하기 힘들다면 함께 공부하는 친구들을 만날 수 있는 Do it! 스터디룸 네이버 카페(cafe.naver.com/doitstudyroom)를 방문해 보세요. 책도 보고 선물도 받는 ‘두잇 공부단’도 참여할 수 있습니다.<BR>;<BR>;※ 저자의 기술 블로그(https://joshua1988.github.io/)에서 최신 프런트엔드 개발 트렌드에 대한 다양한 이야기를 만나보세요. 책의 모든 소스 코드는 저자의 깃허브(https://github.com/joshua1988)와 이지스퍼블리싱 홈페이지(www.easyspub.co.kr)에서 다운로드받을 수 있습니다.<BR>;<BR>;<b>;[이 책의 Vue.js 강의를 미리 접한 온·오프라인 수강생들의 한마디!]</b>;<BR>;<BR>;사소한 궁금증과 용어까지 놓치지 않고 꼼꼼하게 담겨 있어, 추가 강의나 설명 없이 혼자 완독하고 공부할 수 있는 책입니다. 이론뿐 아니라 꿀잼 실습과 다른 UI 요소와 연동 방법까지 알려줍니다. 프로젝트에 Vue.js를 적용해야 한다면 이 책을 추천합니다. - 김준영, 고려대학교 컴퓨터학과 3학년(인프런 강의 수강생)<BR>;<BR>;이 책을 보고 세 가지에 놀랐어요! 알차게 꼭꼭 눌러 담은 Vue.js 핵심 내용들, 독자가 궁금해 할 만한 내용에 대한 세심한 설명, 그리고 실무에서 Vue.js를 사용할 때 꼭 필요한 내용들을 담고 있는 부록 그 이상의 부록까지!<BR>;- 김동빈, 네이버 프런트엔드 엔지니어(패스트 캠퍼스 강의 1기 수강생)<BR>;<BR>;프런트엔드 프레임워크를 배우며 가장 어려웠던 건 프레임워크의 원리와 구조를 이해하는 것이었습니다. 용어와 개념이 익숙하지 않은 상태에서 읽는 설명들은 추상적이고 난해했어요. 하지만 이 책은 그림을 활용해서 프레임워크의 원리, 구조 등을 직관적으로 이해할 수 있습니다. 또한 입문자는 중급 이상의 개발자들이 미처 생각하지 못한 매우 사소한 부분에서 어려움을 느낄 수 있는데, 이런 부분도 놓치지 않고 쉽게 설명해 주어 좋 습니다. - 임송이, 데이터 콘텐츠 시각화 디자이너(패스트 캠퍼스 강의 2기 수강생)

저자소개

미국 샌프란시스코에서 IT 인턴십을 시작으로 포스코 ICT 기술 연구소에 재직 중이다. 기업용 자바스크립트 프레임워크 및 다수의 B2B 엔터프라이즈 웹 앱을 개발했다. Vue.js 실무 개발 경험을 바탕으로 온·오프라인에서 국내 최초 Vue.js 강의를 진행 중이다. Google 웹 기술 공식 사이트 번역 및 Google Developer Group WebTech 커뮤니티 리더를맡는 등 웹 개발 커뮤니티 활동에도 적극적으로 참여하고 있다. 또한 대한민국 연예인 예술 협회에 가수로 등재되어 있는 노래하는 개발자이다. 다른 사람에게 도움이 많이 되었다는 이야기를 들을 때 가장 뿌듯함을 느낀다는 저자는, 지식을 나눔으로써 세상을 이롭게 하는 데 힘을 보태는 삶을 살고 싶다고 한다.

강의
※ 온라인 교육 플랫폼 인프런
[누구나 다루기 쉬운 Vue.js 프런트 개발]
[쉽게 배우는 Webpack]
※ 실무 교육 기관 패스트 캠퍼스
[프런트엔드 개발자를 위한 웹 앱 CAMP]
[Vue.js로 구현하는 PWA CAMP]

수상
2014년 대한민국 소프트웨어 기술 대상 우수상
2017년 포스코 ICT 우수 사내 전문 강사상

목차

첫째마당 Vue.js 필수 기술 살펴보기
\r\n
\r\n01 Vue.js 소개
\r\n01-1 Vue.js란 무엇인가?
\r\nVue.js란?
\r\n프레임워크 시장 속에서 뷰의 위치와 성장성
\r\n뷰의 장점
\r\n
\r\n01-2 Vue.js의 특징
\r\nUI 화면단 라이브러리
\r\n컴포넌트 기반 프레임워크
\r\n리액트와 앵귤러의 장점을 가진 프레임워크
\r\n
\r\n02 개발 환경 설정 및 첫 번째 프로젝트
\r\n02-1 뷰 학습을 위한 개발 환경 설정하기
\r\n크롬 브라우저 설치하기
\r\n아톰 에디터 설치하기
\r\n아톰 테마
\r\n아톰 패키지
\r\n노드제이에스 설치하기
\r\n뷰 개발자 도구 설치하기
\r\n
\r\n02-2 Hello Vue.js! 프로젝트 만들기
\r\n뷰 시작하기
\r\n크롬 개발자 도구로 코드 확인하기
\r\n뷰 개발자 도구로 코드 확인하기
\r\n뷰 개발자 도구 사용 방법
\r\n
\r\n03 화면을 개발하기 위한 필수 단위
\r\n 인스턴스 & 컴포넌트
\r\n03-1 뷰 인스턴스
\r\n뷰 인스턴스의 정의와 속성
\r\n뷰 인스턴스 옵션 속성
\r\n뷰 인스턴스의 유효 범위
\r\n뷰 인스턴스 라이프 사이클
\r\n
\r\n03-2 뷰 컴포넌트
\r\n컴포넌트란?
\r\n컴포넌트 등록하기
\r\n지역 컴포넌트와 전역 컴포넌트의 차이
\r\n
\r\n03-3 뷰 컴포넌트 통신
\r\n컴포넌트 간 통신과 유효 범위
\r\n상·하위 컴포넌트 관계
\r\n상위에서 하위 컴포넌트로 데이터 전달하기
\r\n하위에서 상위 컴포넌트로 이벤트 전달하기
\r\n같은 레벨의 컴포넌트 간 통신
\r\n관계 없는 컴포넌트 간 통신 - 이벤트 버스
\r\n
\r\n04 상용 웹 앱을 개발하기 위한 필수 기술들
\r\n 라우터 & HTTP 통신
\r\n04-1 뷰 라우터
\r\n라우팅이란?
\r\n뷰 라우터
\r\n네스티드 라우터
\r\n네임드 뷰
\r\n
\r\n04-2 뷰 HTTP 통신
\r\n웹 앱의 HTTP 통신 방법
\r\n뷰 리소스
\r\n액시오스
\r\n
\r\n05 화면을 개발하기 위한 기본 지식과 팁
\r\n템플릿 & 프로젝트 구성
\r\n05-1 뷰 템플릿
\r\n뷰 템플릿이란
\r\n데이터 바인딩
\r\n자바스크립트 표현식
\r\n디렉티브
\r\n이벤트 처리
\r\n고급 템플릿 기법
\r\n
\r\n05-2 뷰 프로젝트 구성 방법
\r\nHTML 파일에서 뷰 코드 작성 시의 한계점
\r\n싱글 파일 컴포넌트 체계
\r\n뷰 CLI
\r\n뷰 CLI로 프로젝트 생성하기
\r\n뷰 로더
\r\n
\r\n둘째마당 Vue.js 실전 투입!
\r\n06 실전 애플리케이션 만들기
\r\n06-1 할 일 관리 앱 살펴보기
\r\n왜 할 일 관리 앱을 만들어야 하나?
\r\n할 일 관리 앱 살펴보기
\r\n애플리케이션 컴포넌트 구조도
\r\n
\r\n06-2 프로젝트 생성하고 구조 확인하기
\r\n뷰 CLI를 이용한 프로젝트 생성
\r\n프로젝트 초기 설정
\r\n
\r\n06-3 컴포넌트 생성하고 등록하기
\r\n컴포넌트 생성
\r\n컴포넌트 등록
\r\n
\r\n06-4 컴포넌트 내용 구현하기
\r\n애플리케이션 제목을 보여주는 TodoHeader
\r\n컴포넌트
\r\n할 일을 입력하는 TodoInput 컴포넌트
\r\n저장된 할 일 목록을 표시하는 TodoList
\r\n컴포넌트
\r\nTodoList.vue에 할 일 삭제 기능 추가하기
\r\n모두 삭제하기 버튼을 포함하는 TodoFooter
\r\n컴포넌트
\r\n
\r\n06-5 기존 애플리케이션 구조의 문제점 해결하기
\r\n현재 애플리케이션 구조의 문제점
\r\n문제 해결을 위한 애플리케이션 구조 개선
\r\nprops와 이벤트 전달을 이용해 할 일 입력 기능
\r\n개선하기
\r\n이벤트 전달을 이용해 Clear All 버튼 기능
\r\n개선하기
\r\n이벤트 전달을 이용해 할 일 삭제 기능 개선하기
\r\n
\r\n06-6 더 나은 사용자 경험을 위한 기능 추가하기
\r\n뷰 애니메이션
\r\n뷰 모달
\r\n
\r\n07 Vue.js 고급 개발자 되기
\r\n07-1 뷰 중·고급 레벨로 올라가기 위한 지식
\r\nVuex
\r\n뷰의 반응성
\r\n서버 사이드 렌더링
\r\n
\r\n07-2 뷰 개발을 위한 웹팩
\r\n웹팩이란?
\r\n웹팩의 주요 속성
\r\n웹팩 데브 서버
\r\nwebpack-simple 프로젝트의 웹팩 설정
\r\n파일 분석
\r\n
\r\n07-3 뷰 개발을 위한 ES6
\r\nES6란?
\r\nconst와 let 예약어
\r\n블록의 유효 범위
\r\n화살표 함수
\r\nImport와 Export
\r\n
\r\n07-4 뷰 CLI에서 사용하는 NPM
\r\nNPM 소개
\r\nNPM 설치 명령어
\r\n전역 설치와 지역 설치
\r\nNPM 커스텀 명령어
\r\n
\r\n현장 밀착 취재
\r\n지금 당장 실무에서 써먹는 Vue.js
\r\nTip 1 뷰와 제이쿼리를 같이 사용해도 되나요?
\r\nTip 2 개발 기간이 너무 짧은데 기존 레거시 코드에
\r\n어떻게 뷰를 바로 적용하죠?
\r\nTip 3 뷰에 UI 라이브러리와 차트를 어떻게
\r\n연동할까요?
\r\nTip 4 뷰로 프로그레시브 웹 앱을 개발하려면 어떻게
\r\n시작해야 하죠?

한줄 서평