Quasar Framework란 무엇인가

오늘은 Vue.js 기반의 크로스플랫폼 개발 UI 프레임워크인 Quasar에 대해 정리해보려고 한다. 퀘이사는 SPA, SSR, PWA, 모바일 앱, 데스크탑 앱을 모두 개발할 수 있는 크로스플랫폼이다.

Cross Platform - 크로스 플랫폼
퀘이사는 크로스 플랫폼으로서 앱과 웹 등을 개발할 때 손쉽게 사용할 수 있는 프레임워크라고 한다. 그렇다면 크로스 플랫폼이란 무엇일까? 말 그대로 여러 플랫폼을 넘나들는 개발 방식이라고 볼 수 있다.

컴퓨터 개발 분야에서는 Window, Mac, Linux 등의 다양한 운영체제(플랫폼)에서 사용할 수 있는 언어를 말한다. Java가 여기에 속한다고도 볼 수 있다.

앱 개발 분야에서는 Android와 iOS, Web 세 플랫폼에서 동일한 소스코드를 사용하여 앱을 개발하는 방식을 말한다. 대표적으로 React Native, Flutter, Xamarin, Ionic이 있다고 한다.이러한 크로스 플랫폼을 사용하면 비용 절감과 시간 단축, 범용성, 디자인의 일관성이라는 장점을 갖게 된다. 그러나 네이티브(각 분야의 언어 사용) 앱에 비해 부족한 성능을 갖게 되며, 업데이트의 문제를 갖게 될 수 있다고 한다.

이렇듯 크로스 플랫폼은 분야에 따라 조금씩 다르게 사용하는 듯하나, 결국 Window, Mac, Linux, Web, Android, iOS 등 여러 플랫폼에서 사용할 수 있는 개발 도구를 의미한다. 퀘이사도 마찬가지로 SPA(웹 단일 애플리케이션), SSR, PWA(프로그레시브 웹), 모바일 웹, 데스크탑 앱, 하이브리드 앱 등 다양한 플랫폼을 엮을 수 있는 크로스 플랫폼을 지원한다.

UI 프레임워크
퀘이사는 UI를 빠르게 만들 수 있는 프레임워크이기도 하다. 퀘이사는 여러 UI 컴포넌트를 지원하기에, 원하는 카드의 이미지를 찾아서 그 코드만 넣으면 원하는 UI를 하나하나 만들 필요가 없이 빠르게 원하는 모양을 구현하여 작동시킬 수 있다. 그 외에도 플로그인을 제공하여 로딩과 다이얼로그 등도 쉽게 구현할 수 있어 웹, 앱 등을 구현하는데 큰 도움을 준다. 즉 프론트엔드에 힘들 덜 들일 수 있다는 크나큰 장점이 있다. 따라서 소규모, 저비용 등 효율성을 제고하는데 도움이 될 듯하다.

Vue.js 기반 프레임워크
퀘이사는 Vue의 컴포넌트, 라우팅, 상태 관리 및 디자인 요소를 통합하여 사용자 편의를 더한 프레임워크라고 한다. Vue.js도 프레임워크인데 그걸 통합한 프레임워크라고? 먼저 프레임워크가 무엇인지를 아는 것이 중요하다. 프레임워크는 개발자가 소프트웨어 개발을 가속하여 프로덕션 배포에 이르는데 도움을 주는 유연한 범위의 소프트웨어 구성 요소를 제공한다고 한다. 뭔 말일까. 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조라고 하기도 한다. 라이브러리를 찾아볼 때도 비슷한 이야기가 나왔다. 더 잘 모르겠는데? 이는 내가 잘 몰라서 그럴 수도 있지만 찾아보면 딱히 라이브러리랑 프레임워크를 크게 구분짓지 않는다고 한다. 그래도 굳이 엄밀하게 구분하자면 흐름에 대한 제어 권한을 누가 갖는지로 구분할 수 있다고 한다. 프레임워크는 자체적인 흐름을 갖고 있는 개발환경에 필요한 클래스, 인터페이스, 컴포넌트의 집합이며 라이브러리는 개발자가 흐름에 대해 제어를 하는 도구나 함수의 집합을 말한다.

이제 Vue.js에 대해 좀 알아보겠다. vue는 사용자 인터페이스를 만들기 위한 오픈 소스 프로그레시브 자바스크립트 프레임워크이다. 이는 직관적인 문법을 가지고 있으며, HTML과 Javascript를 섞어 사용하기에 한 화면 구성을 쉽게 구현할 수 있다고 한다.