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

글로벌하게 등록

import Vue from 'vue'; 
Vue.directive(이름, 함수) 

UV
plugins/directives.js

import directive를 정의한 파일
import Vue from 'vue';
export default function () {
  Vue.directive('정의하고 싶은 이름', 실행 될 함수);
}

사용할 때 'v-정의한 이름'의 형태로 쓸 수 있다

지역적으로 등록

directives : { 
  focus : { 
  	inserted: function (el){
      el.focus()
    }
  }
}

Hook function

• bind
  : directive가 요소에 처음으로 바운드될 때 실행된다
  : 한번만 실행하고 싶을 때 사용
• inserted
  : 묶인 요소가 부모 노드에 들어갔을 때 실행된다
• update
  : 담긴 컴포넌트의 VNode가 업데이트되었지만 그 자식들이 업데이트 되기 전 실행
  : 변경된 것만 업데이트할 수 있도록 해준다
• componentUpdated
  : called after the containing component's Vnode and the VNode of its children have updated
• unbind
  : 요소로부터 directive가 언바운드 되었을 때 한번만 불린다

cf. window.matchMedia(mediaQueryString)
: 주어진 미디어 쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환

document에 적용된 media query에 대한 정보를 저장한다
immediate and event-driven matching against the state of the document

underscore

• 공통 프로그래밍 작업들을 위한 유틸리티 기능들을 제공하는 자바스크립트 라이브러리
• 객체 프로토타입을 확장하는 대신 함수형 프로그래밍 디자인을 채택한다

_.debounce()

• 주어진 함수 실행을 지연시키기 위해 사용

https://www.geeksforgeeks.org/underscore-_-debounce-function/

_.debounce(function, wait, immediate)
function : debounce 될 함수 
wait : milisec 단위로 
immediate : sequence의 시작 또는 끝 중에 어디서 실행되고 싶은지 설정할 때 사용 boolean

MediaQueryList

• 부모 인터페이스인 EventTarget에서 속성을 상속 받는다
• matches : document가 media query list를 일치하면 true, 아니면 false 리턴
• media : mediaQueryString 반환

serialization : 컴퓨터 과학의 데이터 스토리지 문맥에서 데이터 구조나 오브젝트 상태를 동일하거나 다른 컴퓨터 환경에 저장하고 나중에 재구성할 수 있는 포맷으로 변환하는 과정

const {matches} = window.matchMedia('(hover:none), (pointer:coarse)')