TypeScript

개요 Axios를 이용하여 REST API 를 사용할 경우, IDE 의 자동완성 기능의 도움을 받고자 Axios 로 수신한 응답 데이터의 Type 을 지정하고 싶습니다. 본문 Axios 에는 사전에 정의된 응답에 대한 Type 이 다음과 같이 정의가 되어 있습니다. export interface AxiosResponse { data: T; status: number; statusText: string; headers: Record; config: AxiosRequestConfig; request?: any; } 따라서 아래와 같이 설정을 하면 응답에 대해 형식을 지정할 수 있습니다. 예시코드 (우편번호 응답) interface resEPostAPI { NewAddressListResponse : { cm..

개요 에셋(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 에 추가..

개요 Angular 튜토리얼에서는 프로젝트에서 사용하는 외부 라이브러리를 npm 을 이용하여 프로젝트 내에 설치 후, import 를 통하여 해당 모듈을 사용합니다.하지만 프로젝트에서 사용하는 외부 라이브러리가 CDN(Content Delivery Network) 으로 제공되는 경우에 대한 예시 및 방법이 확인되지 않아 인터넷을 검색하여 그 결과를 정리하여 놓습니다. 본문 우선 사용하고자 하는 js 파일을 src/index.html 파일에 포합시킵니다.예를 들어 카카오 로그인 기능을 사용하기 위하여 SDK 라이브러리를 불러오는 것은 다음과 같습니다.▼ /src/index.html loading 스크립트를 컴포넌트에서 사용할 때, Typescript 에서 컴파일 에러가 발생하는 것을 방지하기 위해 스크립트..