[Quasar 공식문서 뽀개기] 30분 영상 튜토리얼 분석하기

 

 

Video Tutorials | Quasar Framework

 

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

Layout Drawer | Quasar Framework

- <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

Nested Routes | Vue Router

https://quasar.dev/layout/routing-with-layouts-and-pages#defining-routes

Routing with Layouts and Pages | Quasar Framework

- 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

List and List Items | Quasar Framework

- 체크박스, 좌측 토글 박스 등 다양한 예시들이 있다.

- <q-item> 태그에 'clickable' 옵션을 줘야 클릭 가능하다.

 

 

4. confirm dialog

- Quasar의 몇몇 기능들은 plugin 형태로 개별적으로 설치하여 사용해야 한다. 여기서는 dialog modal 창이 예시로 나온다.

https://quasar.dev/quasar-plugins/dialog#dialog-api

Dialog Plugin | Quasar Framework

Dialog Plugin

1. quasar.config.js 파일에 필요한 플러그인을 설치한다.

2. 함수를 작성하고 클릭 이벤트와 연결한다.

3. 함수를 아래 예시와 같이 작성한다.

https://codepen.io/pen?&editors=101 

Create a New Pen