Nuxt.js에서 Wijmo 사용하기

Nuxt.js는 Vue.js 기반으로 구축된 서버 사이드 렌더링 및 정적 사이트 생성 프레임워크로 유니버설 서버 렌더링 웹 애플리케이션 개발을 가능하게 합니다.

Vue2용 Wijmo 컴포넌트는 Nuxt.js 프로젝트에서 Wijmo 컨트롤을 사용할 수 있게 해줍니다. Wijmo Vue2 컴포넌트는 Wijmo 컨트롤을 백그라운드에서 생성하고 ref 속성을 통해 컨트롤 인스턴스에 대한 참조를 제공합니다. 이를 통해 컨트롤의 속성 및 이벤트를 선언적으로 바인딩할 수 있습니다.

type=info

Nuxt.js에서는 클라이언트 사이드 렌더링만 지원되며, 서버 사이드 렌더링은 지원되지 않습니다. Nuxt.js 애플리케이션의 기본 렌더링 모드는 Universal이며, 이는 서버 사이드와 클라이언트 사이드 렌더링을 결합합니다.

SSR을 비활성화하기 위해선 nuxt.config.ts 파일에서 ssr을 false로 설정하시기 바랍니다.

export default defineNuxtConfig({ ssr: false })

설치

Wijmo Vue2 컴포넌트는 각 핵심 라이브러리 패키지당 하나의 npm 패키지 세트로 제공됩니다. 이러한 패키지의 이름에는 'vue2'라는 단어가 포함되어 있습니다. 예를 들어, 'wijmo.vue2.grid' 패키지는 핵심 'wijmo.grid' 패키지의 제어 컴포넌트를 나타냅니다. 이러한 패키지들은 개별적으로 설치하거나 '@mescius/wijmo.vue2.all' 그룹 패키지를 사용하여 한꺼번에 설치할 수 있습니다.

npm install @mescius/wijmo.vue2.all 

Wijmo 컴포넌트 가져오기

Wijmo 구성 요소 및 지시어는 wijmo.vue2 패키지에서 직접 가져올 수 있으며 아래와 같이 구성 요소에서 사용할 수 있습니다.

<script setup> 
import { ref } from 'vue'; 
import { WjTooltip as vWjTooltip} from '@mescius/wijmo.vue2.core';  //import directive 
import { WjInputNumber } from '@mescius/wijmo.vue2.input'; //import component 
const count = ref(3) // variables 
</script> 
<template> 
  <button v-wjTooltip="'Just a string'"> 
    Paragraph with a string tooltip. 
  </button> 
  <br> 
  <wj-input-number v-model:value="count"></wj-input-number><br> 
</template> 

Wijmo CSS 추가

Wijmo 컨트롤이 올바르게 보이고 작동하려면 Wijmo CSS 스타일을 애플리케이션에 불러와야 합니다. 스타일은 @mescius/wijmo.styles npm 패키지로 제공되며 ESM import 문을 이용하여 Wijmo 컨트롤을 사용하는 컴포넌트에 스타일을 불러올 수 있습니다.

import '@mescius/wijmo.styles/wijmo.css'; 

Nuxt.js 마크업 문법

Wijmo Vue 구성 요소는 템플릿 마크업에서 Vue3 명명 규칙을 사용합니다. 컴포넌트와 해당 속성 및 이벤트를 지정하기 위해 아래와 같이 소문자 대시 및 camelCase 구문을 지원합니다.

<wj-input-number :value-changed="ctrlValueChanged"> //low-dash-case 
<WjInputNumber :valueChanged= "ctrlValueChanged">  // camelCase 

속성을 사용한 데이터 흐름

속성 이름 앞에는 v-bind: 지시어(또는 해당 ':' 약어)가 추가되어야 합니다. v-bind: 지시문을 생략할 수 있는 유일한 예외는 문자열 유형 속성을 문자열 상수에 바인딩하는 경우입니다. 이를 단방향 바인딩이라고 하며 속성 값이나 이벤트 핸들러를 설정하는 데 사용됩니다.

양방향 바인딩은 v-model 지시문을 사용하여 수행됩니다. 이를 통해 양식 입력과 컴포넌트 데이터 사이에 양방향 바인딩을 생성하여 값을 업데이트된 상태로 유지할 수 있습니다. v-model을 사용하면 Vue는 데이터 속성과 입력 요소 값 업데이트를 자동으로 처리합니다.

<script setup> 
import { ref } from 'vue' 
import { WjInputNumber } from '@mescius/wijmo.vue2.input'; 
const count = ref(3)  // variables </script> 
<wj-input-number v-model:value="count"  //two way binding 
                 format="n2" //binding to a string constant 
                 :isReadOnly="true">//binding to Boolean  
</wj-input-number> 

이벤트 바인딩

Wijmo 이벤트 핸들러는 송신자와 이벤트 인수라는 두 가지 매개변수가 있는 함수로 정의됩니다. 컴포넌트 이벤트에 바인딩할 때 시그니처가 포함된 함수 이름을 바인딩 소스로 지정해야 합니다.

<script setup> 
import { ref } from 'vue' 
import { WjInputNumber } from '@mescius/wijmo.vue2.input'; 
const count = ref(3)  // variables 

//event-handlers 

function valueChanged(s,e){ 
  console.log("Control value changed!"+s.value); 
} 
</script> 

<template> 
  <wj-input-number v-model:value="count" :valueChanged="valueChanged"></wj-input-number> 
</template> 

초기화 이벤트

모든 Wijmo Vue 구성 요소에는 컨트롤이 페이지에 추가되고 초기화된 후 발생하는 "initialized" 이벤트가 포함되어 있습니다. 해당 이벤트를 사용하면 마크업의 속성 설정 외에도 추가 초기화를 수행할 수 있습니다. 핸들러 함수의 시그니처는 다른 Wijmo 이벤트 핸들러와 동일합니다. 아래 코드를 참고하여 주시기 바랍니다.:

<script setup> 
import { ref } from 'vue' 
import { WjInputNumber } from '@mescius/wijmo.vue2.input'; 
const count = ref(3) // variables 
//event-handlers 
function initializedCtrl(s,e){ 
  console.log("Control initialized event triggered!"); 
} 
</script> 
<template> 
  <wj-input-number v-model:value="count" :initialized="initializedCtrl"></wj-input-number> 

</template> 

코드상에서 Wijmo 컨트롤 생성하기

Wijmo 컴포넌트는 Nuxt.js 앱에서 컴포넌트로 사용하도록 설계되었습니다. 코드에서 Wijmo 컨트롤을 생성하려면, 컴포넌트 대신 Wijmo 컨트롤의 핵심 모듈을 사용해야 합니다. 핵심 모듈은 해당 Vue 상호 운용성 모듈과 동일한 이름을 가지지만, 'vue'라는 단어는 포함되어 있지 않습니다. 예를 들어, 다음 코드는 코드에서 FlexGrid 컨트롤을 생성합니다:

import { FlexGrid } from '@mescius/wijmo.grid'; 
onMounted(() => {
  grid = new FlexGrid("#host_element");}
)