뷰에 νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ μš©ν•˜κΈ°

λ·° μ»΄ν¬λ„ŒνŠΈμ— νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ 지식을 μ•Œμ•„λ΄…λ‹ˆλ‹€.

ν”„λ‘œμ νŠΈ 생성

λ·° μ΅œμ‹  CLI 도ꡬ(3.4 이상)λ₯Ό μ‚¬μš©ν•˜λ©΄ TypeScriptκ°€ 적용된 ν”„λ‘œμ νŠΈλ₯Ό λ°”λ‘œ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€. ν”„λ‘œμ νŠΈ 생성을 μœ„ν•΄ μ•„λž˜ λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•©λ‹ˆλ‹€.

vue create vue-ts

그리고 ν”„λ‘œμ νŠΈ 생성 μ˜΅μ…˜μ„ μ•„λž˜μ™€ 같이 μ„ νƒν•©λ‹ˆλ‹€.

νƒ€μž…μŠ€ν¬λ¦½νŠΈ CLI μ˜΅μ…˜

CLI 2.x 버전 도ꡬλ₯Ό μ΄μš©ν•˜μ—¬ νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό κ΅¬μ„±ν•˜λŠ” 방법에 λŒ€ν•΄μ„œλŠ” μ—¬κΈ°λ₯Ό μ°Έκ³ ν•˜μ„Έμš”.

Vue.extend()λ₯Ό ν™œμš©ν•œ νƒ€μž…μŠ€ν¬λ¦½νŠΈ λ·° μ»΄ν¬λ„ŒνŠΈ

μƒμ„±ν•œ ν”„λ‘œμ νŠΈμ˜ App.vue νŒŒμΌμ„ μ•„λž˜μ™€ 같이 λ°”κΏ‰λ‹ˆλ‹€.







Β 


Β 






Β 









<template>
  <div>
    {{ result }}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      result: '',
    }
  },
  methods: {
    sayHi(someone: string) {
      this.result = 'hello ' + someone;
    }
  },
  created() {
    this.sayHi(10);
  },
})
</script>

κΈ°μ‘΄ λ·° μ»΄ν¬λ„ŒνŠΈμ™€ 달라진 점은 <script lang="ts"> λΆ€λΆ„μž…λ‹ˆλ‹€. μ›ΉνŒ©μœΌλ‘œ λΉŒλ“œν•  λ•Œ vue-loaderκ°€ νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό μ΄ν•΄ν•˜κ³  ν•΄μ„ν•˜κΈ° μœ„ν•΄μ„œλŠ” 이 속성을 μΆ”κ°€ν•΄μ•Όν•©λ‹ˆλ‹€. 그리고 Vue.extend()λ₯Ό μ„ μ–Έν•΄μ€˜μ•Ό νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ½”λ“œκ°€ 뷰의 속성듀과 ν•¨κ»˜ μ •μƒμ μœΌλ‘œ λ™μž‘λ©λ‹ˆλ‹€.

λ§ˆμ§€λ§‰μœΌλ‘œ npm run serve λͺ…λ Ήμ–΄λ₯Ό μ΄μš©ν•˜μ—¬ 이 μ½”λ“œλ₯Ό 싀행해보면 λͺ…λ Ήμ–΄ μ‹€ν–‰ μ°½μ—μ„œ μ•„λž˜μ™€ 같은 μ—λŸ¬λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

extend()λ₯Ό μ‚¬μš©ν•œ λ·° μ»΄ν¬λ„ŒνŠΈ μ—λŸ¬

λ©”μ„œλ“œ ν•¨μˆ˜μΈ sayHi()의 μΈμžμ—λŠ” λ¬Έμžμ—΄λ§Œ λ“€μ–΄μ˜¬ 수 μžˆλŠ”λ° 숫자 10을 λ„˜κ²¨μ€¬κΈ° λ•Œλ¬Έμ— μ—λŸ¬κ°€ λ°œμƒν•©λ‹ˆλ‹€.

Decorator(@)λ₯Ό ν™œμš©ν•œ νƒ€μž…μŠ€ν¬λ¦½νŠΈ λ·° μ»΄ν¬λ„ŒνŠΈ

μ•žμ—μ„œ μ‚΄νŽ΄λ³Έ 방법 이외에도 λ°μ½”λ ˆμ΄ν„°(Decorator, @)λ₯Ό μ΄μš©ν•΄ 뷰에 νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 방법은 기쑴의 객체 μŠ€νƒ€μΌ μž‘μ„± 방식이 μ•„λ‹Œ 클래슀 기반 μž‘μ„± 방식을 μ‚¬μš©ν•΄μ•Όν•˜λ―€λ‘œ ES6의 Class 문법이 μ΅μˆ™ν•˜μ§€ μ•Šμ€ λΆ„λ“€μ—κ²ŒλŠ” λ‹€μ†Œ μ–΄λ €μšΈ 수 μžˆμŠ΅λ‹ˆλ‹€. ES6의 Class을 μ°Έκ³ ν•˜μ…”μ„œ ν•™μŠ΅ν•˜μ„Έμš”.

λ°μ½”λ ˆμ΄ν„°λ₯Ό ν™œμš©ν•˜κΈ° μœ„ν•΄ App.vue 파일의 λ‚΄μš©μ„ μ•„λž˜μ™€ 같이 λ³€ν™˜ν•©λ‹ˆλ‹€.










Β 


Β 
Β 










<template>
  <div>
    <h1>TypeScript with Vue</h1>
    <button @click="sayHi">say hi</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

// λ°μ½”λ ˆμ΄ν„°λ₯Ό μ΄μš©ν•œ μ»΄ν¬λ„ŒνŠΈ μ •μ˜
@Component
export default class App extends Vue {
  // data 속성
  message = 'hello';

  // methods 속성
  sayHi() {
    console.log(this.message);
  }
}
</script>

@ComponentλΌλŠ” λ°μ½”λ ˆμ΄ν„°λ₯Ό ν™œμš©ν•˜κΈ° μœ„ν•΄ vue-class-component 라이브러리λ₯Ό μž„ν¬νŠΈν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ•žμ—μ„œ μ‚΄νŽ΄λ΄€λ˜ Vue.extend() λ°©μ‹κ³ΌλŠ” λ‹€λ₯΄κ²Œ Vue 라이브러리λ₯Ό ν΄λž˜μŠ€μ— μƒμ†ν•˜μ—¬ 클래슀 멀버 λ³€μˆ˜μ™€ 클래슀 ν•¨μˆ˜ ν˜•νƒœλ‘œ μ •μ˜ν•˜λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

data 속성인 messageλŠ” 클래슀의 멀버 λ³€μˆ˜ ν˜•νƒœλ‘œ μž‘μ„±ν•˜κ³ , methods 속성인 sayHi()λŠ” 클래슀 λ©”μ„œλ“œ ν•¨μˆ˜ ν˜•νƒœλ‘œ μž‘μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

λ°μ½”λ ˆμ΄ν„°λŠ” 클래슀 μ •μ˜μ™€ λ‚΄μš©μ— λŒ€ν•΄ 메타 정보λ₯Ό μ œκ³΅ν•˜κΈ° μœ„ν•œ λ¬Έλ²•μž…λ‹ˆλ‹€. μ–΄λ…Έν…Œμ΄μ…˜(@)을 μ‚¬μš©ν•˜λ©° @ν‘œν˜„μ‹ ν˜•νƒœλ‘œ μž‘μ„±ν•©λ‹ˆλ‹€. 더 μžμ„Έν•œ λ‚΄μš©μ€ νƒ€μž…μŠ€ν¬λ¦½νŠΈ 곡식 λ¬Έμ„œλ₯Ό μ°Έκ³ ν•˜μ„Έμš”.