레이블이 Vue인 게시물을 표시합니다. 모든 게시물 표시

2022년 11월 30일

사용기 - 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 과 같은 값들을 정의하여 사용하면 편리하다.

참고자료

2022년 9월 20일

코딩 - 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 로 모듈화 되어 있었다.)

참고자료

2022년 4월 15일

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

참고자료

2020년 3월 26일

비주얼 스튜디오 코드로 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 기능 구현은 가능한 여러 컴포넌트들을 사용하려고 노력 하였다. 또한 클라이드 기반의 배포를 고려하여 시스템을 구성해보았다.

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

전체 구성도

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

편리하다고 느낌점들

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

불편하다고 느낀점들

Search Results

Web results

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

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

긍정적으로 평가하는 점들

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