미리 보는 완성본 메타버스 프로젝트에 투입되면서 Phaser라는 게임 엔진을 사용하게 됐습니다. 하지만 저는 한 번도 사용해 본 적이 없어서...🥴 일단 공부 개념으로 제 마음 가는 대로 만들어 보았습니다. [Phaser3] Survival Game의 게시글은 이전에 만들었던 게임을 다시 한번 정리하는 회고록입니다. 완성본은 아래와 같습니다. 직접 꾸민 맵이 있고, 그 안에 캐릭터가 있고, 캐릭터는 맵 안에서 움직이며, 나무나 표지판, 돌, 빙판 등의 충돌체를 만나면 지나갈 수 없는 간단한 게임입니다. 개발 툴 선정 게임 엔진은 Phaser를 사용했고, 게임 Map은 Tiled Map Editor를 사용했습니다. Phaser란? Phaser는 데스크톱 및 모바일용 HTML5 게임을 만드는 데 사용되는 2..
HTMLButtonElement에 style 적용하는 방법 간단하게 HTMLButtonElement를 설명하자면, HTMLButtonElement는 인터페이스로 요소를 조작하기 위한 속성 및 메서드를 제공합니다. (정규 HTMLElement 인터페이스 외에도 상속을 통해 사용할 수 있습니다.) Style 적용하기 일단 button을 만들어줍니다. const audioButton = document.createElement('button') 이후 버튼명.style.CSS속성 = '문자열'로 스타일을 적용합니다. // style 적용하기 audioButton.style.flex = 'auto' audioButton.style.display = 'flex' audioButton.style.alignItems ..
리액트 Component에서 Font Awesome 사용하기 Font Awesome 패키지를 먼저 설치합니다. npm i @fortawesome/fontawesome-svg-core Font Awesome은 무료 버전 3가지를 사용할 수 있고, 3개 중 사용할 목적에 따라 설치합니다. solid npm i @fortawesome/free-solid-svg-icons regular npm i @fortawesome/free-regular-svg-icons brands 브랜드 로고를 사용하려면 따로 설치해줘야 합니다. npm i @fortawesome/free-brands-svg-icons React에서 사용 가능하도록 npm i @fortawesome/react-fontawesome 설치한 Font Awe..
서버에서 타입스크립트 실행하기 타입스크립트 코드를 NodeJS에서 실행하려면 tsconfig.json의 module 플래그를 commonjs로 설정하고, 코드를 ES2016 자바스크립트로 컴파일합니다. 그러면 ES2016의 import를 require로, export를 module.exports로 변환하여 NodeJS에서 추가 번들 없이 실행할 수 있도록 컴파일해 줍니다. 소스 맵을 사용 한다면 소스 맵도 NodeJS 프로세스에 제공해야 합니다. NPM에서 source-map-support 패키지를 구한 다음 설정 안내를 따릅니다. PM2, Winston, Sentry 같은 대부분의 프로세스 모니터링, 로깅, 에러 리포트 도구는 소스 맵을 기본으로 지원합니다. https://www.npmjs.com/pa..
프로미스로 정상 회복하기 먼저 Promise로 파일에 내용을 추가하고 결과를 다시 읽어오는 예를 살펴보겠습니다. function appendReadPromise(path: string, data: string): Promise{ return appendReadPromise(path, data) .then(()=>readPromise(path)) .catch(error=>console.error(error)) } 이 코드는 원하는 일을 완수하는 데 필요한 비동기 작업들을 직관적인 체인(chain) 하나로 엮은 결과, 콜백 피라미드는 전혀 등장하지 않는다는 점에 주목합니다. 한 작업이 성공하면 다른 작업을 실행하며, 그중 하나가 실패하면 catch 절로 직행합니다. 같은 기능을 콜백으로 구현하려면 아래처럼 ..
이벤트 방출기 이벤트 방출기는 채널로 이벤트를 방출하고 채널에서 발생하는 이벤트를 리스닝하는 API를 제공합니다. interface Emitter { // 이벤트 방출 emit(channel: string, value: unknown): void // 이벤트가 방출되었을 때 어떤 작업을 수행 on(channel: string, f:(value: unknown)=>void): void } 이벤트 방출기는 JavaScript에서 자주 사용하는 디자인 패턴입니다. DOM 이벤트, 제이쿼리 이벤트, NodeJS의 EventEmitter 등을 사용하면서 이미 이벤트 방출기를 사용해 본 적 있으신 분도 계실 겁니다. 대부분의 언어에서 이런 형태의 이벤트 방출기는 안전하지 않습니다. value의 타입이 특정 chan..
타입 안전 API 어떤 프론트엔드/백엔드 프레임워크를 선택했든 클라이언트와 서버, 서버와 서버, 클라이언트 기기 간의 통신이 안전하게 이루어지기를 바랄 것입니다. 안전한 통신과 관련해 몇 가지 도구와 표준이 서로 경쟁하는 중입니다. 이들이 무엇이고 어떻게 동작하는지 살펴보기 전에 직접 해결책을 구현할 수 있는지, 그리고 직접 해결한다면 어떤 단점이 있는지 살펴보겠습니다. 예를 들어 현재의 클라이언트와 서버는 100% 타입 안전하지만 언젠가는 HTTP, TCP, 소켓 기반 프로토콜처럼 타입을 사용하지 않는 네트워크 프로토콜로 통신해야 할 수도 있을 것입니다. 그렇다면 어떻게 해야 그 상황에서도 타입 안전성을 유지할 수 있을까요? 타입 안전성을 제공하는 프로토콜을 직접 개발하는 방법이 있습니다. 아래는 직접..
TSX = JSX + TypeScript JSX 파일의 확장자는 보통 .jsx이고 JSX를 포함하는 TypeScript 파일의 확장자는 .tsx입니다. TSX는 TypeScript가 JavaScript에 제공하는 것과 같은 기능을 제공합니다. 즉, 컴파일 타임 안전성은 물론 실수를 줄이면서 더 생산적인 코드를 만들 수 있도록 도와줍니다. 프로젝트가 TSX를 지원하도록 하려면 tsconfig.json에 아래 내용을 추가하면 됩니다. JSX 지시어는 세 가지 모드를 지원합니다. react JSX 지시문(pragma)에 따라 JSX를 .js 파일로 컴파일합니다. 기본값은 React.createElement입니다. react-native 컴파일하지 않고 JSX를 보존하며, .js 확장자 파일을 생성합니다. pr..
리액트 리액트(React)는 오늘날 가장 인기 있는 프론트엔드 프레임워크 중 하나로, 타입 안정성과 관련해선 탁월한 선택이라 할 수 있습니다. 리액트 응용 프로그램의 기본 빌딩 블록인 리액트 컴포넌트는 TypeScript로 정의되고 소비되므로 안전합니다. 이는 다른 프론트엔드 프레임워크에선 찾아보기 힘든 특징으로, 컴포넌트 정의와 소비자 모두 타입을 검사함을 의미합니다. 덕분에 타입을 이용하여 "이 컴포넌트는 사용자 ID와 색을 인수로 받는다" 또는 "이 컴포넌트는 리스트 항목만을 자식으로 가질 수 있다"라고 표현할 수 있습니다. 타입으로 표현한 이러한 제한을 TypeScript가 강제하며 사용자의 컴포넌트가 이에 부합하는지 확인하는 것입니다. 그중에서도 컴포넌트 정의와 소비자에 제공하는 안전성은 독보적..
