vue.js¿¡¼ jQuery, Bootstrap Ãß°¡ÇÏ¿© »ç¿ëÇϱâ
vue.js¿¡¼ jQuery, Bootstrap Ãß°¡ÇÏ¿© »ç¿ëÇϱâ
ÀÛ¼ºÀÚ ºí·Î±×URL: http://blog.puding.kr/180
±¹³»¿¡¼µµ Vue.js
¸¦ »ç¿ëÇÏ´Â ºñÀ²ÀÌ Á¡Á¡ ³ô¾ÆÁ®°¡´Â °Í °°½À´Ï´Ù. Angularjs, Reactjsº¸´Ù ÁøÀÔÀ庮ÀÌ ³·°í, HTML/CSS¿Í ±âº» JavaScript¸¸ ´Ù·êÁÙ ¾Ë´õ¶óµµ ½±°Ô »ç¿ëÇÒ ¼ö ÀÖ´Ù´Â ÀåÁ¡ÀÌ ÀÖ½À´Ï´Ù. ¶ÇÇÑ vue-cli
¶ó´Â ÅøÀ» ÀÌ¿ëÇÏ¿© ±âº»ÀûÀÎ vue °ñ°ÝÀ» ¸¸µé¾î À¥ÆÑ(webpack)±îÁö ÅëÇÕ¼¼Æ®·Î ¿î¿µÇÒ ¼ö ÀÖ´Ùº¸´Ï, °í¹Î¾øÀÌ »ç¿ëÇؾßÇÑ´Ù¶ó´Â »ý°¢ÀÌ Á¡Á¡ °ÇØÁö´Â °Í °°½À´Ï´Ù.
ºÐ¸í óÀ½¿¡´Â °¡º±°Ô ½ÃÀÛÀ» Çϸé¼, ºÐ¸í »ç¿ëÇϱ⵵ ÆíÇÕ´Ï´Ù. ±×·±µ¥ ÀÌ Àü¿¡ »ç¿ëÇß¾ú´ø jQuery, Bootstrap. ±×¸®°í ±× ¿ÜÀÇ ¸¹Àº ¶óÀ̺귯¸®µéÀ» ¾î¶»°Ô Ãß°¡ÇؾßÇÏ´ÂÁö Çò°¥¸± ¼öµµ ÀÖÀ» °Í °°½À´Ï´Ù. ÀÌ´Â À¥ÆÑÀÌ °°ÀÌ Æ÷ÇԵǾî ÀÖÀ¸¸é¼ ¿ÜºÎ ¶óÀ̺귯¸®µéÀ» ¾î¶»°Ô Ãß°¡ÇÏ´Â°Ô ¸Â´Â °ÍÀÎÁö ¸íÈ®ÇÏ°Ô ³ª¿ÍÀÖ´Â °÷ ¶Ç´Â ¼³¸íÇØÁÖ´Â °÷ÀÌ ¾ø±â ¶§¹®À̶ó°í »ý°¢µË´Ï´Ù.
Àú ¿ª½Ãµµ jQuery¸¦ Ãß°¡ÇÒ ¶§ webpack config¿¡ ³¢¿ö³ÖÀ»·Á°í °í¹ÎÀ» ¾öûÇß°í, ¿©·¯°¡Áö ¹æ¹ýÀ» ã¾Ò½À´Ï´Ù. ±× Áß¿¡¼ °¡Àå ½¬¿ì¸é¼ ±ò²ûÇÏ°Ô Ãß°¡ÇÏ´Â ¹æ¹ýÀ» Æ÷½ºÆÿ¡ Á¤¸®Çغ¸·Á ÇÕ´Ï´Ù.
¿ÜºÎ ¶óÀ̺귯¸®¸¦ Ãß°¡Çϱâ Àü¿¡ vue-cli
¸¦ ÀÌ¿ëÇÏ¿© ÇÁ·ÎÁ§Æ® Çϳª¸¦ »ý¼ºÇÕ´Ï´Ù. ÀÌ ¶§, webpack-simple
º¸´Ù´Â webpack
À¸·Î »ý¼ºÇϽô °É ÃßõÇÕ´Ï´Ù. (³ªÁß À¥ÆÑÀ» Ãß°¡ÀûÀ¸·Î ¸¸Á®¾ßÇÒ ¶§ Æí¸®ÇÕ´Ï´Ù.)
jQuery
jQuery°¡ ¹¹ÇÏ´Â °ÇÁö Àß ¸ð¸£½Ã´Â ºÐ µéÀ» À§ÇØ »ýÈ°ÄÚµù °Á»çÀÌÆ®¿¡ ³ª¿ÍÀÖ´Â ³»¿ëÀ» ¾ð±ÞÇϵµ·Ï ÇÏ°Ú½À´Ï´Ù.
jQuery¶õ?
- ¿¤¸®¸ÕÆ®¸¦ ¼±ÅÃÇÏ´Â °·ÂÇÑ ¹æ¹ý°ú
- ¼±ÅÃµÈ ¿¤¸®¸ÕÆ®µéÀ» È¿À²ÀûÀ¸·Î Á¦¾îÇÒ ¼ö ÀÖ´Â ´Ù¾çÇÑ ¼ö´ÜÀ» Á¦°øÇÏ´Â
- ÀÚ¹Ù½ºÅ©¸³Æ® ¶óÀ̺귯¸®
³×. ±×·¸´Ù°í ÇÕ´Ï´Ù.
HTMLÀ» ¸¶À½´ë·Î Á¶ÀÛÇϸç, ±âÁ¸ JavaScript¹®¹ýÀ» Á» ´õ È¿À²ÀûÀ¸·Î »ç¿ëÇÒ ¼ö ÀÖµµ·Ï µµ¿ÍÁÖ´Â ¿ÜºÎ ¶óÀ̺귯¸® ÀÔ´Ï´Ù.
±âÁ¸ À¥»çÀÌÆ®¿¡¼ jQuery¸¦ Ãß°¡ÇÏ·Á¸é HTML¿¡ ½ºÅ©¸³Æ® ÆÄÀÏÀ» È£ÃâÇÏ¿© »ç¿ëÇÏ¸é µË´Ï´Ù.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
¹Ù·Î ÀÌ·±½ÄÀ¸·Î ¸»ÀÌÁÒ.
ÇÏÁö¸¸ Vue¿¡¼ À§ ¹æ½ÄÀ¸·Î ÇÏ¸é ¹º°¡ ÇÏÁö¸»¾Æ¾ß ÇÒ ÇൿÀ» ÇÏ´Â °Í °°±âµµ ÇÏ°í, µÚ°¡ ÂóÂóÇϱ⵵ ÇÏ°í, ¹¹¶ó ¸»ÇÒ ¼ö ¾ø´Â ´À³¦ÀÌ ÀÖ½À´Ï´Ù. (À§ ¹æ½Ä´ë·Î »ç¿ëÇصµ ¹®Á¦´Â ¾ø½À´Ï´Ù.)
jQuery¸¦ Ãß°¡ÇÏ·Á¸é ÀÏ´Ü ¿ÜºÎ ÀúÀå¼Ò¿¡¼ jQuery ¶óÀ̺귯¸®¸¦ °¡Á®¿Í¾ß°ÚÁÒ? ÇØ´ç ÇÁ·ÎÁ§Æ® ·çÆ®¿¡¼ ´ÙÀ½°ú °°Àº ¸í·É¾î¸¦ ½ÇÇàÇÕ´Ï´Ù.
npm i --save-dev expose-loader
npm i --save jquery
¶óÀ̺귯¸®¸¦ ¼³Ä¡ÇÏ¸é¼ package.json
¿¡ °°ÀÌ Ãß°¡ÇÏ°Ô µË´Ï´Ù.
ÀÌ °ÍÀ¸·Î ¸ðµç Áغñ´Â ³¡³µ½À´Ï´Ù. ÄÚµå ¸îÁÙ·Î Ãß°¡ÇÏ°í ±×³É »ç¿ëÇÏ¸é µË´Ï´Ù.
vue-cli
·Î ÇÁ·ÎÁ§Æ®¸¦ »ý¼ºÇß´Ù¸é /project/src/main.js
ÆÄÀÏÀ» È®ÀÎÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù. ÇØ´ç ÆÄÀÏ¿¡ jQuery»ç¿ëÀ» À§ÇØ ÇÑÁÙ Äڵ带 Ãß°¡ÇÕ´Ï´Ù.
import 'expose-loader?$!expose-loader?jQuery!jquery'
À§ Äڵ带 Ãß°¡ÇÏ°í, npm run dev
·Î ¼¹ö¸¦ ½ÇÇàÇÏ°í http://localhost:4000/
À¸·Î Á¢¼ÓÇϼ¼¿ä. ±×¸®°í °³¹ßÀÚµµ±¸¿¡¼ $
¸¦ »ç¿ëÇغ¸¼¼¿ä! ÀÌ °ÍÀ¸·Î jQuery¸¦ »ç¿ëÇÒ ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù.
Bootstrap
¹ÝÀÀÇü À¥»çÀÌÆ®¸¦ °³¹ßÇϱâ À§ÇØ Æ®À§ÅÍ¿¡¼ ¿ÀǼҽº·Î °ø°³ÇÑ UI Framework
ÀÔ´Ï´Ù. jQuery±â¹ÝÀ¸·Î µÇ¾î ÀÖÀ¸¸ç, PC, Tablet, MobileÀÇ ½ºÅ©¸°À» ÀÚÀ¯·Ó°Ô ¼³°èÇϸç UI¸¦ Ç¥ÇöÇÒ ¼ö ÀÖ´Â ÇÁ·¹ÀÓ¿öÅ©ÀÔ´Ï´Ù.
Bootstrap
ÀÇ °æ¿ì´Â javascriptÄÚµå ÀÌ¿ÜÀÇ UI¸¦ Ç¥ÇöÇØÁÖ´Â css
ÆÄÀϵµ Æ÷ÇÔ½ÃÄÑÁà¾ß ÇÕ´Ï´Ù. ±×·¸´ÙÇÏ´õ¶óµµ ÄÚµå´Â 2ÁÙ·Î Ãß°¡ÇÒ ¼ö ÀÖ½À´Ï´Ù.
¸ÕÀú ¿ÜºÎÀúÀå¼Ò¿¡¼ BootstrapÀ» °¡Á®¿É´Ï´Ù.
npm i --save bootstrap
±×¸®°í À§¿¡¼ ¼öÁ¤Çß´ø /project/src/main.js
À» ´Ù½Ã ¿±´Ï´Ù.
import 'expose-loader?$!expose-loader?jQuery!jquery'
// À§¿¡¼ Ãß°¡Çß´ø jQuery ¹Ø¿¡ Äڵ带 ÀÛ¼ºÇϼ¼¿ä
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Áö±ÝºÎÅÍ jQuery
¿Í Bootstrap
À» µ¿½Ã¿¡ »ç¿ëÇÒ ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù.
Bootstrap
ÀÇ .js
, .css
°¡ Àß Ãß°¡µÇ¾ú´ÂÁö Å×½ºÆ®Çغ¸·Á¸é HTMLÄÚµåÀÛ¼ºÇÏ´Â ºÎºÐ¿¡ ¾Æ·¡¿Í °°ÀÌ Ãß°¡Çغ¸¼¼¿ä.
<template>
...
<button type="button" class="btn btn-primary" autocomplate="off" data-loading-text="jquery with bootstrap" @click="clickBtn">
...
</template>
<script>
export default {
name: 'jQueryApp',
methods: {
clickBtn (event) {
$(event.target).button('loading')
setTimeout(function() {
$(event.target).button('reset')
}, 1000);
}
}
}
</script>
À§ Äڵ尡 Á¤»óÀûÀ¸·Î ÀÛµ¿ÇÑ´Ù¸é jQuery, Bootstrap(js, css)°¡ Vue¿¡¼ Á¤»óÀûÀ¸·Î ÀÛµ¿ÇÏ´Â °ÍÀ» È®ÀÎÇÏ½Ç ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.
jQuery¸¦ Ãß°¡ÇÏÁö ¸øÇؼ ¸Á¼³¿´´ø ºÐµéÀ» À§ ¹æ½ÄÀ¸·Î ½±°Ô ½ÃÀÛÇÏ½Ç ¼ö ÀÖÀ¸¸ç, jQuery, Bootstrap »Ó¸¸ ¾Æ´Ï¶ó ±× ¿ÜÀÇ ÀÚÁÖ »ç¿ëÇß¾ú´ø ¶óÀ̺귯¸®µéµµ ÀÌ·¯ÇÑ Çü½ÄÀ¸·Î ½±°Ô Ãß°¡ÇÒ ¼ö ÀÖ½À´Ï´Ù.
Front-end¸¦ °³¹ßÇÏ°í ÀÖÀ½¿¡µµ ¾ÆÁ÷ Framework¸¦ »ç¿ëÇÏ°í °è½ÃÁö ¾Ê°í, ºÎ´ã½º·¯¿öÇϽô ºÐµéÀÌ ÀÖ´Ù¸é Áö±Ý ´çÀå ½ÃÀÛÇغ¸¼¼¿ä. ÇϷ縸 ÅõÀÚÇÏ¸é ¿øÇÏ´Â À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù :smile: