[Vue] Vue.js 시작하기

1. Vue.js란 무엇인가요?

vue 공식 문서

vue공식 문서에 나와있는 vue.js의 정의는 다음과 같습니다.

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

즉, Vue는 웹을 개발하는 프레임워크 중 하나입니다.
(이러한 프레임워크 3대장에는 vue.js말고도 React.js, AngularJs도 있습니다.)

2. Why Vue.js

출처:daniel-parkT스토리

앞서 이야기 한 프레임워크의 3대장의 Learning Curve 살펴보면 다음과 같습니다.

Vue.js (하)

HTML과 Javscript의 기본에 가장 가깝기 때문에, 가장 친숙합니다. vue.js를 시작하는 것은, 당신의 HTML 문서에 하나를 추가하는 것만큼 쉽습니다.

하지만 vue.js는 당신이 더 복잡한 어플리케이션을 만들수록 더 복잡해집니다. 복잡한 어플리케이션을 위해서는 더 복잡한 프로젝트 실정(VueCLI가 훨씬 더 쉽게 하지만) .vue 파일들을 다를 술 알아야 합니다.

React.js (중)

“모든 것들이 Javascript이다”라는 접근이지만, 두 가지 주의한 점이 있습니다.
첫 번째로, ES6 구문들과 최적화되어 있기 때문에, 막 개발을 시작한 사람들에게는 어려울 수 있습니다. 두 번째는, Javascript의 대체적인 프로젝트에서 살 쓰이지 않는 HTML과 Javscript이 혼합된 구문인 JSX입니다. JSX는 HTML처럼 보이지만 Javascript이고, 코드를 이해하는데 혼란이 을 수 있기 때문에 처음에는 어려울 수 있습니다.

Angular.js (상)

Angular는 Typescript를 사용하기 때문에, 배우기 어렵습니다. 컴포넌트, 모듈 그리고 구문들은 Javascript와는 꽤 다릅니다. Angular는 강력한 기능들이 많이 내장되어 있기 때문에, 개발자들이 어플리케이션을 개발하는데 도움이 될 수 있을지도 모르는 특정 패턴으로 코딩하도록 합니다.

3. vue 프로젝트 시작하기

3-1 script 삽입

<script src="https://unpkg.com/vue@next"></script>

3-2 vue cli이용

$ vue create hello-world

npm run serve를 통해 개발서버를 오픈할 수 있습니다.

3-3 vue ui이용

$ vue ui

vue cli와 달리 ui를 이용해 프로젝트를 만들 수 있다는데 장점이 있습니다.

4. 선언적 렌더링

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.

4-1 텍스트 보관 {{}}

data를 {{}} 이중 중괄호를 통해 텍스트로 출력을 할 수 있습니다.

<template>
<div>
  <h1>Hello World</h1>
  <!-- 선언적 렌더링 -->
  <span>{{ message }}</span>
</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello FastCampus School'
    }
  }
}
</script>

vue.dev tool을 이용해 화면에서 출력되는 내용을 바로 수정할 수도 있습니다.

4-2 엘리먼트 속성 바인딩 v-bind

<template>
<div>
  <h1>Hello World</h1>
  <!-- 선언적 렌더링 -->
  <h3 v-bind:title="message"> 내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다.</h3>
</div>
</template>

<script>
export default {
  data() {
    return {
      message: '이 페이지는' + new Date() + '에 로드 되었습니다.'
    }
  },

마찬가지로 vue.dev tool을 이용해 화면에서 출력되는 내용을 바로 수정할 수도 있습니다.

앞서는 data를 {{}}이중 중괄호를 이용해 텍스트로 출력을 했다면, 이번에는 vue.js만의 v-bind라는 v디렉티브 속성을 이용해 메세지를 반응형으로 보여주고 있습니다.

v-bind 디렉티브
디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 “이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지 합니다.”

5. 조건문과 반복문

5-1 조건문 v-if

<template>
<div>
  <h1>Hello World</h1>
  <!-- 선언적 렌더링 -->
  <h3 v-bind:title="message"> 내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다.</h3>
  <h3 v-if="seen">이제 나를 볼 수 있어요.</h3>
  <button @click="seen=!seen">Click!</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      message: '이 페이지는' + new Date() + '에 로드 되었습니다.',
      seen: true
    }
  },

이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 전환 효과 시스템을 제공합니다.

5-2 반복문 v-for

v-for 디렉티브는 배열의 데이터를 바인딩하여 Todo 목록을 표시하는데 사용할 수 있습니다.

<template>
  <div>
    <h1>{{ message }}</h1>
    <ul>
      <li
        v-for="todo in todos"
        :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello vue world!',
      todos: [
        {text: '사과', id:1},
        {text: '두리안', id:2},
        {text: '망고', id:3},
      ]
    }
  },

6. 사용자 입력 핸들링

6-1 v-on디렉티브

사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수 있습니다

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">
      Click!
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello vue world!',
    }
  },
  methods :{
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

6-2 v-model 디렉티브

Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello vue world!',
    }
  }
}
</script>

7. 컴포넌트를 사용한 작성방법

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스로, 위 그림과 같이 한 블록블록을 하나의 컴포넌트로 쪼개서 구성을 할 수 있습니다.

대규모 애플리케이션에서는 개발을 보다 쉽게 관리 할 수 있도록 전체 앱을 컴포넌트로 나누는 것이 필수적입니다.

7-1 부모데이터 전달

부모 영역의 데이터를 자식 컴포넌트에 전달할 수 있어야 합니다. 아래 예제는 props와 v-bind를 이용해 todos라는 데이터를 전달한 결과입니다.

부모컴포넌트

<template>
  <img
    alt="Vue logo"
    src="./assets/logo.png" />
  <HelloWorld
    v-for="todoItem in todos"
    v-bind:todo="todoItem"
    v-bind:key="todoItem.id" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      todos: [
        {text: '사과', id:1},
        {text: '두리안', id:2},
        {text: '망고', id:3},
      ]
    }
  }
}
</script>

HelloWorld.vue

<template>
  <div>
    <h4>{{ todo.text }}</h4>
  </div>
</template>

<script>
export default {
  props: {
    todo: {
      type:Object,
      default: ''
    }
  },
  data() {
    return {
      message: 'Hello vue world!',
    }
  }
}
</script>