Vue - directive

위코드를 수료 하고 취업을 한지 5개월 차가 되었다.
취업하기 전에는 가끔 공부한 것을 정리하고 글을 남기곤 했는데.. 역시나 취업을 하고 나니 글을 하나도 작성하지 않았다.😅
그동안의 나.. 반성해라!

회사에서는 Vue를 사용하고 있는데, Vue의 기본적인 적을 배우지 않고 업무를 시작했기 때문에 직접 부딪히면서 배우고 있는 느낌이다. 업무를 할 때 부족하다고 생각하는 부분들을 공부하고 정리하여 글을 올릴 예정이다.

Vue에서 값을 렌더링 할 때 필요한 디렉티브

• v-bind
• v-once
• v-html

html 속성에 접근하는 v-bind

<a href="{{ link }}">링크</a> // X

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <a v-bind:href="link">링크</a> // O
</div>

v-bind

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

v-on 약어 @

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

일회성 디렉티브 v-once

// html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <h1 v-once>{{ title }}</h1> // 안녕 VueJS!
  <p>{{ sayHello() }}</p> // 안녕하십니까!
</div>

// js
new Vue({ 
  el: "#app", 
  data: {
    title: "안녕 VueJS!",
  },
  methods: {
    sayHello: function () {
     this.title = "안녕하십니까!"
     return this.title
    }
  }
})

• sayHello함수는 data에 선언된 title 값을 "안녕 VueJS!"에서 "안녕하십니까!"로 변경하고 title을 출력한다.

• Vue는 Vue instance 내의 데이터와 DOM이 연결되어 모든 것이 반응형으로 작동하는데, 처음 title 값은 "안녕 VueJS"라고 출력되지만 sayHello 함수가 호출되는 순간 data에 있던 title 값이 "안녕하십니까"로 변경 되기 때문에 h1태그나 p태그 모두 "안녕하십니까"가 출력된다.

• 이 때, {{ title }}은 변경 되기 전 값이 출력되고, {{ sayHello() }}는 변경 된 후의 값이 출력되게 하려면 v-once 디렉티브를 사용하면 된다.

v-once 디렉티브는 HTML 코드로 출력이 된 이후에 다른 후처리가 있더라도 처음에 출력한 값을 유지시킬 때 사용한다.

HTML 코드를 직접 template에 넣어주는 v-html

• v-html 디렉티브는 data의 값을 출력하는데, HTML 코드를 직접적으로 입력해줄 때 사용한다.

// html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <p>{{ aLinkTomedium }}</p>
</div>

// js
new Vue({ 
  el: "#app", 
  data: {
    aLinkToMedium: "<a href='http://medium.com'>링크</a>"
  }
})

• 위 코드의 결과는 <a href='http://medium.com'>링크</a> HTML 형태가 아닌 String(문자열)의 형태로 출력이 된다. HTML 코드인지 문자열인지 구분하지 못한다는 것을 알 수 있다.

// html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <p v-html="aLinkToMedium"></p>
</div>

• 이럴 때 위에서 처럼 v-html 디렉티브를 사용하면 HTML로 인식하여 p태그 안에 a태그가 삽입된 것을 볼 수 있다.

vue-date-pick 사용하기

API를 통해 날짜를 받아오고 그 날짜를 클릭하면 달력이 보이는 부분을 만들었어야 했다.

import DatePick from 'vue-date-pick';
import 'vue-date-pick/dist/vueDatePick.css';

위 처럼 vue-date를 import 해 주고 커스터마이징을 위한 css까지 import 해준다.

<div class="select-date">
  <a
    href="#"
    class="action-item align-items-center pt-0 pr-3"
    @click="selectedList('dateSelector')"
  >
  <img :src="`${$C.IMAGE_PREFIX}tutor/icon_date.svg`" alt="" />
  <div class="dateSelector-parents" ref="dateSelectorParents">
  	<date-pick v-model="date">
    	<template v-slot:default="{ toggle }">
        	<button @click="toggle" class="start-date">
            	{{ param.startAt | titleDay }}
            </button>
            <i class="fas fa-sort-down ml-2 mb-2" style="color: #343300"></i>
         </template>
     </date-pick>
  </div>
 </a>
</div>

• {{ }}은 고정된 값이 아니라 DOM에서 데이터를 선언적으로 렌더링
• param.startAt에 API에서 받아 온 날짜를 저장
• |titleDay에 moment의 format을 적용