Top

Vue.js 2 시작하기 [가볍고 빠른 웹 개발을 위한 Vue.js]

  • 원서명Learning Vue.js 2 (ISBN 9781786469946)
  • 지은이올가 필리포바(Olga Filipova)
  • 옮긴이조승진
  • ISBN : 9788960777439
  • 30,000원
  • 2017년 05월 29일 펴냄
  • 페이퍼백 | 388쪽 | 188*235mm
  • 시리즈 : acorn+PACKT

책 소개

소스 코드 파일은 여기에서 내려 받으실 수 있습니다.

요약

Vue.js는 최신의 MVVM(Model-View-View-Model) 패턴 기반의 뷰 프레임워크이다. 재사용 가능한 컴포넌트와 반응형 바인딩의 쉬운 사용법으로 널리 알려져 있다. 프로토타입부터, Vuex를 이용하면 대규모 애플리케이션에도 적용할 수 있을 뿐만 아니라, 외부 의존성을 거의 가지지 않기 때문에 기존 프로젝트에 바로 적용해 개발하는 것도 가능하다. 이 책은 친절하고 재치 넘치는 설명법으로 포로모토 타이머와 쇼핑 목록 애플리케이션 예제를 중심으로 뷰를 사용해 SPA 앱을 개발하는 방법을 알려준다.

이 책에서 다루는 내용

■ 뷰JS를 사용해 완전히 동작하는 반응형 웹 애플리케이션을 밑바닥부터 작성하기
■ MVVM 아키텍처의 중요성과 뷰JS와 앵귤러JS/ 리액트JS 프레임워크의 차이점
■ 뷰JS를 사용해 기존 정적 애플리케이션을 반응형으로 변경하기
■ 플러그인을 사용한 애플리케이션 강화
■ 요구 사항에 맞는 커스텀 플러그인 제작
■ Vuex를 통한 애플리케이션 전역 상태 관리
■ 애플리케이션의 테스트 및 배포

이 책의 대상 독자

이 책은 웹 개발자가 되고 싶어 하는 사람들을 위해 쓰였다. 따라서 이제 막 웹 기술들을 접해본 입문자뿐 아니라 프레임워크나 다른 프로그래밍 언어와 같은 다양한 웹 기술에 이미 익숙한 전문가 모두가 이 책으로 반응형 웹 애플리케이션의 새로운 세상을 만날 수 있다.
만약 당신이 뷰 개발자고 뷰1.0을 사용해봤다면, 이 책의 모든 예제는 뷰2.0으로 작성됐기 때문에 뷰2.0으로 마이그레이션하기 위한 좋은 지침서로 활용될 수 있다. 또한 당신이 이미 뷰2.0을 사용하고 있더라도 다양한 뷰와 소프트웨어 엔지니어링의 개념을 사용해 처음부터 애플리케이션을 개발하고 나아가 배포 단계까지 진행해보는 좋은 경험을 얻을 수 있다.
이 책의 내용을 충분히 이해하려면 최소한의 기술적인 배경 지식은 필요하다. 이미 자바스크립트 코드를 작성할 수 있다면 큰 도움이 될 것이다.

이 책의 구성

1장. '뷰JS와 쇼핑 가기'에서는 뷰JS를 소개하고 책 전반에서 사용될 용어들을 정리하며, 처음으로 기본적인 예제들을 보여준다.
2장. '뷰JS의 기초: 설치 및 사용'에서는 뷰JS의 동작 원리를 설명한다. 아키텍처 패턴에 관한 이론적인 인사이트를 제공하고 거의 모든 뷰JS의 주요 개념들을 다룬다. 그리고 책의 나머지 영역을 거치면서 개발하게 될 애플리케이션을 부트스트랩한다.
3장. '컴포넌트: 이해 및 사용'에서는 컴포넌트에 대해 더 자세히 알아보고 간단한 콤퍼넌트 시스템과 단일 파일 컴포넌트를 사용해 애플리케이션을 다시 작성하는 법을 살펴본다.
4장. '반응형: 애플리케이션에 데이터 바인딩하기'에서는 뷰JS의 데이터 바인딩 메커니즘의 사용을 자세히 설명한다.
5장. 'Vuex: 애플리케이션 상태 관리'에서는 뷰JS의 상태 관리 시스템인 Vuex를 자세히 소개한다. 그리고 유지 보수 가능한 아키텍처를 위해서는 어떻게 사용해야 하는지 설명한다.
6장. '플러그인: 자신만의 벽돌로 집 짓기'에서는 뷰 애플리케이션에서 기존 플러그인을 사용하는 방법과 새로운 플러그인을 만들고 사용하는 법을 알아본다.
7장. '테스트: 지금까지 해온 것들을 테스트할 시간!'에서는 뷰 애플리케이션의 품질을 일정 수준으로 끌어올리기 위한 테스트 기술들을 살펴본다. 책의 예제 애플리케이션을 위해 단위 테스트와 종단 테스트를 작성해보면서 문제를 해결해 나간다.
8장. '배포: 서비스를 시작할 시간!'에서는 CI 도구들을 사용해 품질을 보장하면서 뷰 애플리케이션을 세상에 공개하는 법을 알려준다. 깃허브 저장소를 트래비스 CI와 헤로쿠 클라우드 배포 플랫폼에 연결하는 법을 설명한다.
9장. '그다음은?'에서는 이전까지 해온 것들을 마무리하고 독자들에게 더 공부할 내용들을 남겨둔다.

저자/역자 소개

지은이의 말

이 책은 뷰JS(Vue.js)에 관한 내용을 다룬다. 이 책은 먼저 뷰JS가 무엇인지 소개하고 다른 프레임워크와 어떻게 다른지 비교하며 이를 통해 무엇을 할 수 있는지 설명한다. 뷰JS를 이용해 작고 재미있는 애플리케이션을 작성하며 애플리케이션의 다양한 특징들을 이해하고 그 특징들을 실제로 적용해본다. 최종적으로는 우리가 배운 것을 정리하고 이후 무엇을 더 공부해야 하는지 알아본다. 다음은 앞으로 살펴볼 내용들이다. - 뷰JS가 무엇이고 어떻게 동작하는지 알아본다 - 뷰JS를 이용한 데이터 바인딩과 반응형 - 뷰JS의 재사용 가능한 컴포넌트 - 뷰JS의 플러그인 - 뷰JS 애플리케이션을 테스트하고 배포하기 이 책의 모든 예제들은 최근 공개된 뷰2.0 버전으로 작성됐고 삭제되거나 변경된 이전 버전의 내용에 관해서도 다룬다. 뷰JS를 사용한 애플리케이션 개발을 다룬 이 책의 내용이 독자 여러분의 흥미를 크게 북돋울 것이라 확신한다.

지은이 소개

올가 필리포바(Olga Filipova)

우크라이나 키예브에서 태어났으며 물리학자, 과학자, 교수 가족들 사이에서 자랐다. 우크라 국립기술대학교(National University of Ukraine Kyiv Polytechnic Institute)에서 시스템 분석을 전공했고, 20세에 포르투갈로 옮겨 코임브라대학(University of Coimbra)에서 학사 및 석사 학위를 취득했다. 재학 기간 동안 유럽에서 진행되는 프로젝트의 개발과 연구에 참여했고 컴퓨터 그래픽스와 운영체제 분야 조교로서 활동했다. 석사 학위를 취득한 후에는 피드자이(Feedzai)에서 근무를 시작했다. 그 당시 팀은 네 명으로 구성된 작은 규모의 팀으로 프로덕트를 시작부터 개발해, 현재는 가장 성공적인 포르투갈 스타트업이 됐다. 어느 시점에 엔진에서 웹 인터페이스로 데이터를 가져오는 자바스크립트 라이브러리를 작성하는 것이 주 업무가 됐고, 이를 계기로 해서 웹 개발이 주 관심사가 됐다. 동시에 코임브라의 전문가 교육 센터에서 고급 웹 개발 과정을 가르치는 일을 계속해오고 있다. 2013년에는 동생 및 남편과 함께 우크라이나에 기반을 둔 교육 프로젝트를 시작했다. 프로젝트의 이름은 EdEra며, 작은 규모의 온라인 교육 플랫폼에서 우크라이나 교육 시스템의 강자로 커나가고 있다. 현재 EdEra는 세계 시장을 노리고 있으며 IT에 관한 멋진 온라인 코스를 준비 중이니 놓치지 말자. 2014년 남편, 딸과 함께 포르투갈에서 베를린으로 이사했으며 그곳에서 미트릭스(Meetrics)의 프론트엔드 엔지니어로 일을 시작했다. 1년 후에는 멋진 프론트엔드 소프트웨어 개발자들을 이끄는 역할을 하게 됐다. 역시 소프트웨어 엔지니어이면서 멋진 남자인 루이(Rui)와 결혼했다. 루이는 코임브라 대학교에서 같이 공부했으며 피드자이에서도 함께 근무했다. 영특하고 사랑스러운 딸 타이사(Taissa)와 북실북실한 고양이 파투스카(Patusca), 두 마리의 친칠라 고양이 바라바시카(Barabashka), 체브라시카(Cheburashka)와 함께 살고 있다.

옮긴이의 말

관련 없는 분야의 사람들에게 개발자는 단순히 컴퓨터 프로그램을 작성하는 사람으로 생각되지만 실제 그 종류와 다루는 업무는 매우 다양하다. 그리고 업무의 성격과 도메인에 따라서 주로 사용되는 언어들이 존재하고, 같은 언어라도 프로젝트 진행 시에 사용하는 프레임워크에 따라 개발 스타일, 속도, 유지 보수성 등도 함께 변화한다. 이 책을 읽는 독자들은 아마 대부분 자바스크립트를 사용해본 경험이 있을 것이다. 프토로타입 기반인 자바스크립트는 동적 타입 언어며, 실행 환경이 주로 브라우저이므로 사용자와 UI의 상호작용을 방해하지 않기 위해 주로 비동기적인 특성을 가진다. 그럼 뷰SJ는 어떠한 특성을 가질까? 자바스크립트가 가지는 특성 위에 렌더링되는 뷰와 모델 사이의 데이터 바인딩을 손쉽게 만들어주며 재사용 가능한 컴포넌트를 통해 생산성과 유지 보수성을 높여준다. 여기까지는 리액트와 굉장히 유사한 특성을 보여준다고 할 수 있다. 그렇다면 어떠한 특성이 리액트와 뷰 사이에서 고민하는 개발자에게 셀링 포인트가 될 수 있을까? 이 책의 2장에도 설명돼 있지만 간단히 표현하면 빠른 개발 속도와 경량감이다. 리액트에 비해 결정해야 하는 것들의 수가 적고 기존 지식들을 활용할 수 있기 때문에 빠르게 프로토타입을 작성할 수 있다. 프로덕션 환경에 배포되는 파일 크기를 보면 뷰가 좀 더 작고, 뷰 2.0부터는 가상 DOM을 사용해 렌러딩 속도도 리액트보다 좀 더 빨라졌다. 이 점을 염두에 두면 문제 해결을 위한 선택지를 줄일 수 있을 것이다. 이 책의 저자는 여성인 동시에 한 아이의 엄마다. 따라서 책을 쓰기에 매우 어려운 환경이었을 것으로 짐작되지만, 그럼에도 이 책의 원서는 굉장히 짜임새 있게 구성돼 있으며 게다가 재치까지 가득하다. 이 책의 번역을 진행하면서 많이 배운 것 같아 기쁘고 더 많은 사람과 나눌 수 있어서 더욱 기쁘다. 번역을 진행하면서 뷰의 공식 한글화 문서를 참고해 되도록이면 용어를 통일하려고 노력했다. 아무쪼록 뷰를 시작하는 데 이 책이 좋은 출발점이 될 수 있길 기원한다.

옮긴이 소개

조승진

일본 IT 기업에서 근무 중인 소프트웨어 엔지니어다. 자바, 스프링, 자바스크립트, 파이썬, 객체지향 TDD, DDD에 관심이 많으며 웹 서비스를 개발한다. 개발자 문화를 사랑하고 세상에 영향을 미칠 수 있는 무엇인가를 만들기 위해 노력하고 있다.

목차

목차
  • 1장. 뷰JS와 쇼핑 가기
    • 유행어
    • 뷰JS의 역사
    • 뷰JS에서 가장 중요한 것
    • 쇼핑을 시작하자!
      • jQuery를 이용해 쇼핑 목록 제작하기
      • 뷰JS를 이용해 쇼핑 목록 제작하기
      • 개발자 도구를 사용해 데이터 바인딩 분석하기
      • 양방향 바인딩을 통해 사용자 입력을 데이터와 연동하기
      • v-for 지시자를 사용해 목록을 렌더링하기
      • 쇼핑 목록의 항목들을 체크, 언체크하기
      • v-on 지시자를 사용해 새로운 쇼핑 목록 추가하기
    • 뷰JS를 기존 프로젝트에서 사용하기
    • 뷰JS 2
    • 뷰JS를 이용한 프로젝트들
      • Grammarly
      • Optimizely
      • FIlterBlend
      • PushSilver
    • 책의 진행 방향
    • 시간을 관리하자!
      • 계산된 속성으로 타이틀 수정하기
      • 계산된 속성을 사용해 시간 값에 좌측 패딩 연산하기
      • 시작, 일시 정지, 정지 버튼으로 상태 저장
    • 연습 문제
    • 요약

  • 2장. 뷰JS의 기초: 설치 및 사용
    • MVVM 아키텍처 패턴
    • defineProperty, getter, setter
    • 다른 프레임워크와의 비교
      • 리액트
      • 앵귤러
    • 뷰JS 기초
      • 재사용 가능한 컴포넌트
      • 뷰JS 지시자
      • 뷰JS 플러그인
      • 연습 문제
      • 애플리케이션 상태와 Vuex
      • vue-cli
      • IDE를 위한 뷰 플러그인
    • 뷰JS 애플리케이션의 설치와 사용 그리고 디버깅
      • 뷰JS 설치
    • 뷰 애플리케이션을 디버깅
    • 애플리케이션 스캐폴딩
      • 쇼핑 목록 스캐폴딩
      • 포모도르 애플리케이션 부트스트래핑하기
      • 연습 문제
    • 요약

  • 3장. 컴포넌트: 이해 및 사용
    • 컴포넌트 다시 한 번 알아보기
    • 컴포넌트 사용의 장점
      • HTML로 템플릿 작성
      • 컴포넌트의 data와 el 속성 처리하기
      • 컴포넌트의 범위
      • 컴포넌트 내의 또 다른 컴포넌트
    • 간단한 컴포넌트를 사용해 쇼핑 목록 재작성
      • 모든 컴포넌트들을 위한 템플릿 정의하기
      • 모든 컴포넌트들을 정의하고 등록하기
    • 연습 문제
    • 단일 파일 컴포넌트
      • IDE 플러그인
      • 스타일과 스코프
      • 핫 리로딩
      • 전처리기
    • 단일 파일 컴포넌트를 사용해 쇼핑 목록 애플리케이션 재작성
      • AddItemComponent
      • ItemComponent와 ItemsComponent 구성하기
    • 연습 문제
    • 단일 파일 컴포넌트로 포모도르 애플리케이션 재작성
    • CSS 트랜지션의 반응형 바인딩
    • 요약

  • 4장. 반응형: 애플리케이션에 데이터 바인딩하기
    • 데이터 바인딩 다시 알아보기
    • 데이터 보간(interpolation)
      • 제목에 포도도로 상태 추가
      • 연습 문제.
    • 표현식과 필터 사용하기
      • 표현식
      • 필터
      • 연습 문제
    • 지시자 사용법 다시 알아보기
      • v-model 지시자를 통한 양방향 바인딩
      • v-bind 지시자를 사용해 속성 바인딩하기
      • v-if와 v-show 지시자를 사용한 조건부 렌더링
      • v-for 지시자를 사용해 배열 순회
      • v-on 지시자를 사용한 이벤트 리스너
      • 축약 표현
      • 연습 문제
    • 고양이들
    • 요약

  • 5장. Vuex: 애플리케이션 상태 관리
    • 부모 자식 관계 컴포넌트 간의 통신, 이벤트, 그리고 어려운 문제들
    • 전역 상태 관리가 필요한 이유는 무엇일까?
    • Vuex의 정체?
    • 저장소는 어떻게 동작하고 어떤 특징을 가지는가?
    • 저장소 시작하기
      • 저장소 세터와 게터
      • 변이
      • 액션
    • 예제 애플리케이션에서 Vuex 저장소를 설치하고 사용하기
    • 쇼핑 목록 애플리케이션에서 Vuex 저장소 사용하기
    • 포모도로 애플리케이션에서 Vuex 저장소 사용하기
      • 시작, 일시 정지, 정지 버튼에 활력 더하기
      • 포도도로 분과 초를 바인딩하기
      • 포모도로 타이머 생성
      • 고양이 사진 변경
    • 요약

  • 6장. 플러그인: 자신만의 벽돌로 집 짓기
    • 뷰 플러그인의 특징
    • 쇼핑 목록 애플리케이션에서 vue-ressource 플러그인 사용하기
      • 간단한 서버 생성
      • vue-resource 설치와 자원 및 메소드 생성
      • 애플리케이션 구동 시 모든 쇼핑 목록 가져오기
      • 수정 시에 서버 상태 갱신하기
      • 새로운 쇼핑 목록 생성하기
      • 기존 쇼핑 목록을 삭제하기
      • 연습 문제
    • 플러그인을 직접 만들어 포모도로에서 사용하기
      • NoiseGenerator 플러그인 제작
      • 포모도로 애플리케이션에서 플러그인 사용
      • 소리 전환을 위한 버튼 만들기
      • 연습 문제
    • 요약

  • 7장. 테스트: 지금까지 해온 것들을 테스트할 시간!
    • 왜 단위 테스트를 작성하는가?
    • 뷰 애플리케이션에서 단위 테스트
    • 쇼핑 목록 애플리케이션의 단위 테스트 작성
      • 액션, 게터, 변이 테스트하기
      • 좋은 테스트의 기준
      • 코드 커버리지
      • 서버 응답 흉내 내기 및 비동기 테스트 작성하기
      • 컴포넌트 테스트하기
    • 포모도로 애플리케이션의 단위 테스트 작성하기
    • 종단 간 테스트란 무엇인가?
    • 종단 테스트를 위한 나이트와치
    • 포모도로 애플리케이션의 종단 테스트 작성하기
    • 요약

  • 8장. 배포: 서비스를 시작할 시간!
    • 소프트웨어 배포
      • 깃허브란?
      • 트래비스란?
      • 헤로쿠란?
    • 깃허브 저장소로 애플리케이션 옮기기
    • 트래비스로 CI 구축
    • 포모도로 애플리케이션 배포하기
    • 쇼핑 목록 애플리케이션 배포하기
    • 요약

  • 9장. 그다음은?
    • 현재까지의 여정
    • 뷰 2
    • 애플리케이션 되돌아보기
      • 쇼핑 목록 애플리케이션
      • 포로모도 애플리케이션
    • 단지 이것이 시작인 이유
      • 예제 애플리케이션에 기능 추가하기
      • 애플리케이션 꾸미기
      • 애플리케이션을 다른 장치들로 확장하기
    • 요약

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안