「고양이도 할 수 있는 Vue.js」 리뷰

필자는 회사에서 프론트엔드 프레임워크 Vue.js를 이용하여 프론트엔드 개발을 하고 있으며, 개발 언어는 Typescript를 쓰고 있다. 제이펍 출판사의 이벤트에 당첨되어, “고양이도 할 수 있는 Vue.js”라는 책을 받았으며 아래와 같이 후기를 남긴다.

I. 선행 지식

이 책을 읽으려면 약간의 선행지식이 필요하다.

초보자도 이해할 수 있는 책인건 분명하지만, 어느 정도 배경지식은 갖추고 있어야 이해할 수 있음을 밝혀둔다. 이 중에 하나라도 모르는 것이 있다면, 이 책만으로는 공부하는데 어려움이 있을 것이다.

  • HTML/CSS 기본 지식

이 책을 구매하려고 고민중인 사람들이 Vue.js를 어떤 목적으로 배우려고 하는지는 모르겠다. 하지만, Vue.js로 개발하려면 HTML/CSS로 페이지를 윤곽잡는 것부터 시작하기 때문에 HTML/CSS에 대한 배경지식은 필수적으로 요구된다.

  • 자바스크립트 기본 지식

Vue.js는 이름만 봐도 알 수 있듯이 자바스크립트로 짜여진 프레임워크이다. 자바스크립트로 짜여진 프레임워크를 이용하려면 당연히 자바스크립트에 대한 지식은 필수라고 할 수 있다.

그럼 자바스크립트 문법만 대충 알고 가도 되냐? 그렇지도 않다. 자바스크립트 문법을 아는 것 만으로는 충분하지 않다. Vue.js의 주된 용도는 자바스크립트로 UI를 구성하는 것이기 때문에, 자바스크립트를 이용해서 DOM 요소를 어떻게 조작하는지는 알고 있어야 할 것이다.

여기까지도 이해하고 있다면, 책을 펼치고 공부하는데 어려움이 없을 것이다.

아직 준비가 되어 있지 않았음에도 지금 당장 뛰어들어보고 싶다면, W3School(https://www.w3schools.com/)과 함께하기를 권장한다.

II. 책의 구성

어떤 책인지 알 수 있는 방법은 뭐니뭐니해도 목차를 살펴보는 방법이라 할 수 있다. 책의 구성을 살펴보자. 책은 9개의 장(Chapter)과 55개의 절(Section)로 구성되어 있다.

전반부에서는 Vue.js의 기본적인 기능을 설명하고 있다.

  • 1장 Vue.js 프레임워크의 기초
  • 2장 데이터 등록과 변경
  • 3장 이벤트와 입력 양식
  • 4장 데이터 감시하고 가공하기
  • 5장 컴포넌트로 UI 부품 만들기
  • 6장 트랜지션과 애니메이션

후반부에서는 자바스크립트, Vue.js 생태계를 활용해서 본격적으로 개발하는 방법을 설명하고 있다.

  • 7장 큰 규모의 애플리케이션 개발하기
  • 8장 Vuex로 애플리케이션 상태 관리하기
  • 9장 Vue Router로 SPA 만들기

목차만 봐도 알 수 있듯이 이 책은 A-Z까지 친절하게 설명해주고 있다. Vue.js의 키 컨셉을 설명하는 것부터 시작해서, 컴포넌트를 조합해서 어플리케이션의 기능을 구현하는 방법을 살펴보고, Vue.js 생태계를 활용해서 큰 규모의 어플리케이션을 만들 수 있도록 안내해준다.

완전히 초보자를 위한 책은 아니지만, Vue.js를 처음 접하는 사람들에게는 꽤 권장할 만하다.

직관적인 이해를 돕는 일러스트

입문서로서 이 책이 무엇보다 좋은 점은 중간중간에 동작원리를 설명하는 삽화가 잘 삽입되어있다는 점이다. 책의 원 저자가 엔지니어 겸 디자이너이다보니 삽화의 퀄리티도 제법 괜찮은 편이었다.

컴포넌트를 조합해서 복잡한 구성의 페이지를 간단하게 만들 수 있다는 것을 의미내는 삽화

컴포넌트를 조합해서 복잡한 구성의 페이지를 간단하게 만들 수 있다는 것을 의미내는 삽화

재사용가능한 컴포넌트를 활용해서 동일한 모양의 UI 요소를 간단하게 만들어냄을 의미하는 삽화

재사용가능한 컴포넌트를 활용해서 동일한 모양의 UI 요소를 간단하게 만들어냄을 의미하는 삽화

트랜지션 태그가 동작하는 모습을 설명하는 삽화

트랜지션 태그가 동작하는 모습을 설명하는 삽화

책 못지 않게 완성도 있는 보조 자료

책의 이해를 돕기 위해 배포된 메뉴얼 페이지도 인상적으로 와닿았다. 원본은 일본어로 되어 있지만, 한글 버전으로 옮겨진 버전이 있다. 원서 못지 않은 정성을 발휘해서 번역하신 번역가분께 리스펙을 표현하고 싶다. https://rintiantta.github.io/jpub-vue

메뉴얼 탭에서는 책에서 설명했던 소스코드들이 나열되어 있으며, 소스코드를 실행한 결과를 눈으로 직접 확인해볼 수 있다.

메뉴얼 탭에서는 책에서 설명했던 소스코드들이 나열되어 있으며, 소스코드를 실행한 결과를 눈으로 직접 확인해볼 수 있다.

메뉴얼 페이지는 Vue.js를 이용한 소스코드를 직접 돌려볼 수 있도록 개발되어 있다.

메뉴얼 페이지는 Vue.js를 이용한 소스코드를 직접 돌려볼 수 있도록 개발되어 있다.

III. 결론

이 책은 초보자도 이해할 수 있는 수준으로 설명이 잘 되어 있다. Vue.js는 공식 가이드만 봐도 사용법을 한번에 이해할 수 있을 정도로 문서화가 잘 되어 있는 것으로 잘 알려져 있으나, 본 교재는 Vue.js 가이드를 보고도 이해가 되지 않는 점들을 삽화까지 첨부하면서 이해시키려고 노력하고 있다. Vue.js 가이드가 어렵게 느껴진다면, 한번쯤은 구매를 생각해볼만 하다.

이미 Vue.js 사용법을 알고 있는 시점에서 이 책을 읽긴 했지만, 애매하게 알고 있었던 부분을 제대로 이해하는데 도움을 얻을 수 있었다. 주어진 시간이 얼마 없는 개발자라면, 쓱 훑어보면서 대략적인 컨셉을 이해하고, 필요할 때마다 관련된 챕터를 공부해보는 방법도 괜찮을 것이라 감히 권장해본다.