본문 바로가기

Language/JavaScript

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