13. Vue.js 를 실무에 적용할 때!

뷰와 제이쿼리를 같이 사용해도 될까?

 

# jQuery : 자바스크립트 라이브러리

→ 선호하는 이유 : 순수 자바 스크립트에 비해 화면 DOM 요소 조작과 ajax 같은 데이터 요청을 쉽게 할 수 있기 때문이다.

 

Vue에서 jQuery는 필요없다.

 

jQuery 처럼 Vue 에서도 화면의 요소에 쉽게 접근할 수 있는 ref 속성을 제공한다. 또, 화면의 요소 이벤트도 v-on Directive 로 처리할 수 있다.

 

jQuery	Vue.js
// HTML <button id='btn'>시작</button> <p id='pEl'></p> ​ // Script $('#btn').click(function() { $('#pEl').text('jQuery'); })	// HTML <button v-on:click='clickBtn'>시작</button> <p ref='pEl'></p> ​ // Script methods: { clickBtn: function () { this.$refs.pEl.innerText = 'Vue'; } }

 

# Vue 안에 jQuery 를 사용할 때에는 라이프 사이클에 유의해야 한다.

<template> 속성으로 화면을 렌더링 하면 중간 과정에서 가상 DOM 이 개입하게 된다.

 

<template>
    <div id="app">
        {{ msg }}
        <button id='btn'>시작</button>
        <p id="pEl"></p>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Hello Vue.js!'
            }
        },
        created() {
            $('#btn').click(function() {
                $('#pEl').text('jQuery');
            })
        }
    }
</script>

위처럼 구현하면 btn 을 눌러도 아무런 반응이 일어나지 않는다.

​

왜냐하면, 인스턴스가 생성되는 시점인 created() 에는 아직 화면의 DOM 요소에 접근할 수 없는 상태이기 때문이다.

따라서 created() 시점에서는 button을 인식하지 못한다.

 

기존 레거시 코드에 뷰를 적용해야만 하는 상황이라면

 

그렇다면 언제 사용할 수 있을까 (사용을 권장하진 않고, 레거시 코드에 적용해야하는 불가피한 상황에만 쓴다.)

​

뷰의 가상 DOM 이 화면의 특정 요소에 부착되고 난 시점인 mounted() 에 사용해야 하며, 이때는 HTML 태그에 접근할 수 있다.

 

<template>
  <div id="app">
    App Component <br />
    <input id="calendar" />
  </div>
</template>

<script>
export default {
  mounted() {
    $('#calendar').datepicker();
  }
};
</script>

<style></style>

이렇게 뷰 로직 안에 jQuery 를 섞어서 개발하면 나중에 코드 추적하거나 관리가 어려워서 날짜 선택기 위젯 부분만

컴포넌트로 분리하여 관리해야 한다.

// App.vue
<template>
  <div id="app">
    App Component <br />
    <DatePicker></DatePicker>
  </div>
</template>

<script>
import DatePicker from "./DatePicker.vue";

export default {
  components: {
    DatePicker,
  },
};
</script>

<style></style>

// DatePicker.Vue
<template>
  <input id="calendar" />
</template>

<script>
export default {
  mounted() {
    $("#calendar").datepicker();
  }
};
</script>

<style></style>

 

 

뷰로 PWA 개발하려면?

# PWA (Progressive Web App) : 사용자에게 편의성을 제공하기 위해 빠른 성능과 애플리케이션 아이콘, 애플리케이션 설치, 푸시 알람 기능을 제공하는 웹 앱이다.

기존의 브라우저에서 웹 앱을 나타내는 방식에서 한 걸음 더 나아가 사용자들에게 편의성과 접근성을 제공하는 웹 앱이다.

​

# vue CLI 에서 제공하는 vue init pwa 를 통해 프로젝트를 구성하면 된다.