Leon's Lab

개요 모든 코드에서 공통으로 사용하는 상수와 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..

개요 로그인 화면에서 로그인을 수행하면 메인 화면으로 이동하는데, 이 두개의 화면은 서로 다른 배치 구조를 가지고 있습니다.. 일반적으로 메인 화면은 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..