Leon's Lab

설치 Quasar 프로젝트 시작할때 옵션에서 골라서 설치하는게 가장 편합니다. 사용 방법 (hello를 다국어로 준비했을 경우) 1. Template :  {{ $t('hello') }}  2. HTML tag 속성:  3. Vue import { useI18n } from 'vue-i18n'const {t} = useI18n();t('hello')   참고 : https://quasar.dev/options/app-internationalization#introduction

연계 컨텐츠1. Axios를 이용한 통신 :  https://dev-leon.tistory.com/822. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83 구조화가 필요한 이유1. 통신 결과를 Interface로 선언하여, 통신 결과를 사용하는 개발자는 ts 모듈이 약속된 타입을 모두 알려줍니다.2. 요청과 응답을 한곳에서 관리하므로, 백엔드 API가 변경되더라도 프런트엔드의 한 곳에서만 수정해주면 전체에 반영됩니다.즉 개발자들이 호출한 곳을 일일이 찾아가며 변경할 필요가 없어 집니다. 통신의 반환값의 타입을 Interface로 지정하는 방법ts에서는 반환값을 지정할수 있는데, 함수를 하나 만들어서 백엔드와 약속된 형식이 있다면 해당 형식을 Promise..

연계 컨텐츠1. Axios를 이용한 통신 :  https://dev-leon.tistory.com/822. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83 Axios란프런트엔드에서 Promise 방식으로 HTTP 통신을 수행하는 라이브러리입니다.프런트엔드에서 가장 많이 사용하는 라이브러리입니다. 설치방법  npm 방식    npm install axios  yarn 방식     yarn add axios 사용 방법  api.ts 파일에 Axois 객체 생성하고 intercepters까지 적용import axios, { Axios } from 'axios';const api: Axios = axios.create({ baseURL: 'your-backen..

환경 변수가 필요한 이유  개발과 테스트 배포, 실제 서비스 배포에서 각각 다른 설정값을 사용해야 할 경우에 현재 구동되는 환경을 알아야 하는데 이때 사용하는 방법이 환경 변수입니다.  Quasar에 환경 변수 알아보기  process.env 변수안에 현재 환경에 대한 값들이 들어 있습니다.  개발시 구동할때, env 변수의 값을 보여줍니다. Quasar에 환경 변수 사용하는 법  환경변수로 구분해야 할 것은 개발과 테스트 배포, 실서비스 배포 이렇게 3가지 인데, 위에 나온 변수들을 이용하여 구분하여 보겠습니다.   각 환경에 맞는 명령어를 사용하여 서비스 실행    개발 모드  : $ quasar dev    테스트 배포 모드 : $ quasar build -d (--debug)     제품 배포  ..

Quasar Application 생명주기 웹프로그램에 생명주기가 있을까 싶지만, 의외로 몇가지 사항들이 존재합니다. 일단 웹사이트에 접속할때와 웹사이트에서 종료할때가 있습니다. 그리고 새로고침이라는 웹사이트만의 전용 상태가 존재합니다.  다행이 웹의 생명주기는 단순합니다.  [브라우저 시작] => [App 초기화] => [새로고침] => [App 초기화] => [브라우저 종료] 이렇게 됩니다.그리고 [App 초기화] 상태에서는 사용자가 작성한 Boot 부터 다시 수행됩니다. 따라서 [App 초기화] 상태만 봐서는 브라우저가 시작한것인지 새로고침 한것인지 판단이 어렵습니다.  저장소별 생명주기 웹프로그램은 크게 3가지 저장소가 존재합니다. 프로그램 메모리, Session Storage, Local Sto..

Quasar 전용 SessionStorage, LocalStorage의 장점 데이터 직렬화 없이 바로 사용가능하다.// 일반적인 storage 사용시에는 직렬화해서 데이터를 입출력 해야함.// 따라서 JSON.stringify, JSON.parse 가 항상 따라다님.const user = { name: 'John', age: 30 };localStorage.setItem('user', JSON.stringify(user));const storedUser = JSON.parse(localStorage.getItem('user'));console.log(storedUser.name); // John// 반면에 $q.localStorage는 직렬화 없이 바로 입출력이 가능함.const user = { name..

화면 중앙 정렬 로그인 화면은 화면의 가운데에 입력을 받게 만드는데, 이때 필요한게 화면 중앙정렬입니다. 중앙정렬은 q-page 태그에 flex flex-center 속성을 주면 가능합니다. Click Me!  이미지를 백그라운드에 배치하기 사이트를 예쁘게 꾸미려고 백그라운드에 이미지를 넣는데, 일반적인 Grid 시스템으로는 어렵습니다.  여기서는 absolute-full flex flex-center 구문을 이용하여 처리해 보겠습니다.  Echo Test   Gutter-Col와 Col-Size 함께..

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