JQuery 사용방법 (비권장)
========================

jQuery를 사용하시는 경우 아래와 같은 단점을 초래할 수 있습니다.

-  코드가 복잡해지기 쉽다.

-  최초 화면 로딩 시간이 늘어난다.

-  Vue 와 jQuery간 충돌 발생 시, 문제가 더 커질 수 있다.

-  파일 크기가 커진다.

.. note::

    jQuery 기능은 대부분 트랜지션과 디렉티브를 통해서 구현할 수 있습니다.

    https://kr.vuejs.org/v2/guide/custom-directive.html

    https://kr.vuejs.org/v2/guide/transitioning-state.html

    ajax 관련 기능 필요시 axios를 사용을 권장드립니다.

    https://www.npmjs.com/package/axios

jQuery 사용이 필요한 경우 아래의 코드를 참고하여 사용할 수 있습니다.

1. Jquery 설치

.. code-block:: bash

    npm i jquery

2. 전역변수 선언

frontend/build/webpack.common.js 내..

.. code-block:: js

    new webpack.ProvidePlugin({

        '$': 'jquery',

    }),

3. 사용 예시 (mounted 안에서 사용)

Vue 샘플..

.. code-block:: html

    <template>

        <div>

        <button @click="slide">Slide Toggle</button>

        <ul ref="list">

            <li>1</li>

            <li>2</li>

        </ul>

        </div>

    </template>

    <script>

    export default {

        name: 'App',

        methods: {

            slide() {

                $(this.$refs.list).slideToggle();

            },

        }

    };

    </script>


4. ESLint 사용시

fronted/.eslintrc 내.. 선언 필요

.. code-block:: javascript

    "globals": {

        "M" : "readonly",

        "$mcore": "readonly",

        "$": "readonly",

        "_": "readonly",

        "moment": "readonly"

    },