|
<colbgcolor=#ffffff,#1f2023><colcolor=#050A14,#FFFFFF> 퀘이사 QUASAR |
|
|
파일:QUASAR-logo-ex.svg
|
|
| 종류 | Vue.js 프레임워크 |
| 라이선스 | MIT 라이선스 |
| 개발 | Razvan Stoenescu |
| 언어 | JavaScript |
| 버전 | 2.17.1 |
|
|
|
[clearfix]
1. 개요
Vue.js용 크로스플랫폼 개발 프레임워크이다. 대략적인 정보는 이 블로그 글에서 얻을 수 있다.2. 특징
퀘이사 앱을 쉽게 개발하거나 확장하도록 도와주는@quasar/cli 명령줄 인터페이스를 제공한다.웹 번들러는 webpack 및 Vite 를 모두 제공하며, 입맛에 맞게 사용할 수 있다.
webpack 을 사용할 경우 기본적으로 babel을 사용하게 되지만, 필요에 따라 SWC를 사용하여 생산성을 높일 수 있다.
2.1. 장점
- Material Design 기반의 UI 컴포넌트가 기본 제공되어 기본 제공되는 UI 만으로 빠른 웹 어플리케이션 개발이 가능하다.
- 하나의 프레임워크로 SPA, SSR, PWA 웹 어플리케이션 개발을 넘어, Electron, Cordova 등으로 데스크톱 및 모바일 어플리케이션 개발까지 한 번에 가능하다.
- Vue.js 기능의 이점을 누릴 수 있기 때문에, Options API 와 Composition API 모두 지원한다.
- 확장성까지 제공되어 손쉽게 부족한 웹 어플리케이션 기능을 확장할 수 있다.
2.2. 단점
- 하나의 종합 프레임워크(Full-featured Framework) 체제이기 때문에 특성 상 모태가 되는 Vue.js 생태계에서는 전용 프레임워크( Nuxt.js)와 달리 업데이트 속도를 따라가지 못해 Vue.js 의 최신 기술을 빠르게 누리기엔 어려움이 따른다.
- 상기한 특성 문제로 기본적인 Vue.js 웹 앱 대비 웹 어플리케이션 번들 용량이 큰 편이다.
- 프레임워크의 단점 또한 따라가는 특성 상 종속적인 부분이 많아 같은 Vue.js 기반 라이브러리라도 검증해야 할 부분이 많다.
- Headless UI를 제공하지 않아 UI 부분의 경우 커스터마이징의 자유도가 부족하다.
3. 일렉트론을 사용하여 데스크탑 앱 빌드하기
제일 먼저 다음 명령어를 입력해 퀘이사 CLI를 설치한다.npm install -g @quasar/cli
이후 다음 명령어를 입력하고 프롬프트를 따라 프로젝트 설정을 한다. 프로젝트 이름 바꾸는 게 안 돼서 헤멜 수 있는데, 스페이스바를 한 번 눌러주면 디폴트 이름이 지워지고 원하는 이름을 입력할 수 있게 된다.
quasar create my-quasar-project
프로젝트가 생성되면 프로젝트 디렉토리로 이동한 후, 일렉트론 모드를 활성화 시켜서 프로젝트에 필요한 일렉트론 관련 종속성을 설치하고 설정 파일을 생성한다.
cd my-quasar-project
quasar mode add electron
quasar mode add electron
다음 명령어로 일렉트론 앱을 실행할 수 있다.
quasar dev -m electron
다음 명령어로 일렉트론 앱을 빌드할 수 있다.
quasar build -m electron