Quasar Framework ?
Quasar 프레임워크는 Vue.js를 기반으로 한 개발 프레임워크입니다. 이 프레임워크는 Vue.js의 강력한 특징을 기반으로 하며, 웹 애플리케이션 및 모바일 앱 개발을 빠르고 효과적으로 할 수 있도록 도와줍니다. Quasar는 Vue.js 컴포넌트, 라우팅, 상태 관리 및 디자인 요소를 통합하여 개발자가 단일 코드베이스로 다양한 플랫폼에서 애플리케이션을 만들 수 있도록 지원합니다. 또한 Quasar는 많은 미리 제작된 디자인 구성 요소와 테마를 제공하여 디자인 작업을 단순화하고 일관된 사용자 경험을 제공합니다. 이 프레임워크는 모바일 앱 개발을 위한 Cordova 및 Capacitor 통합을 지원하므로 Android 및 iOS 플랫폼에도 애플리케이션을 배포할 수 있습니다. Quasar는 Vue.js와 함께 사용하기에 이점이 많으며, 웹 및 모바일 앱 개발을 더 쉽게 만들어줍니다.
Vue JS 를 처음 접한게 Quasar Framework 로 접했다. React, Vue, Angular 이렇게 삼대장으로 불리는데 그 중에서 가장 접근하기 쉽다고 하더라. 사실 Vue 를 해본적도 없고, 그저 강의 따라하면서 감으로 만들었다.
"VMware API" 테스트 용으로 페이지를 만들면서 더 이상 데이터처리노가다를 하고 싶지 않아서 jsp 나 thymeleaf 대신 사용해보게 되었다.
로그인 화면도 만들고,
VM 을 배포할 수 있는 카탈로그도 구현해보고,
VM을 배포하기 위해서 스펙을 지정하는 모달창도 만들어보고,
실제로 배포가 되는 Deploy API 로 진행상태도 구현해보았다.
기능은 정말 몇가지 없는데, API 는 수십개를 사용했다.
이 글은 정리 목적보다, 다음번에 프로젝트를 해볼 때를 위함이다.
어느 것을 놓치면 안되고, 이 부분은 이런걸 사용해서 처리를 했었다. 라는 기억을 다시 떠올리기 위함이다.
프로젝트 구조를 기준으로 살펴보면, boot 에 axios.js 가 있다.
여기서는 axios 를 설정하는 곳이다.
여러 호스트를 사용할 때, 각각 구분해서 사용할 수 있게
const login = axios.create({baseURL:'http://도메인'})
이런식으로 설정을 한다거나, interceptors 를 이용해서, 스프링 시큐리티의 인터셉터 처럼
사용할 수 도 있다. 이걸 이용해서, AccessToken 을 관리하는데 사용했다.
components 는 위젯 같은 느낌을 많이 받았다.
화면을 구성하는 수많은 오브젝트중에 한 부분을 차지하는 기능을 컴포넌트별로 구현하여,
재사용이나 원하는 곳에 자유롭게 배치할 파일을 컴포넌트로 만든다.
layouts 은 재사용성을 고려한 요소를 작성.
헤더, 푸터, 사이드 같은 요소.
ex) 헤더에 로그인 상태 표시
-> 구현할 때, Store 를 사용했다.
pages 는 컴포넌트를 원하는대로 배치하여, 완성된 페이지이다.
페이지, 레이아웃, 컴포넌트는 한번 그림을 그려서 계층구조로 이해를 하여 다시 기억하도록 해야겠다. 천천히 생각해보면, 퍼즐 맞추듯 설명은 되지만 1+1=2 처럼 선명한 느낌이 아니다.
router 는 위의 pages 를 url 요청에 맞게 라우팅한다.
라우터도 모드가 있고, createWebHashHistory 모드를 사용했었다.
설정 내용들은 "라우팅 될, 레이아웃 컴포넌트" 를 설정하고,
"해당 레이아웃 컴포넌트의 뷰" 영역에 표시될, 페이지들을 나열.
"해당 컴포넌트 페이지를 바로 호출 했을 때, 인증 체크" 이런 내용들을 서술했다.
Store 저장소를 정의하는데, 자바의 Util 클래스 작성하는 느낌이다.
state 로 상태를 저장하는 변수생성 및 초기화, getters 에는 state 의 값을 얻어오는 함수를 서술, actions 에는 state 값들로 사용할 API 같은 기능을 구현했다.
ex) Login, Logout, 리프레시 토큰 요청 등
stores 는 axios 와 함께 사용했는데, 많이 헷갈리고 어려웠다.
어떤 상황에서 계속 값이 증발하고, 유지가 안되서 사용했었는데 잘 기억이 안난다.
pinia 라이브러리를 사용했다.