타입스크립트에서 StringUtils.hasText를 어떻게 만들까구현하며 알게된 타입스크립트 문법들function hasText (str?: string | null): boolean { return !!str?.trim()}주요 문법Optional Chaining(?.)str이 null 또는 undefined일 경우 바로 undefined를 반환null 또는 undefined이 아니면 trim()을 실행해 양 끝의 공백을 제거한 문자열 반환**!!**부정 연산자 !를 두 번 사용Optional Chaining의 결과로 나온 null, undefined를 boolean타입인 false로 변환trim()으로 만들어진 문자열은빈 문자열("")이라면 false문자를 가진 문자열이면 true기타위에서 구..

vue-core의 코드 분석 중 inject()의 구현부에서 isFunction()이라는 함수를 보게되었다. '함수여부를 어떻게 판별할까?'하고 정의를 찾아보니 아래와 같은 코드가 있었다.export const isFunction = (val: unknown): val is Function => typeof val === 'function'내가 헷갈렸던 부분은 반환 타입으로 주어진 val is Function이었다. 파이썬에서만 봤지 타입스크립트에서 is를 사용하는걸 처음봐서 검색해보니 User Defined Type Guards라는 개념을 찾을 수 있었다.User Defined Type Guards란 특정 조건을 만족하는지 확인하여 컴파일러에게 해당 조건이 참일 경우 변수나 객체의 타입을 안전하게 판..

플러그인을 통해 전역적으로 필요한 기능을 추가할 수 있다.먼저 코드를 작성한다.​x// MyPlugin.jsimport Vue from 'vue'​export const MyPlugin = { install (Vue) { Vue.prototype.$myMethod = function() { console.log("method1"); } }}​Vue.use(MyPlugin)프로젝트 생성후 main.js의 vue 인스턴스에 플러그인을 추가한다.xxxxxxxxxximport Vue from 'vue'import App from './App.vue'import MyPlugin from "@/plugins/MyPlugin";​Vue.config.productionTip = false​new Vue({ MyPlug..

Vue 인스턴스는 Vue.js를 시작할 때 사용하는 객체를 의미하며 어플리케이션의 시작점이라고 할 수 있다. Vue 어플리케이션은 Vue함수로 인스턴스를 생성하는 것부터 시작한다.var vm = new Vue({ // options});​//또는new Vue({ // options});옵션에는 아래와 같은 속성들이 전달된다.el, template, data, props, computed, methods, watch위 속성들은 컴포넌트와 다르지 않다.여기서는 el 프로퍼티를 볼 수 있는데 이는 HTML 문서에 마운트될 HTML 엘리먼트를 지정하는 역할을 한다.//html // scriptnew Vue({ el: "app"});vue/cli로 Vue 프로젝트를 생성 후 index.html을 보면 body태그..

간단한 웹게임을 만드려고 한다. 다양한 JavaScript 게임 엔진들이 있었지만 Phaser.js를 선택했다. 예제 코드나 API문서들이 잘 정리되어 있어서 금방 따라할 수 있어 보였다. 튜토리얼을 따라가보며 구현법을 간단히 익혔다. 튜토리얼은 여기를 참고했다. Intro일단 Phaser3로 아래 게임을 만들어 볼 것이다. 코드를 작성하며 기능에 대해 알아볼 수 있었다.먼저 Phaser는 HTML5에서 게임을 만들 수 있는 프레임워크다. 데스크탑이나 모바일 브라우저에서 모두 활용할 수 있으며 태그가 지원되는 곳이면 사용 가능하다.아래는 베이스라인 코드이다.​xvar config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: prel..