쉽고 빠르게 배우는 Vue.js 2 프로그래밍

프로그레시브 자바스크립트 프레임워크

이 책은 이제 막 웹 프런트엔드를 시작했거나 기존 프레임워크의 복잡함에 지친 분들을 위한 책입니다. 이 책에서는 기존의 개발 방법을 우선 살펴보고 Vue.js가 어떻게 간결하게 해결하는지 자세히 설명합니다.

각 장에서는 Vue.js의 특성 하나하나를 자세히 설명하고, 메인 프로젝트 외에 연습문제를 통해 스스로 Vue.js를 익힐 기회를 제공합니다. 후반부에는 Vue.js를 지탱하는 최신 개발 방식을 설명합니다. 그리고 실제 프로젝트에서 사용할 수 있는 기법을 상세히 설명합니다.

★ 이 책에서 다루는 내용 ★

  • 기존 프런트엔드 개발 방법과 Vue.js의 차이점
  • Angular/React 등의 인기 있는 프레임워크와의 비교
  • Vue의 기본 문법과 활용
  • Babel, Gulp, Webpack 등 자바스크립트 개발 도구
  • Vue-Cli를 이용한 프로젝트 구축
  • 실제 데이터를 이용한 개발과 HTTP 클라이언트
  • 프런트엔드 측 페이지 처리
  • Vue 단일 파일 컴포넌트
  • Vue-Router

 

도서 상세 이미지

알렉스 키리아키디스(Alex Kyriakidis)

알렉스는 수상 경력을 가진 야심 찬 완벽주의 소프트웨어 개발자입니다. 현재 Laravel과 Vue.js에 깊이 빠져 있습니다. 알렉스는 고품질 크로스 플랫폼 애플리케이션, API 및 웹사이트를 만드는 여러 팀과 함께 일해 왔으며, 최신 기술을 배우는 데 많은 시간을 보냅니다.

코스타스 매니아티스(Kostas Maniatis)

코스타스는 알렉스에게 가르침을 받은 제자였지만 지금은 주목받는 웹 개발자가 됐으며 알렉스를 위협하는 실력을 갖추게 됐습니다. 현재 vuejsfeed.com의 운영자이며 Vue와 Laravel로 만든 블로그 플랫폼인 Vuedo 프로젝트의 핵심 멤버입니다.

박창주

현재 스타트업에서 기업용 소프트웨어를 Vue.js를 이용해 개발 중입니다. Vue.js 및 관련 라이브러리 문서의 공식 한국어 관리자이며, 지인에게 소개하려고 관심을 갖기 시작한 후 1년 이상 관리 중입니다. 현재 관리하는 문서는 Vue.js, Vue-Router, Vuex, Vue-SSR, Vue-loader 등입니다. 처음 시작하는 프런트엔드 개발자가 어떻게 성장할 수 있을지 항상 고민하고 있습니다.

  • [1부] Vue.js 기초
    • ▣ 1장: Vue.js 설치
      • 1.1 독립 실행 버전
      • 1.2 NPM 사용
      • 1.3 Bower 사용
      •  
    • ▣ 2장: 시작하기
      • 2.1 안녕하시나이까 전하!
      • 2.2 양방향 바인딩
      • 2.3 jQuery와의 비교
      • 2.4 연습 문제
      •  
    • ▣ 3장: 디렉티브
      • 3.1 v-show
      • 3.2 v-if
      • 3.3 v-else
      • 3.4 v-if vs. v-show
      • 3.5 연습 문제
      •  
    • ▣ 4장: 리스트 렌더링
      • 4.1 부트스트랩 설치와 사용
      • 4.2 v-for
      • 4.3 배열 렌더링
      • 4.4 v-for를 이용한 객체 프로퍼티 순회
      • 4.5 연습 문제
      •  
    • ▣ 5장: 상호작용
      • 5.1 이벤트 처리
      • 5.2 이벤트 한정자
      • 5.3 키 한정자
      • 5.4 계산된 프로퍼티
      • 5.5 연습 문제
      •  
    • ▣ 6장: 필터
      • 6.1 필터링된 결과
      • 6.2 결과 정렬
      • 6.3 사용자 정의 필터
      • 6.4 유틸리티 라이브러리
      • 6.5 연습 문제
      •  
    • ▣ 7장: 컴포넌트
      • 7.1 컴포넌트란?
      • 7.2 컴포넌트 사용하기
      • 7.3 템플릿
      • 7.4 프로퍼티
      • 7.5 재사용성
      • 7.6 종합 예제
      • 7.7 연습 문제
      •  
    • ▣ 8장: 사용자 정의 이벤트
      • 8.1 발생과 청취
      • 8.2 부모-자식 간 통신
      • 8.3 인자 전달
      • 8.4 비부모 자식 간 통신
      • 8.5 이벤트 리스너 제거
      • 8.6 이야기로 돌아가서
      • 8.7 연습 문제
      •  
    • ▣ 9장: 클래스와 스타일 바인딩
      • 9.1 클래스 바인딩
      • 9.2 스타일 바인딩
      • 9.3 바인딩 예제
      • 9.4 연습 문제
      •  
  • [2부] API 사용하기
    • ▣ 10장: API 사용하기
      • 10.1 CRUD
      • 10.2 API
      •  
    • ▣ 11장: 실제 데이터 활용하기
      • 11.1 비동기로 데이터 가져오기
      • 11.2 리팩터링
      • 11.3 데이터 갱신
      • 11.4 데이터 제거
      •  
    • ▣ 12장: HTTP 클라이언트 활용
      • 12.1 개요
      • 12.2 vue-resource
      • 12.3 axios
      • 12.4 axios 사용하기
      • 12.5 기능 개선
      • 12.6 자바스크립트 파일
      • 12.7 소스코드
      • 12.8 연습 문제
      •  
    • ▣ 13장: 페이지 처리
      • 13.1 구현
      • 13.2 페이지 처리 링크
      • 13.3 연습 문제
      •  
  • [3부] 대규모 애플리케이션 구축
    • ▣ 14장: ECMAScript
      • 14.1 소개
      • 14.2 변수 선언
      • 14.3 화살표 함수
      • 14.4 모듈
      • 14.5 클래스
      • 14.6 기본 매개변수 값
      • 14.7 템플릿 리터럴
      •  
    • ▣ 15장: 고급 워크플로우
      • 15.1 Babel을 이용한 ES6 컴파일
      • 15.2 Gulp를 이용한 워크플로우 자동화
      • 15.3 Webpack을 이용한 모듈 번들링
      • 15.4 정리
      •  
    • ▣ 16장: 단일 파일 컴포넌트
      • 16.1 vue-cli
      • 16.2 Webpack 템플릿
      • 16.3. vue 파일 만들기
      •  
    • ▣ 17장: 중복 상태 제거
      • 17.1 프로퍼티를 이용한 공유
      • 17.2 전역 저장소
      •  
    • ▣ 18장: 컴포넌트 교체
      • 18.1 동적 컴포넌트
      •  
    • ▣ 19장: Vue 라우터
      • 19.1 설치
      • 19.2 사용법
      • 19.3 이름을 가지는 라우트
      • 19.4 히스토리 모드
      • 19.5 중첩 라우트
      • 19.6 자동 active 클래스 설정
      • 19.7 라우트 객체
      • 19.8 동적 세그먼트
      • 19.9 라우트 별칭
      • 19.10 라우트 푸시
      • 19.11 트랜지션
      • 19.12 내비게이션 가드
      • 19.13 연습 문제
      •  
    • ▣ 20장: 마무리하며
      •  
    • ▣ 21장: 참고 자료
      • 21.1 튜토리얼
      • 21.2 동영상
      • 21.3 책
      • 21.4 오픈소스 프로젝트
      • 21.5 Awesome Vue

예제코드 관련 GitHub 페이지

  • 12쪽, 목차에서 다음 항목의 페이지 번호 수정

    21.4 오픈소스 프로젝트 306

    ==>

    21.4 오픈소스 프로젝트 307

  • 12쪽, 목차에서 다음 항목의 페이지 번호 수정

    21.5 Awesome Vue 306

    ==>

    21.5 Awesome Vue 308

  • 94쪽, 아래의 첫 번째 단락에서 3번째 단락까지 삭제

    앞의 두 개의 장에서 리스트 렌더링, 메서드 및 계산된 프로퍼티를 알아봤습니다. 이제 앞에서 배운 내용을 활용해 몇 가지 예제를 만들어볼 차례입니다. 이번 장에서는 다음과 같은 내용을 알아봅니다.

     1. 배열의 항목 필터링

     2. 배열의 항목 정렬

     3. 사용자 정의 필터 적용

     4. 유틸리티 라이브러리 활용

    이번 장에서는 비슷한 예제를 통해 앞에서 배운 기법의 일부 또는 전부를 활용해 보겠습니다.

  • 102쪽, 상단 예제 코드의 9번째 줄

    <li vv-for="story in search"
    

    ==>

    <li v-for="story in search"
    
  • 192쪽, 맨 마지막 줄

    패이지 처리 객체는

    ==>

    페이지 처리 객체는

  • 206쪽, 5번째 줄

    //설정자를 만듭니다. set 키워드를 사용합니다
    

    ==>

    //설정자를 만듭니다. 접근자와 똑같이 하면 되고, set 키워드를 사용합니다.
    
  • 207쪽, 첫 번째 예제의 두 번째 줄

    console.log('Hello ${name}')
    

    ==>

    console.log(`Hello ${name}`)
    
  • 207쪽, 두 번째 예제의 3번째 줄

    console.log('If you have ${a} eggs and you buy ${b}
    more you'll have ${add(a,b)} eggs!')
    

    ==>

    console.log(`If you have ${a} eggs and you buy ${b}
    more you'll have ${add(a,b)} eggs!`)
    
  • 207쪽, 세 번째 예제의 2번째 줄

    console.log('If you have ${a} eggs and you buy ${b}
    more you'll have ${a + b} eggs!')
    

    ==>

    console.log(`If you have ${a} eggs and you buy ${b}
    more you'll have ${a + b} eggs!`)
    
  • 231쪽, 밑에서 8번째 줄

    Webpack은 vue-loader1를 사용해

    ==>

    Webpack은 vue-loader1를 사용해