JavaScript

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

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

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

개요 함께 제공되는 CLI 도구를 통해 간편히 Progressive Web App(이하 PWA)를 만들 수 있는 Angular와 달리 별도의 라이브러리 및 프레임워크를 사용하지 않은 채 구글의 개발자 가이드에 따라 JavaScript를 이용하여 PWA를 개발하였습니다. PWA의 핵심 기능 중 하나인 캐시(Cache)를 적용한 후, 서버에서 수정한 내용이 Angular에서와 달리 브라우저의 새로고침 버튼을 아무리 눌러도 새로운 내용으로 반영되지 않아 이를 해결하기 위하여 관련 내용을 학습하였으며 이를 정리하였습니다. 서비스워커와 캐시 PWA에 서비스워커가 구성되어 있는 경우, 서비스 워커는 레이지 로딩(lazy loading)이나 프리패치(prefetching) 같은 방식을 이용하여 정적 파일을 캐싱합니다..

개요 그동안 블로그를 운영하며 별 고민 없이 콘텐츠를 무단으로 복사할 수 없도록 티스토리에서 제공하는 플러그인을 사용하여 마우스의 사용을 막아 놓았습니다. 하지만 가만히 생각해보니 제 블로그에 기록해 놓은 많은 코드 부분(이하 코드 블록)의 경우 사용하기 위해서는 Copy & Paste 작업이 필요한 것을 깨닫게 되었습니다. 최근 이를 위하여 코드블록에 대해서 마우스를 이용하여 선택을 할 수 있도록 변경하였습니다. 이번에는 여기에 더하여 코드블록의 오른쪽 상단에 복사를 할 수 있는 버튼을 추가하여 사용자가 직접 드래그 등의 추가 조작 없이 편리하게 해당 콘텐츠를 이용할 수 있도록 하는 기능을 추가하였습니다. 이번 포스트에서는 티스토리의 스킨을 편집하여 코드블록에 복사 버튼을 추가한 내용을 정리하겠습니다...

모듈로 연산 (Modulo Operation)모듈로 연산(Modulo operation)은 두 수가 주어졌을 때, 하나의 수로 다른 하나를 나눈 나머지를 구하는 것입니다.이를 기호로 쓰면 A mod B = R 가 됩니다.많은 프로그래밍 언어에는 자체적인 mod 연산자가 있으며 보통 % 기호로 표시합니다. 하지만 음수에 대해 이 연산자를 사용할 경우 JavaScript와 같은 일부 언어는 음수 결과값을 표시합니다.즉, 다음과 같은 결과를 얻게 됩니다.-5 % 3 = -2하지만 나머지는 정의에 따라 0보다 크거나 같고 나누는 값보다 작아야 하므로 그 결과는 1이 되어야 할 것입니다.-5 = 3 * (-2) + 1모듈로연산(%)의 결과는 한정된 범위에서 시계처럼 반복되기 때문에 배열 Index를 증가/감소시킬..

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

본 포스트에서는 간단히 Phaser 3 의 기초를 학습하기 위하여 벽돌깨기 게임을 만들어 보도록 하겠습니다. 기본이 되는 내용은 2D breakout game using Phaser 을 바탕으로 진행하였으며, 원본의 코드는 Phaser 2 (CE) 버전을 기반으로 하고 있어, 여기서는 Phaser 3 에서 동작할 수 있도록 소스코드를 수정하였습니다. 사전작업 Phaser 를 사용할 수 있도록 환경을 구성합니다. 혹은 다음의 Stackblitz 링크에서 시작 합니다. 초기환경 링크 프레임 워크 초기화 게임의 기능을 삽입하기 전에 우선 전체적인 구조를 잡아주어야 합니다. Phaser 는 장면(scene) 단위로 게임을 관리합니다. 때문에 우선 장면(scene) 클래스를 생성한 후 이를 Angular 에 추가..