Leon's Lab

Tab 기본적인 사용방법 q-tab과 q-tap-panels를 이용하면 우리가 일반적으로 보는 Tab 컨트롤을 만들수 있습니다.  Mails Lorem ipsum dolor sit amet consectetur adipisicing elit. consectetur adipisicing elit. consectetur adipisicing elit. Send Mail Alarms Lorem ipsum dolor sit amet consectetur adipisicing elit. ..

Padding, Margin Padding은 안쪽 여백, Margin은 바깥쪽 여백 B B  가로 크기 Quasar는 12그리드 시스템을 이용하기 때문에 가로의 크기를 12로 보고 상대적으로 조절해서 사용합니다.만일 숫자의 합이 12를 넘어가면 자동 줄바꿈이 발생합니다. 아래의 예제에서 col-5짜리 3개를 배치하면 12를 넘어가므로 마지막 버튼은 줄바꿈이 일어납니다.  col-3 col-3 col-3 col-5 col-5 col-5 가로 정렬 정렬은 Container에 "justify-[옵션]"속성을 이용하여 적용합니다. col-3 ..

Quasar 기본틀Quasar에서는 하나의 화면을 q-page로 관리합니다.따라서 quasar에서 제공하는 기능을 사용하려면 q-pqge 태그 안에 모든 컴포넌트들이 들어와야 합니다.코드에서 보자면 vue의 UI 태그인 안에 로 감싸기만 하면 됩니다. Push Me.   UI 컴포넌트 배치의 기본 원칙 Quasar는 FlexBox와 Grid 시스템을 이용한 배치를 제공하므로 해당 기능을 최대한 사용하여 배치를 해야합니다. Quasar는 Container와 Items라는 개념으로 FlexBox를 제공하는데, 간단히 말하면 UI 컴포넌트가 Items이고 이것들을 보기 좋게 그룹으로 묶은 것이 Container..

// myPage.vue// about 페이지로 이동하는 코드

개요 모든 코드에서 공통으로 사용하는 상수와 Enum, 전역변수를 어떻게 관리할지 알아봅시다. 상수 상수를 관리하는 js파일을 하나 만들고 항목을 export로 외부에 노출시켜 줍니다. // src/enums/constants.jsexport const APP_TITLE = 'My Quasar App'export const DEFAULT_LANGUAGE = 'en-US'// other constants...  선언된 상수를 import 하여 사용합니다.// src/components/MyComponent.vueimport { APP_TITLE, DEFAULT_LANGUAGE } from 'src/enums/constants'export default { // use constants here...}  ..

Router Navigation Guard 개요 Vue에서는 페이지 이동시 Router를 사용합니다. 그런데 사용자가 허가되지 않는 페이지로 이동하려고 할때, 이동에 대한 제어를 해야 하는데 이때 사용하는것이 Navigation Guard 입니다. 예를 들어 로그인을 하지 않은 사용자가 카드 결제 정보를 확인하는 페이지로 이동하기 위해서 강제로 URL을 입력했을때는 당연히 페이지 이동을 막아줘야 하는데, 이럴때 Navigation Guard를 사용하면 편하게 처리가 가능합니다. 사용방법 Router는 src/router/routes.js와 src/router/index.js을 이용하여 관리하는데, 일반적인 경로 설정은 routes.js에서 합니다. 그렇지만 Navigation Guard는 index.js..

Vue 컴포넌트의 생명 주기란? Vue 컴포넌트는 생성, 실행, 소멸에 대한 생명주기가 미리 정해져있고, 개발자는 해당 타이밍에 콜백함수를 호출하여 로직을 추가 할수 있다. onMounted() 콜백 컴포넌트가 마운트 된 후에 호출되는 함수로 가장 많이 사용되는 생명주기 콜백 함수 Vue 공식 문서에 나온 자세한 생명주기 설명 https://ko.vuejs.org/api/composition-api-lifecycle

개요 로그인 화면에서 로그인을 수행하면 메인 화면으로 이동하는데, 이 두개의 화면은 서로 다른 배치 구조를 가지고 있습니다.. 일반적으로 메인 화면은 Header, Footer, Menu, Content로 구성이 되고, 로그인 화면의 경우 필수 Content만 존재하고 나머지 구성 요소들이 없습니다. 따라서 이런 것을 어떻게 구성하는지 알아봅시다. Layout과 Page, Router 개념 일반적인 웹페이지의 화면은 Header, Footer, Menu, Content로 구성이 됩니다. 이런식으로 구성을 관리하는게 Layout입니다. 그런데 간단한 로그인 화면의 경우는 필수적으로 필요한 Content만 존재하고 나머지 구성 요소들이 없습니다. 이렇게 메인화면과 로그인 화면의 구성이 다를때 이를 구분해주는..

먼저 아래 글을 참조하여 Quasar 개발 환경을 설치하고 와야 합니다. https://dev-leon.tistory.com/57 Quasar에 Electron 환경 추가 $ cd $ quasar mode add electron 실행 $ quasar dev -m electron

관리 프로그램들 설치  Node.js 설치(v20.11.1)   $ npm install -g yarn (yarn v1.22.21 설치)  $ yarn --version (설치후 버전 확인)   Yarn 실행경로를 path 등록 : %LOCALAPPDATA%\yarn\bin을 path에 추가  $ yarn global add @quasar/cli (v2.3.0)Quasar 프로젝트 시작하기  $ yarn create quasar   설치시 질문이 많은데 대부분 Recommanded를 선택하면 되고 거의 마지막 즈음에 "Check the feautees ......" 이 나오는데, 이 때는 필수적으로 선택해야 할 것들이 있음(나중에 업그레이드로 설치하기가 간단치 않아서 미리 선택하는게 나음)  - Lint..