Flexmonster°¡ Vue 3¿Í ¿Ïº®ÇÏ°Ô ÅëÇյǾú½À´Ï´Ù
Vue 3¿Í Flexmonster¸¦ ¿Ïº®ÇÏ°Ô ÅëÇÕÇÒ ¼ö ÀÖ½À´Ï´Ù.
Vue 2¿Í ÅëÇÕÇÏ´Â °ÍÀº Integration with Vue 2¸¦ º¸½Ê½Ã¿À.
»çÀü ¼÷Áö »çÇ×(Prerequisites)
´ÙÀ½ ¸í·É¾î¸¦ »ç¿ëÇÏ¿© ¼³Ä¡ÇÕ´Ï´Ù.

ÀÌ ÆäÀÌÁö¿¡´Â ´ÙÀ½ »çÇ×ÀÌ Æ÷ÇԵǾî ÀÖ½À´Ï´Ù :
- GitHub¿¡¼ Vue 3 »ùÇà ÇÁ·ÎÁ§Æ® ½ÇÇàÇϱâ(Run a sample Vue 3 project from GitHub)
- Flexmonster¸¦ Vue 3 ¾ÖÇø®ÄÉÀ̼ÇÀ¸·Î ÅëÇÕÇϱâ(Integrate Flexmonster into a Vue 3 application)
- 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¿¡¼ º¼ ¼ö ÀÖ½À´Ï´Ù.
Ãß°¡ Âü°í ÀÚ·á
´ÙÀ½ ÀÚ·áµµ À¯¿ëÇÏ°Ô Âü°íÇÒ ¼ö ÀÖ½À´Ï´Ù :
|