최근 수정 시각 : 2024-10-30 10:10:59

퀘이사(프레임워크)

웹 프레임워크 및 기술
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all" 		$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드 <colbgcolor=#fcfcfd,#272935> CSS Bootstrap • Tailwind CSS • Bulma • Foundation • Skeleton • Pico
JSX React • SolidJS • Astro • Preact • Gatsby • Remix • Inferno • Qwik
JS Angular • Svelte • Backbone.js • jQuery • Astro • htmx • Ember.js • Lit • 11ty • Marko • VanJS • Alpine.js
Vue Vue.js • VuePress • Gridsome • Quasar • Astro
Python Reflex
백엔드 Java Spring • Struts • GWT • Grails • Jooby • Play! Framework Scala
Kotlin Ktor
JS Express • NestJS • koa • Hono • fastify
.NET ASP.NET$
PHP Laravel • Codeigniter • Reasonable • phalcon • Symfony • zend • CakePHP • FuelPHP • Yii • Slim • PHPixe
Python Django • Flask • FastAPI
Ruby Ruby on Rails • Sinatra
Go Gin • echo • Fiber
풀스택 JSX Next.js • Astro • SolidStart • Remix • Qwik City
JS SvelteKit • Fresh • Astro • Marko
Vue Nuxt.js • Astro
Java Vaadin$
Python Streamlit • Reflex
Rust Rocket • Actix • Leptos • Axum
하이브리드 .NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||


<colbgcolor=#ffffff,#1f2023><colcolor=#050A14,#FFFFFF> 퀘이사
QUASAR
파일:QUASAR-logo-ex.svg 파일:QUASAR_logo.svg
종류 Vue.js 프레임워크
라이선스 MIT 라이선스
개발 Razvan Stoenescu
언어 JavaScript
버전 2.17.1
파일:홈페이지 아이콘.svg | 파일:GitHub 아이콘.svg 파일:GitHub 아이콘 화이트.svg | | 파일:디스코드 아이콘.svg
1. 개요2. 특징
2.1. 장점2.2. 단점
3. 일렉트론을 사용하여 데스크탑 앱 빌드하기

[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 dev -m electron

다음 명령어로 일렉트론 앱을 빌드할 수 있다.
quasar build -m electron

분류