분류 전체보기

개요 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 파이어베이스 프로젝트의 ‘시작하기’ 마법사를 완료 호스팅용 도메인..

소이전자 기준 샌디스크의 Micro SD 카드의 정식 유통업체는 소이전자 이외에도 여러 곳이 있습니다. 소이전자에서 수입한 제품 ('SOI XX' 홀로그램 스티커로 확인)만 해당 업체에서 AS(불량제품 교환)가 가능합니다. 소이전자(02-3272-3737)에 연락하여 불량 증상 상담. (아마도 소이전자는 수입업체이기에) 요청한 제품의 실제 불량 여부 확인 및 수리 불가하다는 안내 받고, 동일 제품으로 교환 결정. 불량 Micro SD 카드 택배 발송. 동일 Micro SD 카드 택배 수령. (총 4일 소요) ※ 택배는 한진택배(1588-0011)를 이용 (착불로 발송, 소이전자와 계약되어 있어 상대적으로 저렴함, 왕복 5000원) ※ 택배에 불량 Micro SD 카드와 이름, 연락처, 주소, 구입처, 불..

개요 최신 웹 사이트에서 JavaScript(이하 스크립트)는 종종 HTML보다 "무거워"집니다. 다운로드 크기가 크고 처리 시간도 더 깁니다. 따라서 스크립트를 HTML 페이지에 불러올 때는 페이지의 로딩 속도에 악영향을 주지 않도록 주의해야 합니다. 외부 스크립트는 다음과 같이 HTML 페이지에 삽입합니다. 스크립트를 HTML 페이지의 어디에서 어떻게 불러오는지에 따라 로딩시간은 영향을 받게 됩니다. HTML 파서(parser)가 이 부분을 만나면 DOM을 생성하는 작업을 멈추고 스크립트 파일(script.js)을 다운로드해 실행하는 동작이 먼저 수행됩니다. 일단 이것을 처리하는 것이 완료되어야 비로소 나머지 HTML 페이지에 대한 parsing 작업이 재개됩니다. 쉽게 예상할 수 있듯이 이런 동작은..

개요 만약 파이어베이스 호스팅 서비스 외에 추가로 파이어베이스가 제공하는 인증, 실시간 데이터 베이스, 메시징(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 제품을 쉽게 구성 및 관리할 수 있도록 ..

다음은 WSL(Linux용 Windows 하위 시스템)을 사용하여 Node.js 개발 환경을 설치하는 방법을 안내하는 단계별 가이드입니다. WSL 설치 ※ 저는 아직 WSL2가 아닌 기존 버전인 WSL1 을 사용하고 있습니다. 추후 WSL2 로 갱신하게 되면 이에 대한 내용도 보충될 것입니다. 이전에 작성한 글 리눅스 어플리케이션 개발을 위한 WSL 설치 및 VS Code 연동 의 WSL 설치 문단을 참고하여 WSL 를 설치합니다. nvm, node.js 및 npm 설치 Node.js를 설치하는 여러 가지 방법이 있습니다. 버전이 매우 빠르게 바뀌므로 버전 관리자를 사용하는 것이 좋습니다. 작업하는 여러 프로젝트의 요구 사항에 따라 여러 버전 간에 전환해야 하는 상황이 많을 것입니다. 흔히 nvm으로 불..