내가 보려고 만든 블로그

vue에서 윈도우 사이즈 변경될때마다 윈도우 사이즈를 가져오고싶은데 구글링을 아무리 해봐도 원하는 결과가 나오지 않았는데 좀더 구글링 해서 찾았다! router/index.js 에 추가해주고 사용할때는 $viewport.width 로 사용하면 width값을 가져올 수 있다! // router/index.js const updateSizes = (obj = {}) => { obj.width = window.innerWidth obj.height = window.innerHeight return obj } Object.defineProperty(Vue.prototype, '$viewport', { value: Vue.observable(updateSizes()) }) window.addEventListene..

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR DemiLight'; font-style: norma..

const _vDate = new Date(new Date().getTime() + 5*60000) const _second = 1000 const _minute = _second * 60 const _hour = _minute * 60 const _day = _hour * 60 let timer const _this = this setInterval(() => { const now = new Date(); const distDt = _vDate - now if(distDt < 0){ clearInterval(timer) return ; } const days = Math.floor(distDt / _day) const hours = Math.floor((distDt % _day) / _hour) con..

환경 vuejs Egovment Spring Framework vue 랑 스프링을 연동할 일이 생겼다😢 학생때 스프링 했다가 포기했었는데 일을 하다보니 스프링을 다시 만질일도 있고.. 역시 사람일은 모르는건가보다 하지만 연동만 하면되는거라 생각보다 간단했는데 몇가지 코드만 입력해주면 되는일이었다! 내 프로젝트 디렉토리는 이렇다 스프링 구조는 프로젝트에 따라 다르고 정답은 아니지만 이런 구조를 받았다! 먼저 vue에서 설정을 해주어야되는데 vue vue.config.js 'use strict' var path = require('path') module.exports = { transpileDependencies: [ 'vuetify', ansiRegex ], lintOnSave: false, public..

laravel에서 ElastiCache로 만들어진 redis 연동하는 방법은 아래와 같다. env에는 구성 엔드포인트를 넣으면된다 여기서 중요한건 만들때 클러스터 활성화 모드로 만들어야된다는것! database.php 'redis'=>[ 'cluster' => env('REDIS_CLUSTER', true), 'default' => [ 'host' => env('REDIS_HOST', 'localhost'), 'password' => env('REDIS_PASSWORD', null), 'port' => env('REDIS_PORT', 6379), 'database' => 0, ], 'clusters' => [ 'default' => [ [ 'host' => env('REDIS_HOST', 'localho..

환경 php 7.4 laravel vuejs CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 가 뜨고 3시간인가 4시간 지난 후 오류를 수정했다ㅠㅠ 1. Cors 미들웨어 생성 있으신 분은 그냥 있는거 사용하시면된다! php artisan make:middleware Cors 2. Cors 미들웨어에서 헤더 생성 CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이제 그만보고싶다ㅠㅠㅠㅠㅠ app/Http/Middleware/Cors.php

환경 mac os php 7.4 pecl로 확장을 하고있을때 처음보는 오류를 발견했다. 열심히 구글링해서 찾은 결과 위에 나오는 문서로 들어가서 숫자하나만 변경해주면 된다 /usr/local/Cellar/php@7.4/7.4.14/include/php/Zend/zend_operators.h 508번줄 # define ZEND_USE_ASM_ARITHMETIC 1 // 1에서 0으로 변경 #else # define ZEND_USE_ASM_ARITHMETIC 0 #endif warning이 뜨긴하지만 그래도 결과적으로 설치가 잘 된것을 볼수있다!

vuejs 에서 store 관련 async 와 await 관련 오류가 발생했는데 해결방법은 아래와 같다. npm install --save-dev babel-polyfill npm install --save-dev babel-plugin-transform-regenerator npm i babel-plugin-transform-runtime scr/main.js import 'regenerator-runtime/runtime' babel-polyfill 관련 모듈을 설치해준다음 main.js에 import를 해주면 해결된다!

ckeditor 설치 npm install ckeditor4-vue vue 선언한곳에 사용하기 (main.js) import CKEditor from 'ckeditor4-vue'; Vue.use( CKEditor ); vue 파일에서 사용하기 원래는 editor5 쓰려고했는데 계속 오류가 발생해서 editor4로 변경하여 하니 한번에 바로 되었다! #공식사이트 ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html Vue Integration - CKEditor 4 Documentation Learn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plug..

환경 laravel vue vuetify laravel 를 백엔드로 사용하고 vue 를 프론트로 사용하여 개발하던 도중 v-app-bar를 써야되는데 계속 찾을 수없다는 오류가 떠서 이것저것 찾아보면서 시간낭비를 하다가 드디어 추가하는 방법을 알았다ㅠㅠㅠ 1. Npm install vuetify 2. vuetify.js 만들기 app.js가 있는 디렉토리에 plugins 디렉토리를 만들고 vuetify.js 파일을 만들어준뒤, 다음과 같이 작성한다. /resources/js/plugins/vuetify.js import Vue from 'vue' // import '@mdi/font/css/materialdesignicons.min.css' import Vuetify, { VApp, VCard, VCar..