[ Vue.js ]

승진·2019년 11월 9일

Vue.js Tutorial

목록 보기

1/6

프론트엔드 프레임워크인 Vue.js 공부를 시작해보자.
그동안 React & Redux를 사용한 프로젝트들을 만들면서 리액트에 어느정도 익숙해져 있는데,
많이 사용하는 프레임워크 중 하나인 뷰는 어떤 장점이 있는지 리액트와의 차이점을 느껴보고 싶다.
리액트에 비교적 뷰는 쉽게 접근할 수 있지만 깊게 공부할 수록 어렵기 때문에 원리를 잘 파악하며 공부하려고 한다.

Vue.js란?

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 프레임워크

사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데에 궁극적인 목적이 있음
Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공
하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름을 사용
다른 프론트엔드 프레임워크와 비교했을 때 상대적으로 가볍고 빠름
문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능

React와 공통점

Virtual DOM 렌더링
컴포넌트를 제공함
뷰에만 집중을 하고 있고, 라우터, 상태관리를 위해선 써드파티 라이브러리를 사용함
Sever Side Rendering
라우터, 번들러 state management 와 결합이 쉬움
훌륭한 개발자 커뮤니티와 지원

Vue Component

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

자식 -> 부모로 데이터 전송을 권장하지 않는다.
상위 컴포넌트를 벗어난 엘리먼트는 대상에 포함되지 않는다.
#app 밖의 HTML Tag 대상은 데이터를 주고 받는 대상으로 보지 않는다.
여기서 데이터 통신 방법을 Props / 이벤트 통신 방법을 Emit이라 한다.

Vue start

Vue는 CDN으로 가져와서 사용할 수 있다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue Instance

Vue 객체를 생성 후 el, data, template, method, life cycle hook 등 인스턴스 옵션 속성을 포함할 수 있다.

index.html

<div id="vue-app">
   <h1>{{ name }}</h1>	// 속성 사용
</div>

app.js

new Vue({
  el: "#vue-app",	// dom 선택
  data: {
    name: "Smooth"	// 속성 지정
  }
});

이렇게 name 속성이 잘 나타난다. 다른 속성도 추가해보자

index.html

<div id="vue-app">
      <h1>{{ greet("afternoon") }}</h1>
      <p>Name : {{ name }}</p>
      <p>Job : {{ job }}</p>
    </div>

app.js

new Vue({
  el: "#vue-app",
  data: {
    name: "Smooth",
    job: "developer"
  },
  methods: {
    greet: function(time) {
      return `Good ${time} ${this.name}`;
    }
  }
});

이렇게 메소드 속성도 추가할 수 있고 Vue 객체 안에서 this는 생성된 Vue 객체를 가리킨다.

Vue Directive

디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (나중에 설명할 v-for는 예외입니다.) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것 입니다. 아래 예제에서 살펴보겠습니다.

Data Binding

v-bind:디렉티브를 사용해서 속성을 사용할 수 있다.

index.html

<div id="vue-app">
      <h1>Data Binding</h1>
      <a v-bind:href="website">블로그</a>
      <input type="text" v-bind:value="name" />
    </div>

app.js

new Vue({
  el: "#vue-app",
  data: {
    name: "Smooth",
    job: "developer",
    website: "https://velog.io/@smooth97/Vue.js"
  },
  methods: {
    greet: function(time) {
      return `Good ${time} ${this.name}`;
    }
  }
});

data 속성에 html을 연결할 수도 있다.

websiteTag: '<a href="https://velog.io/@smooth97/Vue.js">Blog</a>'

<p v-html="websiteTag"></p>