Front-end

[vue3] Quasar CLI (with vite) 사용해보기

eujin 2024. 6. 13. 02:19

안녕하세요,

날먹하고 싶은 윾진입니다.

FE... 날먹할 순 없을지, 이리저리 살펴보다 Quasar를 발견했습니다.

사실 나온지는 꽤 됐고, 유명하지만 나만 모름 ㅋㅋ

암튼 Quasar 얼마나 쌈@뽕한지 한번 알아봅시다.

 

Quasar

Quasar 공식 문서

vue.js 기반 MIT 라이선스 오프 소스 프레임워크.
다양한 유형의 반응형 웹 , 앱을 빠르게 만들 수 있음.

  • SPAs (싱글 페이지 앱)
  • SSR (서버 측 렌더링 앱) (+ 선택적 PWA 클라이언트 takeover)
  • PWAs (프로그레시브 웹 앱)
  • BEX (브라우저 확장)
  • 모바일 앱 (Android, iOS, …) Cordova 나 Capacitor를 통해
  • 다중 플랫폼 데스크톱앱 (Electron 사용)

이 모든걸 Quasar에서 지원한다고?
완전 럭키퀘이사잖아 ? 🍀🩷

왜 Quasar ?

  • Vue.js를 기반
  • 웹사이트와 앱에 최신 UI(머티리얼 가이드 라인 준수)를 바로 사용할 수 있음
  • 데스크톱 및 모바일 브라우저(iOS Safari 포함!)에 대한 최상의 지원
  • 각 빌드 모드(SPA, SSR, PWA, 모바일 앱, 데스크톱 앱 및 브라우저 확장)에 대한 동급 최상의 지원 및 자체 CLI와의 통합을 통한 최고의 개발자 경험
  • 손쉽게 사용자 정의(CSS) 및 확장(JS) 가능
  • 성능에 중점을 둔 프레임워크
  • 자동 tree-shakable (불필요한 코드를 제거하는 기능)
  • 포럼 및 디스코드 채팅의 커뮤니티
  • 새로운 기능을 포함한 정기적인 릴리스
  • 빠른 버그 수정 및 적극적인 커뮤니티 요청 수용
  • 전체 개발 환경 처리(앱 아이콘 및 시작 화면 생성 포함)

Quasar 설치

vue와 node는 설치되어 있다는 전제 하에 글을 작성한다.

아래 한 줄을 치면 나의 상황에 맞게 프로젝트를 설정할 수 있다.
하나하나 답하다보면 프로젝트 생성된다.

npm init quasar


그리고 바로 실행해보기

npm run dev

그럼 이런 창이 뜬다. 빌드 성공

prittier 설정

.eslintrc.cjs 를 보면 (ESLint는 코드 퀄리티를 보장하도록 도와주는 도구)
성능상의 이유로 prettier가 설치되어 있지 않으니 설치해서 사용하라는 안내가 되어있다.
prettier는 그냥 코드 예쁘게 잘 정리해주는 뭐 그런거라고 보면 된다.
(코드 구현과는 관련없는, 일관된 텍스트 작성을 도와주는 도구)


요렇게 플러그인을 설치해주자.


그리고 .prettierrc 파일을 만들고 원하는대로 설정해주자.

npm run lint

위 명령을 통해 검사하고,

npm run format

위 명령을 통해 모든 파일에 적용할 수 있다.


잘 적용 되었을 것이다!

프로젝트 구조 뜯어보기

App.js


이 코드는 수정할 필요 없는 파일이다.
App.js는 Quasar에 의해 자동으로 생성되는 파일이라, 삭제되어도 다시 생성된다.

/src/boot (중요한 boot 디렉토리!)

application을 초기화 하는 코드를 넣고 싶을 땐?
=> App.js 에 바로 넣는 게 아닌 /src/boot 에 초기화 하는 파일을 넣으면 된다.

전역 플러그인 등록, 설정 초기화, API 통신 설정, root vue 인스턴스에 설치할 것들 설정할 때 모두 boot 디렉토리에 넣어준다.


test.js 파일을 만들어주자.


예시로 Axios 인스턴스를 전역으로 설정하고 Vue에 $testFunction이라는 전역 함수와 전역 플러그인 TestPlugin을 추가해 보자.

그리고 마지막으로 quasar.config.js 에서 요렇게 등록을 해줘야한다.

그럼 끝 !

quasar.config.js

vite로 프로젝트를 시작할 땐 vite.config.js 가 있지만,
quasar CLI 를 사용해서 프로젝트를 시작했기 때문에 quasar.config.js 가 있다.
여기서는 quasar에서 지원하는 많은 기능들을 사용할 수 있다. 개꿀~
여긴 뭐 그때그때 공부하면서 하면 될 듯 !

jsonconfig.json (Folder aliases)


공식 문서를 보면 quasar 에서 정의된 folder aliases 가 있어서 지정된 별칭을 사용할 수 있다.


그래서 컴포넌트 불러올 때 ./src/component/원하는파일.vue 이렇게 써주지 않아도 된다.
components/원하는파일.vue 이렇게만 써줘도 된다.

여기서부턴 뭐 일반적인 디렉토리 구조와 같거나 비슷하다.

dist

dist 폴더는 빌드된 파일들이 들어가는 곳
삭제를 하더라도 npm run build 파일로 다시 만들 수 있다.

public

정적인 리소스 모아둔 곳

component

재사용 하는 코드들

css

다 알겠지만, 스타일 지정 파일을 넣는 폴더
근데 ! quasar.variables.scss 가 있는데 .. quasar 에서 제공하는 스타일을 변경할 수 있는 파일이다.

layouts

프로젝트 전체 레이아웃에 해당하는 컴포넌트 넣는 폴더

pages

라우터에 의해 렌더링 되는 컴포넌트를 넣는 폴더

router

라우터 되는 정보들을 넣는 폴더

App.vue

root 컴포넌트

기본 layout 이용해서 main 페이지 바꿔보기


요게 Quasar 기본 페이지이다.
기본 페이지가 이미 웹 서비스 형태라 여기서 뚝딱뚝딱 하면 페이지 하나 금방 만들 듯 !


먼저 컴포넌트 분리부터 해 주었다.
헤더와 사이드 바는 계속 재활용해야 하기 때문에 분리해준다.
사실 사이드 바에 로그인 기능을 박아버리기로 했는데, 로그인 섹션도 나누어야 할까 고민을 많이 했다.


그리고 pages 에는 사용하는 화면들 넣어주기~


routes 에 꼭 꼭 등록해주는 것도 잊지말자!


이건 layout 파일인데.. 앞서 만들어둔 component 들을 가지고 조합하는 느낌이다.
사실 component 와 layout 의 차이를 잘 모르겠다.
그래서 따로 좀 알아보았다.

Component 와 Layout

Component

  • 어떤 기능을 하는 독립적인 요소
  • 주로 비즈니스 로직 담고 있다.
  • Button , input , TextField , Modal , Card 등..

Layout

  • Component 들을 정리하고 배치하는 개념
  • Component 안에 존재할 수도 있고, Layout 그 자체로 Component가 될 수도 있다.
  • Layout에는 비즈니스 로직이 포함되면 안된다.
  • Divider , FlexContainer, ContentWrapper 등..

그럼 고려할 사항은 ?


1. Component : 원재료 , Layout : 부품

ㅋㅋ 뭐랄까 원재료와 부품이 맞는 비유일지 모르겠지만, 내가 느끼는 바로는 그렇다..

Component 는 특수한 상황이 아니고선, Component 자체 포지션에 영향을 주는 코드 짜면 안된다..
(예를 들어 margin , padding등...)
포지셔닝은 Layout 에서 이루어져야 한다.
Component 는 원재료 , Layout 은 원재료로 만들어진 부품, Post 에서 부품들을 사용한다.

 

2. Component 는 재사용 될 수 있는걸 염두에 두자..

Component를 짤 땐 일회성 같은 코드도 재사용된다고 생각하고 짜도록 하자.
언제 어디서 어떻게 사용될지 모른당..

앗 쓰다보니... sidebar를 통째로 컴포넌트에 넣을게 아니라 레이아웃에 넣는게 맞는 것 같다..
그럼 컴포넌트에는 selectbox , login form , btn ... 이런게 하나하나 들어가야겠다..

하 그래도 100% 완성하고 깨닫는 것 보단 낫다.. 빨리 수정하도록 하자..

사실 오늘 정리한 내용들은 Quasar 라기 보단 vue 내용에 가까운..느낌이다.
Quasar 를 써보다가 또 유용한 기능이나 공부할 내용을 정리해야겠다.

아자아자🍀