모듈, 프레임웍

개요 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 제품을 쉽게 구성 및 관리할 수 있도록 ..

개요 최신 Angular 9 프로젝트에서 Phaser 3을 통합하는 방법을 정리합니다. ※ 사용한 버전 정보 Angular Cli : 9.1.0 Phaser : 3.22.0 Angular 어플리케이션 생성 Angular CLI 를 사용하여 Angular Aapplication(이하, App)을 만듭니다. ng new phaser-angular-app 안내 문구에 따라 필요하다면 routing을 추가하고, 선호하는 style sheet 형식을 선택합니다. App의 생성이 완료되면 다음 명령을 사용하여 새로 생성된 App 폴더로 이동합니다. cd phaser-angular-app/ Phaser 파일 설치 및 복사 App 폴더에서 npm을 이용해 Phaser를 설치합니다. npm i phaser Phaser가..

개요 Phaser.js는 웹 기반의 비디오 게임을 만들 수 있는 JavaScript 게임 프레임워크입니다. Phaser를 이용하면 프레임워크에서 제공하는 게임 제작에 필요한 유용한 도구들을 활용할 수 있으므로 우리가 모든 것을 처음부터 만들 필요가 없습니다. 이번 포스트에서는 Phaser가 제공하는 기본 기능을 살펴보겠습니다. 기본 Phaser 프로젝트 설정 도형 그리기 사운드 및 음악 재생하기 입력장치와 상호작용 이를 활용하면 다음과 같은 퍼즐 게임을 간단히 만들 수 있습니다. (링크) ※ 참고 : 학습한 결과를 바탕으로 제작한 것으로 완벽한(완성된) 게임의 형태를 띠고 있지는 못합니다. 기본 Phaser 프로젝트 설정 Phaser의 기능을 확인하는데 목적이 있으므로 개발환경 구축을 최소화하기 위해 다..

개요 에셋(Assets) 이란 이미지, 사운드 효과, 텍스트를 포함하여 게임상에 삽입되는 모든 것을 의미합니다. Phaser는 게임 내에서 사용되는 애셋을 사용하기 전에 먼저 로딩하도록 구성되어 있습니다. 제작하는 게임의 규모가 커짐에 따라 사용되는 애셋의 양이 늘게 되며, 로딩에 소요되는 시간이 점점 늘어나게 됩니다. 게이머는 모든 작업이 완료되기를 기다려야 하는데, 이때 기다리는 게이머를 위하여 화면에 대기해야 하는 정도를 표시해주어야 합니다. 이러한 화면을 로딩 화면이라고 하며, 이번 포스트에서는 Phaser를 이용하여 로딩 화면을 만들어 보도록 하겠습니다. 사전 준비 Phaser 를 실행할 수 있는 환경을 구성해야 합니다. 자신의 PC에서 본 프로젝트를 수행한다면 Getting Start With..