모듈, 프레임웍/Firebase

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

개요 Firebase FCM - 클라이언트(JavaScript) 설정에서 웹앱(PWA)에 Firebase에서 요구하는 특별한 서비스워커인 firebase-messaging-sw.js를 추가하였습니다. 그 후, 파이어베이스 알림 작성기를 이용해 푸시 메시지를 발송하여 웹앱(PWA)을 실행한 기기에서 해당 푸시 메시지가 도착하는 것을 PC 및 스마트폰에서 확인하였습니다. 웹앱(PWA)이 백그라운드 상태일 때 알림 유형의 푸시 메시지는 firebase-messaging-sw.js에서 초기화한 Firebase SDK에서 수신 및 표시를 자동으로 해주기 때문에 그저 SDK 만 초기화하는 코드로 충분히 기능이 동작했습니다. 이번 포스트는 알림 유형의 푸시 메시지 이외에 FCM에서 지원하는 다른 종류의 푸시 메시지도..

사전작업 Firebase 호스팅 사용 파이어베이스(Firebase) 앱 등록 ※ 이하 웹앱(PWA)은 사전작업을 통해 생성한 프로젝트를 지칭합니다. Firebase SDK 설정 메시징 서비스를 사용하기 위하여 Firebase SDK를 웹앱(PWA)에 추가합니다. 여러 가지 방법이 있지만 Firebase 호스팅 사용 포스팅에서 생성한 프로젝트를 바탕으로 한다면, 태그 사이에 아래 내용(인증, 데이터베이스, 메시징, 스토리지 서비스 사용을 위한 SDK 설정)이 이미 삽입되어 있습니다. ▲ index.html ※ 버전(7.16.0)을 의미하는 숫자는 프로젝트 생성 시의 최신 버전 값으로 진행 시점에 따라 차이가 있습니다. firebase-messaging-sw.js 생성 기본적으로 메시징 서비스가 동작하려면 ..

개요 Firebase 호스팅을 사용하면 기본적으로 project-name.firebaase.com과 project-name.web-app.com을 제공해 줍니다. 만약 사용자가 별도의 도메인 이름을 사용하고자 한다면 Firebase 호스팅은 Let’s Encrypt로 서명만 SSL 인증서를 자동으로 제공해 줍니다. 저는 Firebase 호스팅의 커스텀 도메인 연결방법을 확인하기 위해 Freenom.com에서 최대 1년 사용할 수 있는 무료 도메인을 신청하여, Firebase 호스팅에 연결해 보았습니다. 사전작업 도메인 신청 Freenom.com에서 제공하는 무료 도메인을 신청하였습니다. (aptstar.tk) Firebase Hosting 파이어베이스 프로젝트의 ‘시작하기’ 마법사를 완료 호스팅용 도메인..

개요 만약 파이어베이스 호스팅 서비스 외에 추가로 파이어베이스가 제공하는 인증, 실시간 데이터 베이스, 메시징(Firebase Cloud Messaging) 등의 Back-End 서비스를 사용하려면 appId를 비롯한 apiKey를 발급 받아야 합니다. 파이어베이스는 앱 등록 메뉴에서 해당 기능을 제공합니다. 웹앱 등록 Firebase Console의 프로젝트 개요 페이지로 이동하여 앞서 생성한 프로젝트(FCM-PUSH-PWA)를 선택합니다. 웹 아이콘()을 클릭하여 설정 워크플로를 시작합니다. 앱의 닉네임을 입력합니다. 닉네임은 편의상 지정하는 내부용 식별자이며 Firebase Console에서 본인만 볼 수 있습니다. "또한 이 앱의 Firebase 호스팅을 설정하세요." 항목을 체크합니다. (프로젝..

사전 준비 node.js를 설치합니다. (참고) Firebase 프로젝트 생성 Firebase 호스팅을 사용하려면 먼저 Firebase 프로젝트를 만들어야 합니다. 다음과 같이 프로젝트를 생성합니다. Firebase에 가입합니다. (무료 서비스(Spark 요금제)로 본 포스팅의 내용을 수행할 수 있습니다.) Firebase Console에서 프로젝트 추가를 클릭한 후 프로젝트 이름을 선택하거나 입력합니다. Firebase Console에서 나머지 설정 단계를 따른 다음 프로젝트 만들기(또는 기존 Google 프로젝트를 사용 중인 경우 Firebase 추가)를 클릭합니다. Firebase CLI 설치 Firebase는 Firebase 호스팅을 비롯한 Firebase 제품을 쉽게 구성 및 관리할 수 있도록 ..