사용기 - Vue Material Kit 2

 Vue 2.5 기반의 Vue Material Kit 을 사용한 경험이 있어 Vue 3.0 과 bootstrap 5.0 을 기반으로 하는  Vue Material Kit 2 을 경험해 보았다. 

Vue Material Kit 2

홈페이지를 통하여 다운로드하는 경우 회원가입 절차가 필요하지만 Github 사이트를 방문하여 다운로드 하는 방법도 있다. 

VITE

Vue Material Kit 2 는 이전 버전과 다르게 개발 도구로  VITE(이하 비트)를 사용하고 있다. VITE 는 프랑스어로 '빠르다'라는 뜻이며 빠른 Frontend 개발 도구를 목표로 하고 있다. 

SFC (Single File Component)

Vue Material Kit 는 모든 예제들이 Vue 3 버전에서 처음으로 소개된 SFC (Single File Components) 문법(syntax) 를 사용하고 있다. 아마도 이것이 적응하는데 있어 어려운 부분이 있었던 것 같다.

Vue Material Kit UI 컴포넌트

Vue Material Kit 에서 제공하는 UI 컴포넌트들이 v-model 을 지원하지 않고 있어 "Best Ways to Use v-model to Custom Components in Vue 3 (Absolute Guide)" 자료를 참조 수정하여 사용하였다. 예를 들자면 MaterialInput.vue 컴포넌트을 (https://github.com/creativetimofficial/vue-material-kit/blob/master/src/components/MaterialInput.vue) 아래와 같이 수정하여 v-model 기능을 사용할 수 있도록 하였다.

Pinia 를 이용한 상태 값 관리

vuex 대신 Pinia 를 사용하여 상태 값을 관리한다. 로그인 상태 값을 관하는 것을 예로 들자면 더욱 간단하게 구현이 가능하다. 개인적으로는 mutations 를 사용하지 않는 점이 편리하게 느껴졌다. 

환경변수 활용

Vite 로 빌드된 Vue 3 앱은 기본적으로 dotenv(.env) 환경 변수를 지원하기 때문에 필요한 값들은 .env 파일에 정의하여 사용하면 된다. 주의할 것은 클라이언트 앱에서 사용하려면 VITE_ 접두사를 붙여야 한다. 서버 API URL 과 같은 값들을 정의하여 사용하면 편리하다.

참고자료

1. https://vuelidate-next.netlify.app/#getting-started-1
2. Best Ways to Use v-model to Custom Components in Vue 3 (Absolut    e Guide)
3. Vue 3 + Vite - Access Environment Variables from dotenv (.env)