SSAFY 2학기 프로젝트에서 CSS 프레임워크로 Quasar를 사용하기로 했다. Vue.js를 기반으로 한 프레임워크로, 팀원의 추천으로 사용하게 되었는데 UI가 깔끔하고 정말 많은 기능을 제공하고 있어 프로젝트에 빠르고 쉽게 적용할 수 있다는 생각이 든다.
Quasar 공식문서에서 가장 먼저 만날 수 있는 기능 설명은 위의 튜토리얼 영상이다. 40분이 조금 넘는 길이지만 웹사이트를 만드는 데 핵심적인 기능들을 잘 알려주고 있어 평가가 좋은 것 같다. 영상의 내용은 Quasar를 이용해 TODO앱을 만들고, 여러 브라우저와 기기에서 테스트해보는 것이다.
1. Creating the header
* 모든 영상 챕터가 이 글에 포함된 것은 아니다.
- Quasar의 HTML 요소들은 모두 'q-'로 시작한다.
- CSS class에도 고유한 문법이 있다. (예: q-pa-sm 는 사방에 작은 small 사이즈의 padding을 준다는 class명이다.) 현재까지는 기존 CSS 문법 앞에 'q'만 붙인 느낌이다.
2. Styling the header
- Layout Drawer는 햄버거 아이콘에 메뉴 목록이 들어가 있는 형태의 컴포넌트이다.
https://quasar.dev/layout/drawer#introduction
- <keep-alive> 태그로 <router-view />태그를 감싸면 페이지 이동 시에 변경 사항이 그대로 남아있게 된다.
- <q-page> 태그: view가 되는 컴포넌트들은 이 태그와 <q-page-container> 태그로 감싸줘야 한다.
2-1. CSS 요소
- breakpoint: 모바일 모드로 전환되는 가로 pixel 기준
3. Setting up the nav bar
https://router.vuejs.org/guide/essentials/nested-routes.html
https://quasar.dev/layout/routing-with-layouts-and-pages#defining-routes
- Vue의 nested routes(전체 view 안에서 router link가 전환되는 방식) 을 Quasar에서도 구현할 수 있다.
<!-- /src/layouts/User.vue -->
<template>
<q-layout>
...
<!-- this is where the Pages are injected -->
<q-page-container>
<router-view></router-view>
</q-page-container>
...
</q-layout>
</template>
<!-- /src/pages/Profile.vue or Posts.vue -->
<template>
<q-page>
...page content...
</q-page>
</template>
<q-list><q-item></q-list>: 리스트와 리스트 아이템의 역할을 한다.
https://quasar.dev/vue-components/list-and-list-items#introduction
- 체크박스, 좌측 토글 박스 등 다양한 예시들이 있다.
- <q-item> 태그에 'clickable' 옵션을 줘야 클릭 가능하다.
4. confirm dialog
- Quasar의 몇몇 기능들은 plugin 형태로 개별적으로 설치하여 사용해야 한다. 여기서는 dialog modal 창이 예시로 나온다.
https://quasar.dev/quasar-plugins/dialog#dialog-api
Dialog Plugin
1. quasar.config.js 파일에 필요한 플러그인을 설치한다.
2. 함수를 작성하고 클릭 이벤트와 연결한다.
3. 함수를 아래 예시와 같이 작성한다.
'Programming > Vue' 카테고리의 다른 글
[Nuxt.js] Vuex state가 변경되어도 자동으로 update되지 않는 layout 컴포넌트 업데이트시키기 (0) | 2023.04.25 |
---|---|
[Vue3]Quasar와 VeeValidate 함께 쓰기(공식 문서) (0) | 2022.07.29 |
[Vue3] Pinia 관련 자료 (0) | 2022.07.25 |
[Vue3] Vue3 관련 자료들 (0) | 2022.07.25 |
[Vue 3 + Quasar 2.0] 프론트엔드 개발자에게 필수! ESLint + Prettier 사용하기 (0) | 2022.07.18 |
댓글