개발/Vue

vue.js 사용자 지정 디렉티브를 활용해서 코드를 깔끔하게 작성하는 방법 (vue custom directive)

🤚 들어가기 전에 Vue에는 기본적으로 내장된 디렉티브가 존재합니다. v-model과 v-show가 대표적인 예시죠. 하지만 이외에도 사용자가 직접 디렉티브를 만들고 등록할 수도 있습니다. 디렉티브를 잘 만들어 놓으면 굉장히 유용하게 재사용할 수 있습니다. 💻 디렉티브 등록 방법 사용자 지정 디렉티브를 등록하는 방법에는 2가지 방법이 있습니다. 전역으로 등록하는 방법과 로컬 컴포넌트에 등록하는 방법입니다. 전역 선언 Vue 인스턴스 선언하기 전에 Vue.directive 전역 등록을 시켜줍니다. 지역 선언 로컬 컴포넌트에 directives로 등록하는 방법입니다. 아래와 같이 지역적으로 directives를 등록하면 됩니다. 💻 훅 함수 디렉티브에는 아래와 같은 다양한 훅 함수를 제공합니다. bind 디..

개발/Vue

vue.js Event Bus를 통해 컴포넌트간 통신하기 (Event Bus in Vue.js)

✨ 들어가며 vue.js에서는 일반적으로 부모/자식간의 이벤트 통신하는 방식을 사용합니다. 하지만, 경우에 따라서는 서로 관련없는 독립적인 컴포넌트끼리 이벤트를 통신해야할 때가 생깁니다. 이 경우를 좀 더 편하게 도와주는 vuex라는 state 관리 라이브러리도 있지만 규모가 작을 경우에는 단순히 EventBus를 활용해서 간단하게 처리할 수 있습니다. ✍️ 사용방법 이벤트버스 초기화 이벤트버스를 구현하는 것은 매우 쉽습니다. 단지 아래와 같이 하나의 vue 인스턴스만 생성해주면 됩니다. 이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간지로 활용합니다. vue component -> EventBus -> vue component // event-bus.js import Vue from "vue"; ..