Vue Plugin과 Quasar Boot 활용

작성 계기

이번 블로그에서는 Vue Plugin과 Quasar Boot의 활용에 대해 알아보겠습니다. 이 주제를 선택한 이유는 Quasar 프로젝트를 진행하면서 Vue의 모듈을 사용하는 과정에서 발생하는 문제와 해결책을 공유하고자 하기 때문입니다.

마주한 문제

내가 마주한 문제는 vue-page-stack이라는 모듈을 Vue 버전 문제 때문에 npm으로 설치하지 않고 해당 모듈을 바로 가져와 Quasar에 적용하는데 발생하였습니다 Quasar란 Vue를 기반으로한 프레임워크로 웹사이트와 앱에 최신 UI를 사용할 수 있고 다양한 기능들을 제공해주는데 Quasar에서도 Vue의 모듈을 사용해야한다 여기서 Quasar와 Vue의 파일 구조가 달라 각 파일의 역할을 알아야 한다. 해당 모듈을 카피해서 사용하기 위해서 Vue의 Plugin과 Quasar의 boot 파일을 알아야한다.

Vue Plugin: 확장성 있는 기능 추가

Vue.js에서 Plugin은 애플리케이션의 전역 기능을 추가하는 방법 중 하나입니다. 일반적으로 애플리케이션 전체에서 공통으로 사용하는 기능을 분리하여 코드를 재사용하고 유지보수를 용이하게 할 수 있습니다.

예를 들어, Vuex나 Vue Router 같은 라이브러리는 Vue Plugin으로 구현되어 프로젝트 전체에서 상태 관리나 라우팅 기능을 편리하게 사용할 수 있게 해줍니다. 아래는 Vue plugin에 적용하는 간단한 예제 코드입니다.

VuePlugin.js
const VuePlugin = {
  install(app, { router }) {
	// app에서는 Vue의 프로퍼티들을 활용할 수 있습니다
    app.component("VuePage", VuePage);
    router.beforeEach((to, from) => {
       // code
    }
  }
}

Quasar Boot: 애플리케이션 초기화 단계에서 실행

Quasar 프레임워크에서 Boot는 애플리케이션이 초기화될 때 실행되는 로직을 정의하는 방법입니다. Vue.js의 라이프사이클 훅과는 조금 다르게, 애플리케이션이 아직 인스턴스화되기 전에 실행되기 때문에 전역 설정이나 초기 데이터 로딩 등을 처리하기에 적합합니다.

예를 들어, 언어 설정이나 사용자 정보와 같이 애플리케이션 시작 시 필요한 데이터를 로딩하거나 초기화하는 작업을 Quasar Boot를 활용하여 구현할 수 있습니다. 아래는 위의 VuePlugin을 Quasar Boot에서 사용하는 코드입니다

// boot/my-boot.js

export default ({ app, router }) => {
  // Boot 로직 구현
  // app에서는 Vue의 프로퍼티들을 활용할 수 있습니다
    app.component("VuePage", VuePage);
    router.beforeEach((to, from) => {
       // code
    }
}

결론

이전에는 각 프레임워크의 파일들을 아무 생각없이 사용하였는데 모듈을 직접 붙여보고 사용해보니 프레임워크의 동작과정과 각 파일의 용도의 중요성을 깨닫게 되었다.