! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Wijmo와 Vue3 프레임워크 > 블로그 & Tips

본문 바로가기

Wijmo와 Vue3 프레임워크

페이지 정보

작성자 GrapeCity 작성일 2020-07-22 00:00 조회 4,289회 댓글 0건

본문

매우 기대되는 Vue 3 프레임워크 릴리스는 2020년 3/4분기로 예정되어 있습니다. Wijmo 팀은 해당 릴리스를 준비하고 있으며 현재 Vue 3에 대한 베타 지원을 제공하고 있습니다.


Wijmo에서 Vue 3 프레임워크 구현

Vue 3에는 새로운 기능이 다수 포함되어 있습니다. 여기서는 Wijmo 팀이 Wijmo 라이브러리에서 Vue 3 호환성을 구현하는 과정에서 다루었던 프레임워크의 몇 가지 측면에 관해 설명하겠습니다.


새로운 컴퍼지션 API 및 기존 옵션 API

컴퍼지션 API와 옵션 API는 서로 공존하므로 Wijmo와 함께 작동하는 동안 두 API를 모두 사용할 수 있습니다. 컴퍼지션 API를 Wijmo 컴포넌트와 함께 전혀 어려움 없이 사용할 수 있을 것입니다. 새로운 API는 매우 유망해 보이지만, 실제 장점은 향후 광범위하게 사용되면서 명확해질 것입니다.


컴포넌트 등록

Vue3의 컴포넌트는 응용 프로그램 수준에서 등록됩니다. Vue2 컴포넌트는 전역적으로 등록됩니다. Wijmo 팀은 보조 함수와 간소화된 응용 프로그램 수준 등록을 도입했습니다.


API 변경 사항

변경 사항은 특히 컴포넌트의 다양한 측면과 지시문 등록, 슬롯 사용, 필터 제거 등과 관련이 있습니다. 변경 사항은 GitHub에 기술되어 있습니다. 컴포넌트 템플릿에서 Wijmo 필터를 사용 중인 Wijmo 고객은 필터 제거로 인해 영향을 받을 수 있습니다.

이 포스팅 후반부에서 필터 솔루션에 관해 설명하겠습니다.


프록시 기반 반응성

Vue3 내부를 살짝만 들여다보면 Vue3의 모든 것이 프록시라는 결론을 얻을 수 있을 것입니다. 프록시를 사용하려면 IE11 호환성에 대한 추가 노력이 필요합니다. 이 호환성은 아직 구현되지 않았습니다.

Vue3는 프록시 기반 반응성이 특징입니다. Vue2에서는 내부 상태가 포함된 개체가 데이터로 사용되는 경우 반응성이 변경될 수 있습니다.

예를 들어 다음과 같이 컴포넌트가 Vue2에서 올바르게 작동하지만(카운터 보기가 업데이트됨) Vue3에서는 작동하지 않습니다.

<template>
<div>
  {{model.counter}}
</div>
</template>
​
<script>
class Model {
  constructor() {
    this.counter = 0;
    setInterval(() => {
      this.counter++;
    }, 1000);
  }
}
​
export default {
  data() {
    return { model: new Model() };
  },
}
</script>


안타깝게도 Vue 3에 맞게 샘플을 간단히 조정할 수 있는 방법은 없습니다.


Vue 3에서 Wijmo 사용하기

Vue3는 Vue2와 동일한 interop의 지원을 Wijmo에게서 받지만, Wijmo 컴포넌트 사용법은 Vue2와 약간 다릅니다.


Wijmo 컴포넌트 사용법

  1. 사용자 정의 컴포넌트 수준에서 Wijmo 컴포넌트 및 지시문을 등록합니다.

    • 이것은 가장 명확한 등록 방법입니다.

  2. 보조 등록 함수를 사용합니다.

    • 응용 프로그램 수준에서 주어진 Wijmo 모듈로부터 모든 컴포넌트 및 지시문을 등록

    • 다수의 컴포넌트를 사용하고 동시에 등록해야 하는 경우 유용함


1. 사용자 정의 컴포넌트 수준 등록

<template>
<wj-input-number />
<button v-wjTooltip="Click me">Click</button>
</template>
​
<script>
import { WjTooltip } from '@grapecity/wijmo.vue2.core';
import { WjInputNumber } from '@grapecity/wijmo.vue2.input';
​
export default {
  components: {
    WjInputNumber,
  },
  directives: {
    WjTooltip,
  },
}
</script>
​
 

2. 보조 등록 함수

import { createApp } from 'vue'
import App from './App.vue'
import { registerCore } from '@grapecity/wijmo.vue2.core';
import { registerInput } from '@grapecity/wijmo.vue2.input';
​
const app = createApp(App)
registerCore(app); // register all components and directives from @grapecity/wijmo.vue2.core module
registerInput(app); // register all components and directives from @grapecity/wijmo.vue2.input module
app.mount('#app');
​

그리고 컴포넌트 파일(App.vue):

<template>
<wj-input-number />
<button v-wjTooltip="Click me">Click</button>
</template>
​
<script>
export default {
}
</script>


3. 컴포넌트 파일(App.vue)

<template>
  <div>{{ theAmount | wj-format('c') }}</div>
</template>
​
​
<script>
  export default {
      data() {
          return { theAmount: 10 };
      },
  }; 
</script>
 

사용자 정의 컴포넌트가 위와 같은 wjFormat 필터를 사용하는 경우 다음과 같은 wjFormat 함수 호출로 교체되어야 합니다.

<template>
  <div>{{ format(theAmount, 'c') }}</div>
</template>
​
<script>
  import { wjFormat } from '@grapecity/wijmo.vue2.core';
​
​
  export default {
      data() {
          return { theAmount: 10 };
      },
      methods: {
          format(value, format) {
              return wjFormat(value, format);
          },
      },
  }; 
</script>


"export 'default' (imported as 'VueModuleDefault') was not found in 'vue' in the development environment."와 같은 경고가 표시될 수 있습니다. 이 경고는 응용 프로그램 기능에 영향을 미치지 않으며 프로덕션 환경에는 표시되지 않습니다.


Wijmo와 Vue 3

Wijmo는 Vue2와 동일한 interop의 Vue3 베타 지원을 받습니다. Wijmo를 사용하는 기존 사용자 정의 컴포넌트는 Vue3 환경에 맞게 조정해야 합니다.

이러한 조정은 컴포넌트 수준 또는 응용 프로그램 수준에서 Wijmo 컴포넌트 및 지시문을 등록함으로써 이루어집니다. 응용 프로그램 요구 사항에 따라 등록 수준이 결정됩니다.


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.