Flexmonster°¡ Vue 3¿Í ¿Ïº®ÇÏ°Ô ÅëÇյǾú½À´Ï´Ù

Vue 3¿Í Flexmonster¸¦ ¿Ïº®ÇÏ°Ô ÅëÇÕÇÒ ¼ö ÀÖ½À´Ï´Ù.

Vue 2¿Í ÅëÇÕÇÏ´Â °ÍÀº Integration with Vue 2¸¦ º¸½Ê½Ã¿À.

»çÀü ¼÷Áö »çÇ×(Prerequisites)

´ÙÀ½ ¸í·É¾î¸¦ »ç¿ëÇÏ¿© ¼³Ä¡ÇÕ´Ï´Ù.

ÀÌ ÆäÀÌÁö¿¡´Â ´ÙÀ½ »çÇ×ÀÌ Æ÷ÇԵǾî ÀÖ½À´Ï´Ù :

  1. GitHub¿¡¼­ Vue 3 »ùÇà ÇÁ·ÎÁ§Æ® ½ÇÇàÇϱâ(Run a sample Vue 3 project from GitHub)
  2. Flexmonster¸¦ Vue 3 ¾ÖÇø®ÄÉÀ̼ÇÀ¸·Î ÅëÇÕÇϱâ(Integrate Flexmonster into a Vue 3 application)
  3. Vue 3¿¡¼­ Flexmonster »ç¿ë ¿¹¸¦ ÂüÁ¶Çϱâ(See the examples of Flexmonster usage in Vue 3

 

GitHub¿¡¼­ Vue 3 »ùÇà ÇÁ·ÎÁ§Æ® ½ÇÇàÇϱâ

flexmonster create ¸í·ÉÀ» ÅëÇØ »ùÇà ÇÁ·ÎÁ§Æ®¸¦ ´Ù¿î·Îµå ÇÕ´Ï´Ù. ES6 ȤÀº TypeScript ÇÁ·ÎÁ§Æ® Áß¿¡ ¼±ÅÃÇÒ ¼ö ÀÖ½À´Ï´Ù :

Vue 3+ES6

flexmonster create vue 3 es6 ¸í·ÉÀ¸·Î ´ÙÀ½ °úÁ¤À» ¼öÇàÇÕ´Ï´Ù :

  • GitHub¿¡¼­ Vue 3+ES6 »ùÇà ÇÁ·ÎÁ§Æ®¿Í ÇÔ²² .zip ¾ÆÅ°À̺긦 ´Ù¿î·Îµå ÇÕ´Ï´Ù.
  • ÇöÀç Æú´õ¿¡ ÀÖ´Â ÆÄÀÏÀ» ÀÚµ¿À¸·Î Ç®¾î¼­, ÀÛ¾÷ µð·ºÅ丮¿¡ flexmonster-vue-3-es6-project/ Æú´õ°¡ ³ªÅ¸³ª°Ô µË´Ï´Ù.

--run À» ÁÙÀÎ ÇüÅÂÀΠ-r ¿É¼ÇÀº ´ÙÀ½ ÀÛ¾÷À» ¿Ï·áÇÕ´Ï´Ù :

  • package.json ¿¡ ±â¼úµÈ npm Á¾¼Ó¼º/Á¾¼ÓÇ׸ñ(dependencies)À» ¸ðµÎ ¼³Ä¡ÇÕ´Ï´Ù.
  • ¾ÖÇø®ÄÉÀ̼ÇÀ» ÄÄÆÄÀÏÇÏ°í ºê¶ó¿ìÀú¿¡¼­ ½ÇÇàÇÕ´Ï´Ù.

 

Vue 3+TypeScript

flexmonster create vue 3 typescript ¸í·ÉÀ¸·Î ´ÙÀ½ °úÁ¤À» ¼öÇàÇÕ´Ï´Ù :

  • GitHub¿¡¼­ Vue 3+TypeScript »ùÇà ÇÁ·ÎÁ§Æ®¿Í ÇÔ²² .zip ¾ÆÄ«À̺긦 ´Ù¿î·Îµå ÇÕ´Ï´Ù
  • ÇöÀç Æú´õ¿¡ ÀÖ´Â ÆÄÀÏÀ» ÀÚµ¿À¸·Î Ç®¾î¼­, ÀÛ¾÷ µð·ºÅ丮¿¡  flexmonster-vue-3-typescript-project/ Æú´õ°¡ ³ªÅ¸³ª°Ô µË´Ï´Ù.

--run À» ÁÙÀÎ ÇüÅÂÀΠ-r ¿É¼ÇÀº ´ÙÀ½ ÀÛ¾÷À» ¿Ï·áÇÕ´Ï´Ù :

  • package.json ¿¡ ±â¼úµÈ npm Á¾¼Ó¼º/Á¾¼ÓÇ׸ñ(dependencies)À» ¸ðµÎ ¼³Ä¡ÇÕ´Ï´Ù.
  • ¾ÖÇø®ÄÉÀ̼ÇÀ» ÄÄÆÄÀÏÇÏ°í ºê¶ó¿ìÀú¿¡¼­ ½ÇÇàÇÕ´Ï´Ù.

Ctrl + C¸¦ »ç¿ëÇÏ¿© ¾ÖÇø®ÄÉÀ̼ÇÀ» ¼öµ¿À¸·Î Á¾·áÇÒ ¼ö ÀÖ½À´Ï´Ù.

 

Flexmonster¸¦ Vue 3 ¾ÖÇø®ÄÉÀ̼ÇÀ¸·Î ÅëÇÕÇϱâ

´ÙÀ½ °úÁ¤À» ÅëÇØ Flexmonster PivotÀ» »õ·Î¿î Vue 3¾ÖÇø®ÄÉÀ̼ÇÀ¸·Î ÅëÇÕÇÒ ¼ö ÀÖ½À´Ï´Ù. Vue ÇÁ·ÎÁ§Æ®°¡ ÀÌ¹Ì ÀÖ´Â °æ¿ì¿¡´Â 2´Ü°èÀÎ Install Flexmonster·Î À̵¿ÇϽʽÿÀ.

Flexmonster¸¦ Vue 2¿Í ÅëÇÕÇÏ·Á¸é Integration with Vue 2¸¦ ÂüÁ¶ ÇϽʽÿÀ.

 

Step 1. Vue 3 ÇÁ·ÎÁ§Æ® »ý¼º

Vue ¾ÛÀÌ ¾ø´Â °æ¿ì, Äֿܼ¡¼­ ´ÙÀ½ ¸í·ÉÀ» ½ÇÇàÇÏ¿© Vue ¾ÛÀ» ¸¸µì´Ï´Ù. ES6 ȤÀº TypeScript ÇÁ·ÎÁ§Æ® Áß¿¡ ¼±ÅÃÇÒ ¼ö ÀÖ½À´Ï´Ù :

Vue 3+ES6

vue create ¸í·ÉÀ» ½ÇÇàÇÒ ¶§, ÇÁ·ÎÁ§Æ®¿¡ ´ëÇÑ »çÀü ¼³Á¤À» ¼±ÅÃÇÏ°Ô µË´Ï´Ù. Vue3¸¦ ±âº»À¸·Î ¼³Á¤ÇÏ¸é µË´Ï´Ù :

Vue 3+TypeScript

vue create  ¸í·ÉÀ» ½ÇÇàÇÒ ¶§, ÇÁ·ÎÁ§Æ®¿¡ ´ëÇÑ »çÀü ¼³Á¤À» ¼±ÅÃÇÏ°Ô µË´Ï´Ù. Vue 3 + TypeScript ¾ÛÀ» ¸¸µé·Á¸é Manually select features(¼öµ¿ ¼±Åà ±â´É)À» ¼±Åà ÇϽʽÿÀ.

±â´É ¸Þ´º¿¡¼­ space¿Í ÇÔ²² TypeScript ¿É¼ÇÀ» È®ÀÎÇϰí Enter ۸¦ ´©¸¨´Ï´Ù.

Vue ¹öÀü 3.x ¸¦ ¼±ÅÃÇÕ´Ï´Ù :

±âŸ ¼³Á¤Àº ±âº» °ªÀ» ¼±ÅÃÇÕ´Ï´Ù.

 

Step 2. Flexmonster ¼³Ä¡

package.jsonÀÌ ÀÖ´Â Æú´õ¿¡¼­ ´ÙÀ½ CLI ¸í·ÉÀ» ½ÇÇàÇÏ¿© Flexmonster Vue ¸ðµâÀ» ¼³Ä¡ÇÕ´Ï´Ù.

add ¸í·ÉÀ¸·Î  vue-flexmonster ÆÐŰÁö¸¦ node_modules/ ¿¡ ¼³Ä¡Çϰí, package.json¿¡ npm Á¾¼Ó¼º(Á¾¼ÓÇ׸ñ)À¸·Î Ãß°¡ÇÕ´Ï´Ù.

 

Step 3. Shims.vue.d.ts¿¡¼­ Vue-flexmonster ¸ðµâ ¼±¾ð

Vue 3 + TypeScript ÇÁ·ÎÁ§Æ®¿¡¸¸ ÇØ´çµÇ´Â ´Ü°èÀÔ´Ï´Ù. Vue 3 + ES6 ¾ÛÀÇ °æ¿ì¿¡´Â Step 5ÀÎ Register the vue-flexmonster module·Î ÁøÇàÇÕ´Ï´Ù.

Vue 3 + TypeScript ÇÁ·ÎÁ§Æ®¿¡¼­  vue-flexmonster ¸ðµâÀ» »ç¿ëÇÏ·Á¸é  src/shims.vue.d.ts ÆÄÀÏ¿¡¼­ ¼±¾ðÇÕ´Ï´Ù :

Step 4. Vue-flexmonster ¸ðµâ µî·Ï

Àü¿ª(Globally) ¹æ½ÄÀ̳ª ·ÎÄÃ(Locally) ¹æ½ÄÀ¸·Î  vue-flexmonster ¸ðµâÀ» ÇÁ·ÎÁ§Æ®¿¡ µî·ÏÇÒ ¼ö ÀÖ½À´Ï´Ù.

Vue 3+ES6

  • vue-flexmonster¸¦ Àü¿ªÀ¸·Î µî·ÏÇÏ·Á¸é, src/main.js¿¡¼­ ±âÁ¸ °¡Á®¿À±â(Existing Imports) ÈÄ¿¡ ´ÙÀ½ Äڵ带 Ãß°¡ÇÕ´Ï´Ù.

ÀÌÁ¦ ¾ÖÇø®ÄÉÀ̼ǿ¡ ÀÖ´Â ¸ðµç ÄÄÆ÷³ÍÆ®°¡  Pivot ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

  • vue-flexmonster ¸¦ ·ÎÄ÷Πµî·ÏÇÏ·Á¸é, Pivot Å×À̺íÀÌ ÇÊ¿äÇÑ ÄÄÆ÷³ÍÆ®ÀÇ<script> ¼½¼Ç¿¡¼­(¿¹, src/App.vue) ´ÙÀ½ Äڵ带 »ðÀÔ ÇÕ´Ï´Ù.

Options API¸¦ »ç¿ëÇÏ¿© ÇÁ·ÎÁ§Æ®¿¡ Flexmonster¸¦ Ãß°¡ÇÕ´Ï´Ù. Composition API¸¦ »ç¿ëÇÏ¿© Flexmonster¸¦ »ðÀÔÇÏ´Â ¹æ¹ýÀº ¿¹Á¦ Creating the pivot table using the Composition API¸¦ ÂüÁ¶ ÇϽʽÿÀ.

Vue 3+TypeScript

  • vue-flexmonster¸¦ Àü¿ªÀ¸·Î µî·ÏÇÏ·Á¸é, src/main.ts¿¡¼­ ±âÁ¸ °¡Á®¿À±â(Existing Imports) ÈÄ¿¡ ´ÙÀ½ Äڵ带 Ãß°¡ÇÕ´Ï´Ù.

ÀÌÁ¦ ¾ÖÇø®ÄÉÀ̼ǿ¡ ÀÖ´Â ¸ðµç ÄÄÆ÷³ÍÆ®°¡  Pivot  ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

  • vue-flexmonster ¸¦ ·ÎÄ÷Πµî·ÏÇÏ·Á¸é, Pivot Å×À̺íÀÌ ÇÊ¿äÇÑ ÄÄÆ÷³ÍÆ®ÀÇ<script> ¼½¼Ç¿¡¼­(¿¹, src/App.vue) ´ÙÀ½ Äڵ带 »ðÀÔ ÇÕ´Ï´Ù.

Options API¸¦ »ç¿ëÇÏ¿© ÇÁ·ÎÁ§Æ®¿¡ Flexmonster¸¦ Ãß°¡ÇÕ´Ï´Ù. Composition API¸¦ »ç¿ëÇÏ¿© Flexmonster¸¦ »ðÀÔÇÏ´Â ¹æ¹ýÀº ¿¹Á¦ Creating the pivot table using the Composition API¸¦ ÂüÁ¶ ÇϽʽÿÀ.

 

Step 5. Vue ÄÄÆ÷³ÍÆ®¿¡ Flexmonster Instance Ãß°¡

¼±ÅÃÇÑ ÄÄÆ÷³ÍÆ®ÀÇ <template> ¼½¼Ç¿¡(¿¹, src/App.vue) Pivot ¸ðµâÀ» Æ÷ÇÔ½Ãŵ´Ï´Ù. ÄÄÆ÷³ÍÆ® ÅÛÇø´¿¡ Á¤È®ÇÏ°Ô ÇÑ °³ÀÇ Root <div> ¿ä¼Ò(Element)°¡ Æ÷ÇԵǾî ÀÖ´ÂÁö È®ÀÎÇÕ´Ï´Ù.

ÀÌ ´Ü°è¿¡¼­´Â Pivot ¼Ó¼º(Props) Áß ÀϺθ¸ÀÌ ¾ð±ÞµÇÁö¸¸, ÀÌ ¼Ó¼º µéÀº FlexmonsterÀÇ Ãʱ⠸Ű³ º¯¼ö(Parameters)¿Í µ¿ÀÏÇϸç Àüü ¸ñ·ÏÀº full list of available parameters¿¡¼­ ÂüÁ¶ÇÒ ¼ö ÀÖ½À´Ï´Ù.

 

Step 6. ÇÁ·ÎÁ§Æ® ½ÇÇà

Äֿܼ¡¼­ ¾ÖÇø®ÄÉÀ̼ÇÀ» ½ÇÇàÇÕ´Ï´Ù :

°á°ú¸¦ º¸·Á¸é ºê¶ó¿ìÀú¿¡¼­  http://localhost:8080/ À» ¿ÀÇÂÇÕ´Ï´Ù.

Ctrl + C¸¦ »ç¿ëÇÏ¿© ¾ÖÇø®ÄÉÀ̼ÇÀ» ¼öµ¿À¸·Î ´ÝÀ» ¼ö ÀÖ½À´Ï´Ù.

 

Vue 3¿¡¼­ Flexmonster¸¦ »ç¿ëÇÏ´Â ¿¹Á¦¸¦ ÂüÁ¶ ÇϽʽÿÀ

Vue 3 »ùÇà ÇÁ·ÎÁ§Æ®¿¡´Â ´ÙÀ½ »ç¿ë ¿¹Á¦°¡ Æ÷ÇԵǾî ÀÖ½À´Ï´Ù :

  • Pivot Å×ÀÌºí ¸¸µé±â(Creating the pivot table)
  • ComposistionAPI¸¦ »ç¿ëÇÏ¿© Pivot Å×ÀÌºí ¸¸µé±â(Creating the pivot table using CompositionAPI)
  • À̺¥Æ® ó¸®(Handling events)
  • API È£Ãâ »ç¿ëÇϱâ(Using API calls)
  • µ¥ÀÌÅÍ ¾÷µ¥ÀÌÆ®(Updating data)
  • Åø¹Ù Ưȭ »ç¿ë(Customizing the Toolbar)
  • ±×¸®µå Ưȭ »ç¿ë(Customizing the grid)
  • Highcharts¿Í ÅëÇÕÇϱâ(Integrating with Highcharts)
  • amCharts¿Í ÅëÇÕÇϱâ(Integrating with amCharts)

°¢°¢ÀÇ ¿¹Á¦¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ Á¤º¸¸¦ Flexmonster usage in Vue 3¿¡¼­ º¼ ¼ö ÀÖ½À´Ï´Ù.

 

Ãß°¡ Âü°í ÀÚ·á

´ÙÀ½ ÀÚ·áµµ À¯¿ëÇÏ°Ô Âü°íÇÒ ¼ö ÀÖ½À´Ï´Ù :

 


Copyright © 2021 by Hyubwoo. Info. Tech. Co., Ltd. All rights reserved.