코딩 - Vuttify 3 (Vue 3 + Typescript + Vite ) : 무료 템플릿을 이용한 관리자 데시보드 프로그램 개발 시작하기

 ◼︎ 환경 

• Model : MacBook Pro (14-inch, 2021)
• CPU : Apple M1 Pro
• MENORY : 16GB
• DISK : 512 GB SSD
• OS : macOS 13.2.1 (22D68)
• TOOLS : Visual Studio Code, Git

Vuetify 프로젝트를 아래와 같이 yarn 명령을 사용하여 생성한다.

yarn create vuetify 

프로젝트를 Code 에서 확인하면 아래와 같이 개발을 쉽게 진행할 수 있도록 잘정리된  파일 구조를 확인할 수 있다.

터미널에서 npm run dev 명령을 입력하여 실행 프로젝트를 실행해 볼 수 있다.  

만일 Vue3 기술을 기반으로 하는 관리자 웹을 고려하고 있다면 무료 Modernize Free Vuetify + Vue js Admin Dashboard 템플릿 사용을 고려할 수 있다.  조금만 수정하면 아주 쉽게 관리자 웹  프로그램 개발을 시작할 수 있어 생산성에 많은 도움을 준다.

Modernize-vuejs-free

프로젝트 폴더 구성 역시 잘 구분되어 있어 바로 사용해도 무방할 것 같다.

   

코딩 - Vue 3 + Typescript + Vite + Vuetify 3.x 로 시작하는 웹 프로그램 : 반복작업

특정 화면에서 반복적인 작업을 수행해야하는 아래와 같은 경우를 가정해보자. 

• Index.vue 는 15초를 주기로  새로운 배경 이미지를 보여 준다.

개발은 크게 고민하지 않고 공개된 Unsplash  API 을 활용 이미지 목록을 가져와서 주기적으로 화면의 배경 이미지를 바꿔주었다. 

• src/store/unsplash.js 
• src/view/Indes.vue

Index View 에서는 ① mounted 되면  upsplash 에서 가져온 이미지 목록이 있는지 확인하고 없는 경우 fetch 함수를 호출하여 이미지 목록을 가져온다. ② setTimeout 함수를 사용하여 15000 단위로 바탕하면 이미지를 바꿔준다.

위 코드의 문제점은 아래와 같다.

1. 다른 View 로 이동하더라도 백그라우드에서 ② 작업이 무한 실행된다. 
2. 다른 View 에서 Index View 로 이동하면 ① 작업을 수행하고 ② 작업을 다시 무한 실행한다.
3.  불필요한 메모리 누수가 발생한다. 

◼︎ 개발환경 

• Model : MacBook Pro (14-inch, 2021)
• CPU : Apple M1 Pro 
• MENORY : 16GB
• DISK : 512 GB SSD
• OS : macOS 13.2 (22D49)

문제 해결

Vue3 Lifecycle 에 따르면 Composition API 에서 setup 은 create 와 같으며 View 가 마운트 되면  (View 가 화면에 보여지면) mounted (onMounted) 가 실행되고 언마우트 되면 (다른 View 로 이동하면) unmounted (onUnmounted)가 실행되는데 이점을 이용하면 Index 가 화면에 보여질 때만 ② 작업을 수행하도록 할 수 있다. 

반복작업은  setInterval() 함수를 사용하고 더이상 반복작업이 필요없는 경우에는 (다른 View 로 이동할 때) , setInterval() 호출시 리턴되는 ID 값을 인자로 clearInterval() 함수를 호출하면 timer 을 초기활 할 수 있다. 

참고자료

1. how to use setInterval in vue component
2. Vue.js polling using setInterval()
3. Composition API: Lifecycle Hooks
4. A Complete Guide to Vue Lifecycle Hooks - with Vue 3 Updates

코딩 - Vue 3 + Typescript + Vite + Vuetify 3.x 로 시작하는 웹 프로그램 : 로그인

 개발을 조금 쉽게 해보려고 무료로 이용이 가능한  Vuetify 3 - Vite Theme FREE 을 다운로드 하여 사용하였다.  (기본적인 환경만 미리 세팅이 되어 있어  사용할 필요성을 없을 것 같다. 타입스크립트라던지 개발 편의를 위한 설정이라든지 등의 여러 설정을 추가하느라 결과적으로는 더 힘들게 되어 버렸다.)

◼︎ 개발환경 

• Model : MacBook Pro (14-inch, 2021)
• CPU : Apple M1 Pro 
• MENORY : 16GB
• DISK : 512 GB SSD
• OS : macOS 13.2 (22D49)

사전 준비

기본 프로젝트는 Vite Theme Free 를 일부 수정 사용하였다. 

1. 필요없는 부분은 삭제를 하고 (src/plugins/vuetify.js) 전역으로 버튼 등의 UI 을 변경한 부분은 삭제하여 원래의 Vuetify 3 UI 을 사용할 수 있도록 변경. 
2. 타입스크립트를 사용하기 위하여 js 파일을 ts 로 변경하고 관련 설정을 추가. 
3. 개발 편의를 목적으로 vite-plugin-checker 플러그인을 추가. 

사용 주요 기술

① Pinia

Pinia 는 Vuejs 코어 팀이 구축한 새로운 상태 관리 라이브러리로 Vuex의 후속 제품이며 Vuex 보다 훨씬 적은 코드로 상태 관리가 가능하며 Vue 3에서 공식 권장되는 라이브러리이다.

Pinia 에서 State(데이터를 의미) 와 비즈니스 로직은 스토어(Store) 을 사용하여 정의되고, 각 스토어(Store) 에는 state, getters, actions 등이 포함한다. 

• State - Store 에서 관리되는 데이터를 의미. 기존 Vue 구성요소 data 와 동일.
• Getters - State 및/또는 다른 Getter 에서 파생(계산)된 값을 반환. 기존 Vue 구성요소 computed 와 동일.
• Actions - 비즈니스 논리 또는 API 호출과 같은 비동기 작업을 실행하는 데 사용. 기존 Vue 구성요소 methods 와 동일.

Pinia 스토어는 원하는 만큼 정의하여 사용할 수 있고 Vue 애플리케이션 어디에서나 전역적으로 접근할 수 있다. (상세 내용은 https://pinia.vuejs.org/core-concepts 참조.)

② Vue Composition API

Vue 3과 함께 제공되는 새로운 Vue Composition API <script setup> 를 사용하여 컴포넌트들이 빌드되도록 하였다. 일단 필요한 부분만 기술하면 되기 때문에 코드가 아주 간격해지는 이점이 있다.  (Vue Composition API에 대한 자세한 내용은 https://vuejs.org/guide/extras/composition-api-faq.html 을 참조.)

③ Vuelidate

입력값에 대한 검사는 Vutify 3 가이드 문서를 참조하여 Vuelidate  을 사용하여 구현하였다.

npm install @vuelidate/core @vuelidate/validators --save

Vuelidate 을 사용하면 비교적 간단하게 입력값 검사 기능을 구현할 수 있다.

④ dotenv

Path: /.env

VITE(이하 비트) 개발 도구 환경에서 dotenv 파일은 서버 호출 API URL 과 같은 다양한 변수 값들을 포함할 수 있다. dotenv 에 정의되는 변수들은 반드시  VITE_ 로 시작하며 Vue 프로그램에서는 import.meta.env.<variable name> 형태로 사용할 수 있다. ( 자세한 것은 Env Variables and Modes | Vite (vitejs.dev) 참고)

VITE_API_URL=http://localhost:4000

로그인 주요 구성 요소및 구현

• src/views/Login.vue : 로그인 UI 
• src/components/Alert.vue : 오류 처리 콤포넌트 
• src/store/auth.store.ts : 인증을 처리하는 스토어
• src/store/alert.store.ts : 오류 정보를 처리하기 위한 스토어
• src/router/index.ts : 라우터 메인 
• src/router/accounts.router.ts : 로그인 라우터 정보 
• src/App.vue : 메인 UI
• src/main.ts : 메인 스크립트

로그인은 아래와 같은 로직으로 기반으로 구현된다.  

전체 소스(Git) : donghyuck/studio-vuetify at v0.0.2 (github.com)

로그인 시 성공하면 Jwt 토큰과 사용자 정보를 같이 응답 받아 사용하도록 되어 있는데 이부분은 분리하는 것이 보안상 더 나은 선택인 것 같다. 

참고자료

1. Form validation in Vue 3 in 10 minutes with Vuelidate
2. Vue 3 + Pinia - User Registration and Login Example & Tutorial
3. Vue.js의 공식 Store | Pinia
   
4. Vue 3 Authentication with JWT, Vuex, Axios and Vue Router
   

사용기 - 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)

코딩 - Vue 2 환경에서 Vuex 를 pinia 로 변경하기

Vue3 에서 공식 상태 관리 라이브러리가 Vuex 에서 Pinia 로 변경되었다. Vue2, Vue3 모두를 지원하고 있고 향후 Vue3 환경으로 전환을 고려하여 Vuex 을 pinia 로 변경하는 작업을 진행하였다.

Install Pinia 

설치는 Pinia 공식 사이트의 가이드에 따라 진행하였다. 

❶ 패키지 관리자를 사용하여 pinia 설치

npm install --save pinia

❷ App 에서 플러그인을 설치하고 App 루트에 생성된 pinia 객체를 삽입

여러가지 문제들과 조우

공식 가이드에 따라 설치를 진행하였지만 여러가지 여러 오류가 발생되었으며 가장 먼저 아래 컴파일 오류를 접하게 된다.

문제 ① - 터미널에서 확인

Can't import the named export 'computed' from non EcmaScript module (only default export is available)

Webpack bundler .mjs 파일을 해석하지만 그것이 ESM 모듈이라는 것을 알지 못한다는 것을 의미한다.  이문제는 vue.config.js  파일에 webpack 규칙에 추가하여 해결 할 수 있다. 

module.exports = {

configureWebpack: {

module: {

rules: [

{

test: /\.mjs$/,

include: /node_modules/,

type: "javascript/auto"

}

]

}

},

문제 ② - 터미널에서 확인

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

이문제는 defineStore 함수를 사용하여 정의된 Store 객체를 다른 컴포넌트에서 사용하려고 하는 경우 발생하는 것으로 확인되었다. 이 문제는 Pinia가 준비되기 전에 다른 컴포넌트에서  정의된 Store 객체를  사용하는 경우에 발생된다고 하는데 여러가지 방법을 사용해보았으나 해결되지 않았고 pinia 객체를 인자로 하여 use...Store() 함수를 호출하는 방법으로 해결할 수 있었다. 

import { useStreamStore } from '@/store/streamStore'

import { pinia } from "@/store";

const streamStore = useStreamStore(pinia);

문제 ③ - Chrome 개발자 모드에서 확인

  pinia.mjs?be92:926 Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith') at devtoolsPlugin (pinia.mjs?be92:926:1)

Chrome 개발자 도구에서는 확인되지 않았지만 Firefox 에서 Vue Devtools 를 설치하고 확인한 결과 원인을 확인 할 수 있었다.

이 문제는 Store 을 정의할 때 id 값을 추가하여 해결할 수 있었다. 아래는 관련 소스이다.

사용후기 

pinia 를 적용하고 2주 정도 사용을 해보니 여러 장점들이 보이기 시작했다. vuex 경우는 하나의 저장소를 생성하면 state, getters, mutations, actions, modules  속성을 필요에 따라 정의해야 하는데 여간 불편한 것이 아니어서 멀리하는 경향이 있었다.(로그인의 경우만 적용)  pinia 의 경우 이부분이 단순화 되어 있어 적용이 쉬웠다. 또한 자꾸 사용을 하다 보니 왜 Vue 에서 store, service 로 모듈화시켜 개발하는지 조금 이해가 되었다.  (다수의 vue 오픈소스를 보면 store, service 로 모듈화 되어 있었다.)

참고자료

• Vuex를 사용해야 할 이유?
• Installation | Pinia
• Can't import the named export XXXX from non EcmaScript module (only default export is available)
  
• Using a store outside of a component
  

Tips - Vue 기반 앱 프로그램 개발 과정에서 경험한 유용한 것들

처음으로 Vue 기술을 적용하여 간단한 웹 프로그램을 개발하는 과정에서 경험한 유용한 것들을 순서로 기술하였다. ( WebPack 를 사용하여 간단한 웹 페이지를 만들어본 경험이 많은 도움이 되었다. )

UI Kit

화면 UI 구현은 Vue-Material-Kit 을 사용하였다. 백문이 불여일견(百聞不如一見) 이라고 했던가 Vue 를 잘 모르는 상황에서 개발을 시작하는데 많은 도움이 되었다.

 

인증

JWT 기반의 인증을 사용하는 것이 보편적인 것 같으며 관련 코드는  JWT authentication from scratch with Vue.js and Node.js  자료를 참고하였다. 참고로 REST 통신 부분은 원 소스 방식이 아닌 axios 를 사용하였다.

Service 객체는 통신만 담당하고 결과 데이터는 Store 에 저장된다.  UI는 이벤트를 통하여 결과를 전달 받는  소스 구현 방식이 생소하게 보인다.  (아주 오래전 경험한 어도비 FLEX 의 MVC 프레임워크인 Cairngorm 기반 응용 프로그램 개발이 연상되기도 한다.)

Dynamic Route Matching  

동적 라우팅 매칭을 이용하여 Spring 의 @PathVariable 와 같이 구현하였다. 정규식을 지원하기 때문에  파라메터 값을 String 이 아닌 Number  값으로 전달할 수 도 있다. 아쉬운 것은 route 가 아닌 history back 경우는 Number 타입이 아닌 String 타입으로 값이 전달되어 경고가 발생하는 이슈가 있었다.

Editor 

간단하게 CKEditor5 를 이용하여 구현이 가능했지만 첨부 이미지 처리를 위하여 사용자 정의 이미지 어뎁터를 구현해주어야 하는 이슈가 있었으나 홈페이지에서 관련 예제가 제공되어 기술적 어려움은 없었다. 

참고자료

1. Vuelidate getting start 
2. JWT authentication from scratch with Vue.js and Node.js
3. Vue.js + Vuex - JWT Authentication Tutorial & Example
4. Vue Development In 2019: What You Need To Know
   
5. VueJS CKeditor5 upload images
   
6. Custom image upload adapter
   

비주얼 스튜디오 코드로 Vue 웹 프로그램 개발하기

자바를 주 개발언어로 사용하고 있어 Eclipse,  Android Studio 정도를 개발 도구로 사용하고 있다.

소문으로만 들어온 Vue 를 CDN 방식의 코드를 참고하여 웹 프로그램에 적용해보았다. 기존  개발 방식과 비교하면 UI 컴포넌트들이 모듈와 되어 있어 쉽게 UI 구현 가능하지만 "Vue 를 꼭 사용해야 할까?" 라는 의문이 생겼다.

이러한 의문을 품고 요즘 유행하는 SPA (Single Page Application) 방법으로 개발 시도해보았다. 개발 도구에 조금  변화를 주었느데, 앞선 경험에서 Eclipse 도구가 그닥 유용하지 않아 Microsoft Visual Code Studio 를  사용해 보았다.

Visual Studio Code 

https://code.visualstudio.com/

① code.visualstudio.com 페이지를 방문하여 OS 에 맞는 프로그램을 다운로드하여 설치한다.
② Vue 개발를 위하여 다음의 Extentions 설치하였다.  설치는 Extentions 탭에서 검색하여 설치한다.

• Prettier - Code formatter 
• Vetur

기존 Eclipse 개발 도구와 비교하여 기대 이상의 성능과 개발의 편리함에 큰 충격을 경험하였다. 익숙한 것이 반듯이 좋은 것은 아닌것 같다.

웹 프로그램 

Vue 에 대한 충분한 지식과 경험이 없었기 때문에 무료이용이 가능한 Vue Material Kit 를 기반으로 간단한 프로그램을 개발하였다. 유료 버전도 있었지만 테스트를 위한 프로그램 템플릿으로 사용하는데에는 무료버전역시 충분했다.

Vue Material Kit (Free)

추가로 아래와 같은 기능들을 구현하였다. 학습의 목적도 있었기 떄문에 UI 기능 구현은 가능한 여러 컴포넌트들을 사용하려고 노력 하였다. 또한 클라이드 기반의 배포를 고려하여 시스템을 구성해보았다.

1. 로그인 - JWT(JSON Web Token) / 로그아웃
2. 인증 여부에 따른 메뉴 구성
3. 블로그
4. 이미지 갤러리

전체 구성도

프로그램 소스 : https://github.com/andang72/architecture-community-vue

편리하다고 느낌점들 

1. 기본적인 HTML 과 JavaScript 기술을 가지고 있다면 어렵지 않게 개발이 가능하다.
2. 다양한 UI 컴포넌들이 존재하고 매뉴얼도 잘 정리되어 있어 UI 개발이 편리했다.
3. 서버 API 호출이 간단했다. API 가 이미 존재하는 경우 아주 빠르게 개발이 가능할 것 같다.
4. 배포가 아주 단순했다. build 결과물을 웹 서버에 업로드만 하면 된다.

불편하다고 느낀점들

Search Results

Web results

처음 개발을 시작할 당시 Cross-Origin Resource Sharing (CORS) 관련 이슈가 상당히 신경쓰이는 부분이었다. ( ☛ Vue 개발 보다는 Spring 기반의 서버 부분에서 처리에 어려움이 있었다.  그러나 일단 해결되고 나면 크게 이슈가 되지 않았다.)

공통 함수 부분이 불편했다. vuex 에서 제공하는 ...mapActions 를 사용하는 방법이 일반적이 였지만  Template 에서 사용하기 위해서는 함수를 다시 만들어 주어야 하는 것이 사용을 어렵게 했다. ( ☛ 로그인 부분에서만 사용했다.)

긍정적으로 평가하는 점들

• 클라이언트 프로그램들을 웹서버가 아닌 CDN 과 같은 다수의 장비에 큰 어려움 없이 배포가 가능하기 때문에 API 서버 성능만 보장이 된다면 굉장한 성능 개선이 가능할 것 같다. 

참고자료

• https://itnext.io/getting-started-vue-js-and-visual-studio-code-6990f92e918a
• https://code.visualstudio.com/
• How to build a Single Page Application using Vue.js, Vuex, Vuetify, and Firebase
• How to create new projects with the Vue CLI
• https://developers.google.com/web/tools/lighthouse
• https://vuematerial.io/components/app/
• https://bezkoder.com/jwt-vue-vuex-authentication/