Do it! Vue.js 입문

Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개!
실무자 3일 완성! 입문자 7일 완성! 바쁜 개발자의 시간 절약 입문서!

실무의 정글 속에서 살아남기 위한 실전 예제형 Vue.js 입문서! 이 책은 Vue.js 실무 개발 경험을 바탕으로 입문자 대상 강의를 수차례 진행해 온 현업 Vue.js 능력자가 집필했습니다. Vue.js의 기본 동작 원리부터 꼼꼼하게 설명하고, 실제 서비스를 개발할 때 필요한 컴포넌트 기반 설계 방법과 프로젝트 구조화 노하우까지 알차게 담았습니다. 특히 입문자들이 어려워하는 웹팩, ES6, NPM을 몰라도 쉽게 학습할 수 있도록 목차를 구성하여 배우기 쉬운 Vue.js의 특성을 잘 살렸습니다.

책에서 제공하는 ‘예제’와 ‘직접 해보세요’를 일단 직접 만들어 보세요. 그리고 상용 웹 앱 설계 방식과 컴포넌트 구조화까지 녹여낸 종합 프로젝트 ‘할 일 관리 앱’까지 만들고 나면 실무에 사용되는 기술 90%가 해결됩니다. 실무 개발자와 입문자의 고민을 누구보다 잘 이해하는 책, 《Do it! Vue.js 입문》으로 Vue.js를 시작하세요!

 

 프런트엔드(UI) 개발에 있어 React, JQuery 등 수많은 프레임워크가 존재한다. 필자는 현재 머신러닝 업무 중 데이터를 모으는 데이터 수집용 애플리케이션을 만드려고 하는 중인데 AWS S3에 파일을 저장하고 이를 다시 프런트 쪽에 출력하는 기능을 구현하고 있다.

 딥러닝과 프론트, 서버 등의 프로젝트를 시작하다 보니 모든 것이 새로운 환경이었다. 매번 바뀌는 개발환경이나, 갑작스러운 실무 프로젝트에 투입이 되다 보니 개발을 진행하기 전 도구의 선택이 전체 일정에 영향을 끼치게 되었다. 그러던 중 JQuery 웹을 구성하고 위젯을 설계하다가 어려움을 느끼게 되었다.

 Flash(Action Script)의 몰락으로 웹에 전혀 관심이 없는 상태였지만 Vue.js 를 공부하고 새로운 신선함을 느꼈다. 이 책에서는 Vue.js 개발을 위한 입문 과정에 대해서 설명이 되어있으며 기본적인 환경 구성부터 Todo-List 토이 프로젝트로 Vue.js 대한 이해를 돕는 책이다.

 Node.js 설치 및 npm 명령으로 환경구성을 하는 방법과 Atom Editor 설치 및 머터리얼 디자인 적용 등 책을 보면서 쉽게 따라 할 수 있어서 학습과정에서 큰 어려움을 느끼지 않았다.

 Vue.js를 학습하면서 느낀 점은 CSS의 의존성에 대한 두려움이 없어졌다. 아래 코드에서 circle.vue 파일은 template와 export 구문 style 구문이 있다. CSS의 속성은 include 한 파일에 모두 영향을 끼친다고 생각하고 있었다.

//circle.vue
<template>
 <section>
 ///...
 </section>
</template>

export default {
  name: 'app',
  data () {
    return {
	//...
    }
  },
  methods: {
	//...
   },
  mounted() {
}

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
  }

  #drawCanvas {
    border:1px solid #000000;
  }
</style>

 

scoped라는 속성을 사용하면 local에 한정할 수 있다는 점에서 신선함을 느꼈다. HTML4 까지는 해당 속성이 있다고 하는데 HTML5 에서는 없어지게 되고 브라우저에서 지원이 종료되었다고 한다. 이는 Vue.js 에서 독립적으로 지원하는 것으로 판단된다. 참고 URL - https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

<style scoped>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
  }

  #drawCanvas {
    border:1px solid #000000;
  }
</style>

 

 이외에도 SPA(Single Page Application)을 위한 router 개념 Vue.js의 라이프사이클에 따른 Dom 구성 비동기 처리를 위한 방법 등 실무에 필요한 내용들이 자세히 설명되어있다. 또한 추가적인 설명을 원하면 인프런에 고급강좌가 있어 배우고 싶다면 강의를 듣는 것을 추천한다.

Do it! Vue.js 입문:예제로 이해하고 실전 프로젝트로 완성한다!

< 본 리뷰는 필자가 직접 구매하여 작성 되었습니다 >