Vue.js 철저 입문

카와구치 카즈야

Vue.js 코어 팀 멤버. 오픈 소스 소프트웨어 활동과 함께 일본 Vue.js 사용자 그룹의 대표를 맡아 커뮤니티를 운영 중이다. i18n에 열광하기도 한다. 웹 프런트 엔드 기술 외에도 웹 어셈블리 등 관심 있는 웹 기술 동향을 좇는 것이 취미다. 풀타임 오픈 소스 개발자로서 사는 삶을 모색 중이다. 이 책의 1장, 6장, 8장, 9장, 10장, 부록 B와 C를 집필했고 전반적인 내용의 감수를 맡았다.

키타 케이스케

LINE 주식회사에서 자바스크립트를 중심으로 하는 클라이언트 구현을 담당하고 있다. Vue.js의 유연함에 이끌려 업무와 취미에서 골고루 활용 중이다. 이 책에서는 2장, 5장, 부록 A를 집필했다.

노다 요헤이

IBM의 전자 디스커버리 소프트웨어 개발에서 QA 및 프런트 엔드 엔지니어로 약 5년간 근무했다. 이후 주식회사 플레이드에서 CX(고객 경험) 플랫폼인 KARTE를 개발 중이다. 이 책에서는 3장의 집필을 맡았다.

테지마 타쿠야

IBM와 LINE에서 주로 웹 프로덕트 개발을 7년간 수행했다. 이후 UPSTAY에 공동 창업자 겸 CTO로 참여해 성공적인 엑시트를 경험했다. 현재는 엔지니어를 위한 사무소 GAO GAO Asia를 창립해 대표를 맡고 있다. 이 책에서는 4장을 집필했다.

카타야마 신야

Vue.js 코어 팀 멤버로서 주로 Vue.js 개발 및 주변 라이브러리 개발 지원에 공헌했다. 정적 타이핑 및 정적 코드 분석에 관심이 있어 이들을 활용한 개발 환경 개선을 모색하고 있다. UI 및 사용자 인터랙션에도 관심이 많다. 이러한 활동의 일환으로 CSS 스터디를 운영 중이다. 이 책에서는 7장과 부록 B.3의 집필을 맡았다.

심효섭

연세대학교 문헌정보학과를 졸업하고 모교 중앙도서관과의 인연으로 도서관 솔루션 업체에서 일하면서 개발을 시작했다. 네이버에서 웹 서비스 개발 업무를 맡았으며, 웹 서비스 외에 머신러닝에 대한 공부도 꾸준히 하고 있다. 최근 관심사는 회사에 속하지 않고도 지속 가능한 삶이다. 옮긴 책으로 『도커/쿠버네티스를 활용한 컨테이너 개발 실전 입문』 『PyTorch를 활용한 강화학습/심층강화학습 실전 입문』 『PyTorch를 활용한 머신러닝, 딥러닝 철저 입문』 『딥러닝 제대로 시작하기』 『그림과 수식으로 배우는 통통 딥러닝』 등이 있다.

• ▣ 01장: 프로그레시브 프레임워크 Vue.js
  • 1.1 복잡해진 모던 웹 프런트 엔드 개발
    • 1.1.1 웹의 탄생과 웹 기반 시스템의 발전
    • 1.1.2 Ajax의 등장
    • 1.1.3 HTML5, Node.js, ES2015, React 이후의 세계
    • 1.1.4 현재의 당면 과제와 Vue.js
  • 1.2 Vue.js의 특징
    • 1.2.1 낮은 학습 비용
    • 1.2.2 컴포넌트 지향을 통한 UI 구조화
    • 1.2.3 리액티브 데이터 바인딩
  • 1.3 Vue.js의 설계 사상
    • 1.3.1 프레임워크의 복잡성
    • 1.3.2 요구사항의 변화를 수용할 수 있는 프레임워크
  • 1.4 프로그레시브 프레임워크가 제공하는 단계적 영역
    • 1.4.1 선언적 렌더링(declaritive rendering)
    • 1.4.2 컴포넌트 시스템
    • 1.4.3 클라이언트 사이드 라우팅
    • 1.4.4 대규모 상태 관리
    • 1.4.5 빌드 시스템
    • 1.4.6 클라이언트-서버 데이터 퍼시스턴스
  • 1.5 Vue.js의 기반 기술
    • 1.5.1 컴포넌트 시스템
    • 1.5.2 리액티브 시스템
    • 1.5.3 렌더링 시스템
  • 1.6 Vue.js 생태계
  • 1.7 Vue.js 첫걸음
  •  
• ▣ 02장: Vue.js의 기본 사용법
  • 2.1 Vue.js로 UI를 개발하려면 어떤 방식으로 생각해야 하는가
    • 2.1.1 기존 UI 개발의 문제점
    • 2.1.2 Vue.js를 이용한 UI 개발
  • 2.2 Vue.js 도입하기
  • 2.3 Vue 객체
    • 2.3.1 생성자
    • 2.3.2 컴포넌트
  • 2.4 Vue 인스턴스 마운트하기
    • 2.4.1 Vue 인스턴스의 적용(el)
    • 2.4.2 메서드를 이용한 마운트($mount 메서드)
  • 2.5 UI 데이터 정의(data)
    • 2.5.1 Vue 인스턴스 확인하기
    • 2.5.2 데이터 변경 탐지하기
  • 2.6 템플릿 문법
    • 2.6.1 텍스트로 전개하기
    • 2.6.2 속성값 전개하기
    • 2.6.3 자바스크립트 표현식 전개하기
  • 2.7 필터
  • 2.8 계산 프로퍼티(computed)
    • 2.8.1 this 참조하기
    • 2.8.2 예제 애플리케이션 구현하기
  • 2.9 디렉티브
    • 2.9.1 조건에 따른 렌더링(v-if, v-show)
    • 2.9.2 클래스와 스타일 연결하기
    • 2.9.3 리스트 렌더링하기(v-for)
    • 2.9.4 이벤트 핸들링(v-on)
    • 2.9.5 폼 입력 바인딩(v-model)
  • 2.10 생애주기 훅
    • 2.10.1 생애주기 훅의 종류와 호출 시점
    • 2.10.2 created 훅
    • 2.10.3 mounted 훅
    • 2.10.4 beforeDestroy 훅
  • 2.11 메서드
    • 2.11.1 이벤트 객체
    • 2.11.2 예제에 메서드 호출 적용하기
  •  
• ▣ 03장: 컴포넌트의 기초
  • 3.1 컴포넌트란 무엇인가?
    • 3.1.1 모든 것은 UI 컴포넌트로
    • 3.1.2 컴포넌트의 장점과 주의할 점
    • 3.1.3 Vue.js의 컴포넌트 시스템
  • 3.2 Vue 컴포넌트 정의하기
    • 3.2.1 전역 컴포넌트 정의하기
    • 3.2.2 생성자를 사용해서 컴포넌트 정의하기
    • 3.2.3 지역 컴포넌트 정의하기
    • 3.2.4 템플릿을 만드는 그 외의 방법
    • 3.2.5 컴포넌트 생애주기
    • 3.2.6 컴포넌트 데이터
  • 3.3 컴포넌트 간 통신
    • 3.3.1 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기
    • 3.3.2 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기
  • 3.4 컴포넌트 설계
    • 3.4.1 컴포넌트를 분할하는 원칙
    • 3.4.2 컴포넌트 설계하기
    • 3.4.3 슬롯 콘텐츠를 살린 헤더 컴포넌트 구현하기
    • 3.4.4 로그인폼 컴포넌트 구현하기
  •  
• ▣ 04장: Vue Router를 활용한 애플리케이션 개발
  • 4.1 Vue Router를 이용한 단일 페이지 애플리케이션
    • 4.1.1 Vue Router란 무엇인가
  • 4.2 기초 라우팅
    • 4.2.1 라우터 설치하기
    • 4.2.2 라우팅 설정
  • 4.3 실용적인 라우팅을 구현하기 위한 기능
    • 4.3.1 URL 파라미터를 처리하는 방법과 패턴 매칭
    • 4.3.2 이름을 가진 라우트
    • 4.3.4 router.push를 사용한 페이지 이동
    • 4.3.4 훅 함수
  • 4.4 예제 애플리케이션 구현하기
    • 4.4.1 리스트 페이지 구현하기
    • 4.4.2 API와 통신하기
    • 4.4.3 상세 정보 페이지 구현하기
    • 4.4.4 사용자 등록 페이지 구현하기
    • 4.4.5 로그인/로그아웃 구현하기
    • 4.4.6 예제 애플리케이션 전체 코드
  • 4.5 Vue Router의 고급 기능
    • 4.5.1 Router 인스턴스와 Route 객체
    • 4.5.2 중첩 라우팅
    • 4.5.3 리다이렉션과 앨리어싱
    • 4.5.4 히스토리 관리
  •  
• ▣ 05장: Vue.js의 고급 기능
  • 5.1 트랜지션 애니메이션
    • 5.1.1 transition 래퍼 컴포넌트
    • 5.1.2 트랜지션 클래스
    • 5.1.3 fade 트랜지션 구현하기
    • 5.1.4 자바스크립트 훅
  • 5.2 슬롯
    • 5.2.1 단일 슬롯
    • 5.2.2 이름을 갖는 슬롯
    • 5.2.3 슬롯의 범위
  • 5.3 사용자 정의 디렉티브
    • 5.3.1 사용자 정의 디렉티브 정의하기
    • 5.3.2 디렉티브 정의 객체
    • 5.3.3 훅 함수의 인자
    • 5.3.4 image-fallback 디렉티브에 기능 추가하기
  • 5.4 렌더링 함수
    • 5.4.1 렌더링 함수 없이는 구현이 까다로운 사례
    • 5.4.2 렌더링 함수의 효율성
    • 5.4.3 createElement 함수
  • 5.5 믹스인
    • 5.5.1 믹스인으로 기능 재사용하기
    • 5.5.2 전역 믹스인
  •  
• ▣ 06장: 단일 파일 컴포넌트를 활용한 개발
  • 6.1 필요한 도구 설치하기
    • 6.1.1 Vue CLI
  • 6.2 단일 파일 컴포넌트란?
  • 6.3 단일 파일 컴포넌트의 형식
    • 6.3.1 <template> 블록
    • 6.3.2 <script> 블록
    • 6.3.3 <style> 블록
  • 6.4 단일 파일 컴포넌트 빌드하기
  • 6.5 단일 파일 컴포넌트 사용해 보기
    • 6.5.1 단일 파일 컴포넌트의 동작 과정
  • 6.6 단일 파일 컴포넌트의 기능
    • 6.6.1 외부 파일 임포트
    • 6.6.2 범위를 갖는 CSS
    • 6.6.3 CSS 모듈
    • 6.6.4 다른 언어로 된 구현 지원
  •  
• ▣ 07장: Vuex를 이용한 데이터플로 설계 및 상태 관리
  • 7.1 복잡한 상태 관리
  • 7.2 데이터플로 설계
    • 7.2.1 신뢰할 수 있는 유일 정보원
    • 7.2.2 ‘상태 읽고 쓰기’를 캡슐화
    • 7.2.3 단방향 데이터플로
  • 7.3 Vuex를 이용한 상태 관리
    • 7.3.1 Vuex 설치하기
  • 7.4 Vuex의 주요 개념
    • 7.4.1 스토어
    • 7.4.2 스테이트
    • 7.4.3 게터
    • 7.4.4 뮤테이션
    • 7.4.5 액션
  • 7.5 태스크 관리 애플리케이션의 상태 관리
    • 7.5.1 애플리케이션 요구 사항 및 준비
    • 7.5.2 태스크 목록 표시하기
    • 7.5.3 새로운 태스크 생성 및 완료 처리
    • 7.5.4 레이블 기능 구현
    • 7.5.5 레이블로 필터링하기
    • 7.5.6 로컬 스토리지에서 저장 및 복원하기
    • 7.5.7 Vuex를 사용한 애플리케이션
  • 7.6 스토어를 모듈 단위로 분할하기
    • 7.6.1 namespaced 옵션을 이용한 네임스페이스 분할
  • 7.7 Vuex 스토어와 Vue 컴포넌트 간의 통신
    • 7.7.1 컴포넌트에서 스토어 접근하기
    • 7.7.2 스토어에 접근하는 컴포넌트를 최대한 적게 유지하라
  • 7.8 Vuex와 Vue Router 연동하기
  •  
• ▣ 08장: 중규모 및 대규모 애플리케이션 개발 1 - 개발 환경 갖추기
  • 8.1 Vue.js 프로젝트의 특징
    • 8.1.1 Vue.js로 본격적인 개발을 시작하기 위한 마음가짐
  • 8.2 이번 장에서 만들 애플리케이션
    • 8.2.1 애플리케이션의 주요 요구 사항
    • 8.2.2 애플리케이션의 아키텍처
  • 8.3 애플리케이션 개발 환경 구축하기
    • 8.3.1 개발 환경 구축 지원 도구 Vue CLI
    • 8.3.2 자바스크립트 환경 구축과 Vue CLI
  • 8.4 Vue CLI로 개발 환경 구축하기
    • 8.4.1 애플리케이션 프로젝트 생성하기
    • 8.4.2 프로젝트 구조
    • 8.4.3 태스크 명령
    • 8.4.4 애플리케이션 실행 확인
    • 8.4.5 애플리케이션의 환경 변수
  • 8.5 애플리케이션 빌드
    • 8.5.1 애셋 처리
    • 8.5.2 정적 분석 도구
  • 8.6 테스트 환경
    • 8.6.1 단위 테스트
    • 8.6.2 E2E 테스트
  • 8.7 프런트 엔드와 백 엔드 연동
    • 8.7.1 API 프락시
    • 8.7.2 백 엔드 통합
  • 8.8 개발 환경 보강하기
    • 8.8.1 Vue.js 코딩 환경 구축
    • 8.8.2 Vue.js 공식 제공 정적 분석 도구 도입
    • 8.8.3 디버깅 및 프로파일링 환경 구축
    • 8.8.4 백 엔드 API 서버 환경 구축
    • 8.8.5 상태 관리 라이브러리 도입
    • 8.8.6 HTTP 클라이언트 라이브러리 도입
    • 8.8.7 단위 테스트 유틸리티 도입
    • 8.8.8 E2E 테스트 명령 등록
  •  
• ▣ 09장: 중규모 및 대규모 애플리케이션 개발 2 - 설계
  • 9.1 컴포넌트 설계
    • 9.1.1 아토믹 디자인 원칙에 따른 컴포넌트 추출
    • 9.1.2 원자
    • 9.1.3 분자
    • 9.1.4 유기체
    • 9.1.5 템플릿
  • 9.2 단일 파일 컴포넌트 만들기
    • 9.2.1 디렉터리 구조 생성 및 파일 배치하기
    • 9.2.2 컴포넌트 API
    • 9.2.3 KbnButton 컴포넌트의 API
  • 9.3 상태 모델링 및 데이터플로 설계
    • 9.3.1 상태 모델링
    • 9.3.2 데이터플로
    • 9.3.3 데이터플로 관련 스텁 코드 작성
    • 9.3.4 액션 스텁 코드 작성
  • 9.4 라우팅 설계
    • 9.4.1 라우트 플로
    • 9.4.2 라우트 정의
  •  
• ▣ 10장: 중규모 및 대규모 애플리케이션 개발 3 - 구현
  • 10.1 개발 정책 확립
    • 10.1.1 애플리케이션 구현을 시작하기 전에
  • 10.2 컴포넌트 구현
    • 10.2.1 KbnButton 컴포넌트
    • 10.2.2 KbnLoginForm 컴포넌트
    • 10.2.3 KbnLoginView 컴포넌트
  • 10.3 데이터플로 구현
    • 10.3.1 login 액션 핸들러
    • 10.3.2 AUTH_LOGIN 뮤테이션 핸들러
    • 10.3.3 AuthAPI 모듈
  • 10.4 라우팅 구현
    • 10.4.1 beforeEach 가드를 활용한 내비게이션 가드
  • 10.5 개발 서버와 디버깅
    • 10.5.1 개발 서버를 사용해 개발하기
    • 10.5.2 Vue DevTools로 디버깅하기
  • 10.6 E2E 테스트
    • 10.6.1 E2E 테스트 구현하기
    • 10.6.2 테스트 실행하기
  • 10.7 애플리케이션 오류 처리
    • 10.7.1 자식 컴포넌트에서 발생한 오류 처리
    • 10.7.2 전역 오류 처리
  • 10.8 빌드 및 배포
    • 10.8.1 애플리케이션 빌드
    • 10.8.2 애플리케이션 배포
  • 10.9 성능 측정 및 개선
    • 10.9.1 성능 측정 설정 방법
    • 10.9.2 측정 가능한 처리
    • 10.9.3 렌더링 성능 개선
  •  
• ▣ 부록A: jQuery에서 이주하기
  • A.1 이주 결심하기
  • A.2 jQuery로 구현된 기능을 Vue.js로 옮기기
    • A.2.1 이벤트 리스너
    • A.2.2 표시/비표시 전환하기
    • A.2.3 요소 삽입 및 삭제하기
    • A.2.4 속성값 변경하기
    • A.2.5 클래스 변경하기
    • A.2.6 스타일 변경하기
    • A.2.7 폼(사용자 입력)
  •  
• ▣ 부록B: 개발 툴
  • B.1 Storybook
    • B.1.1 프로젝트에 Storybook 도입하기
    • B.1.2 Storybook 실행하기
    • B.1.3 스토리 구현하기
    • B.1.4 Storybook 공개하기
  • B.2 정적 타입 언어
    • B.2.1 TypeScript
    • B.2.2 TypeScript의 예제 코드
    • B.2.3 프로젝트 설정하기
    • B.2.4 컴포넌트 구현하기
    • B.2.5 에디터
    • B.2.6 라이브러리 타입 정의
  •  
• ▣ 부록C: Nuxt.js
  • C.1 Nuxt.js란?
  • C.2 Nuext.js의 특징
    • C.2.1 서버 사이드 렌더링 지원
    • C.2.2 바로 개발을 시작할 수 있는 개발 환경 및 확장성
    • C.2.3 정적 HTML 파일 생성 지원
  • C.3 Nuxt.js 시작하기
  • C.4 Nuxt.js를 사용해 정적 사이트 만들기
    • C.4.1 화면 설계
    • C.4.2 라우팅 추가하기
    • C.4.3 전역 내비게이션 컴포넌트 추가하기
    • C.4.4 레이아웃에 전역 내비게이션 추가하기
  • C.4.5 개발 서버에서 동작 확인하기
  • C.4.6 정적 HTML 파일 빌드하기
  •  

• GitHub 저장소: https://github.com/wikibook/vuejs
• ZIP 형식으로 다운로드: https://github.com/wikibook/vuejs/archive/master.zip

• 111쪽, 상단 예제 코드의 5번째 줄

  defalut: 기본값,
  

  ==>

  default: 기본값,
  

• 125쪽, 본문 마지막 줄 JSFiddle URL

  https://jsfiddle.net/flourscent/53hdexqp/

  ==>

  https://jsfiddle.net/flourscent/kcbjz8qs/

• 130쪽, 본문 4번째 줄

  webpack³¹을 함께 사용해서 브라우저에서도 require가 동작하는지 확인한다. 이 부분은 6.1절을 참고하라.

  ==>

  이와 함께 webpack³¹을 브라우저에서 require할 수 있도록 준비한다. 방법은 6.1절을 참고하라.

• 218쪽, 두 번째 예제 코드

  new Vue({
    el: '#app',
    render! function(createElement) {
      return createElement(MyButton, {
        attrs: {
          href: this.url
        },
        props: {
          tag: 'a'
        }
      })
    }
  })
  

  ==>

  new Vue({
    el: '#app',
    render: function (createElement) {
      return createElement(MyButton, {
        attrs: {
          href: 'https://vuejs.org/'
        },
        props: {
          tag: 'a'
        }
      }, 'anchor')
    }
  })
  

• 397쪽, 하단 예제의 2번째 줄

  $ mkdir -p src/components/{atoms,molecules,organsms,templates}
  

  ==>

  $ mkdir -p src/components/{atoms,molecules,organisms,templates}