모듈, 프레임웍

개요 App의 성격을 나타내는 테마 색상을 변경하고자 합니다. 절차 Quasar는 Theme Builder 도구를 제공합니다. // quasar.config.js return { framework: { config: { brand: { primary: '#1976d2', secondary: '#26A69A', accent: '#9C27B0', dark: '#1d1d1d', 'dark-page': '#121212', positive: '#21BA45', negative: '#C10015', info: '#31CCEC', warning: '#F2C037' } } } ..

개요 Quasar 프로젝트의 CLI 도구를 이용하면 .apk의 빌드가 가능합니다. 하지만 마켓에 출시할 수 있는 .aab파일로 빌드하기 위해서는 Android Studio를 통해 직접 빌드해야 합니다. 그래서 Android Studio를 설치할 수 없는 CLI 환경에서 App을 빌드하고 배포해보는 방법이 있는지 알아보았습니다. 준비 ※ 참고 : Ubuntu 18.04에서 진행하였습니다. OpenJDK와 Gradle 설치 안드로이드 어플의 개발을 위해서는 JDK와 Gradle이 필요합니다. 다음 명령을 사용하여 최신 버전의 JDK와 Gradle을 설치합니다. sudo apt install openjdk-17-jdk-headless gradle export JAVA_HOME=/usr/lib/jvm/java-..

개요 프로젝트에서 사용되는 supabase의 환경변수를 중앙에서 관리하고 손쉽게 변경할 수 있도록 하기 위해서 quasar 프로젝트에서 환경설정 파일을 사용하도록 하겠습니다. 본문 프로젝트의 루트 폴더에 quasr.config.js 파일에 원하는 환경설정 값을 추가합니다. build: { env: { SUPABASE_URL: 'URL', SUPABASE_KEY: 'KEY' }, } 소스코드에서 사용할 경우, 다음과 같이 접근이 가능합니다. console.log(process.env.SUPABASE_URL) 참고 Handling process.env

개요 Quasar는 국제화(i18n)를 지원합니다. 이를 이용해 간단히 ko-KR로 설정하면 컴포넌트의 주요 내용들이 한글로 표시됩니다. 예를 들어 DatePicker 컴포넌트의 경우, 요일이 한글로 표시됩니다. 하지만 Vuetify와 달리 Quasar 프레임워크의 TimePicker 컴포넌트는 국제화를 설정하여도 오전, 오후로 표기되었으면 하는 부분이 AM, PM 으로 표시됩니다. 본 글에서는 이와 관련된 내용을 직접 수정하고 패치로 만들어 프로젝트에 적용하는 방법을 기록하겠습니다. 본문 코드 수정 프로젝트에 적용한 node_module을 직접 수정하였습니다. node_module/quasar/src/components/time/QTime.js QTime.js 파일의 'AM' 과 '..

개요 npm을 통한 패키지 설치 중 발생한 오류와 대응 방법을 기록합니다. 본문 오류 1. - gyp ERR! stack Error: self signed certificate in certificate chain $ npm install gyp ERR! configure error gyp ERR! stack Error: self signed certificate in certificate chain gyp ERR! stack at TLSSocket.onConnectSecure (_tls_wrap.js:1514:34) gyp ERR! stack at TLSSocket.emit (events.js:375:28) gyp ERR! stack at TLSSocket._finishInit (_tls_wrap.js..

개요 Firebase Cloud Function 은 무료로 사용할 수 있는 가격정책(Spark)을 제공합니다. 물론 현재도 동일한 정책을 가지고 있습니다. 하지만 21년 2월 15일 이후로는 Function을 사용하려면 해당 프로젝트를 무료가 아닌 종량제(Blaze)로 변경해야 하며 더불어 무료사용량 초과시 결재될 카드정보등을 입력해주어야 합니다. 작년에 개발하여 배포하였던 "장애인/중소기업 특공 알리미" 어플도 이에 따라서 프로젝트를 변경해주었습니다. 크게 수익이 있는 것은 아니지만 개인적으로 사용하려고 만들었던 것이기 때문에 사용자가 적으니 비용이 나갈 것은 없다고 판단하여 진행을 해보았습니다. 절차 해당 프로젝트를 Blaze 요금제로 변경합니다. CLI 버전을 8.1.0 이상으로 업그레이드 합니다...

제가 학습 목적으로 만든 특별공급 알리미는, 신규 사용자에게 신뢰감을 주기 위해 현재 알림 구독자의 수를 화면에 표시하고 있습니다. 구독자의 수는 Cloud Messaging 서비스의 Token 값을 Cloud Firestore에 저장한 후, 필요시 저장된 Token의 개수를 화면에 표시합니다. 하지만 Firebase Cloud Firestore는 Collection에 포함된 문서(Doc)의 갯수를 제공하는 기능이 따로 없어, 다음과 같이 모든 저장된 Token을 읽어온 후, 여기에서 크기 값만 제공하는 형태로 구현해 사용하였습니다. Cloud Function: db.collection('...').get().then(snap => { res.status(200).send({length: ..

개요 이전 포스트에서 작성하였던 것과 같이 notification과 data가 함께 있는 Push 메시지를 수신할 경우 앱이 Background 상태일 때, SDK 만 사용할 경우 data 부분이 앱으로 전달되지 않는 문제가 있었습니다. 웹앱(PWA)이 백그라운드 상태일 때, 푸시 메시지에 포함된 data 페이로드가 앱으로 전달되어도 처리할 수 있는 핸들러를 SDK에서 제공하지 않았습니다. 이전 포스트에서는 push 이벤트 핸들러를 등록하여 임의로 해결하였으나 SDK의 버전이 갱신되며 이 부분을 SDK 상에서 수정해주어 사용법을 소개합니다. notification + data 메시지 수신하기 Firebase JavaScript SDK 7.18.0 버전을 출시하며 Firebase Cloud Messagin..