vue.js

팝업 창 밖을 클릭 시 자동으로 닫히게 하고 싶을 때가 있다. 간단하게 구현가능한 패키지가 있다. 패키지 설치 npm i @vueuse/components 코드 <OnClickOutside @trigger="calendarOn = false" :options="{ ignore: [https://blog.slowstart.co.kr/*%20...%20*/] }"> <div v-if="calendarOn" style="position:

엑셀형태의 테이블 데이터를 서버에 변수로 보낼 경우 테이블 렌더링에 사용되는 배열 데이터를 바로 사용하면 type이 달라 에러가 발생한다. const list = ref( [] ); . . . axios.post( 'localhost:8080/api/test', list.value ... ) list.value 타입을 확인해 보면 proxy(array) 라는 형인데 toRaw 함수를 사용하면 순수 배열로 변경이 가능하다 const list = ref(

<input type="text" @change="onChangeValue($event)"> . . . const onChangeValue = function( event:any ) { //변경 값 조회 console.log( event.target.value ); }

게임 클라이언트 개발에서 자주 사용하는 옵저버패턴을 구현하고 싶어서 찾다보니 좋은 플러긴이 있어서 소개한다. ( 원래는 옵저버 패턴을 다루려 했는데 자세히 찾아보니 구독패턴 구조이다 ) 본문은 <script setup> 을 사용한 방식이다. mitt 설치 npm i --save mitt main.js 설정 변경 const emitter = mitt(); . . . app.config.globalProperties.$emitter = emitter; 발행 <

javascript 에는 static 이 없다. const 를 사용하여 전역변수를 사용하는데 vue3 에선 다르게 사용하여 기록을 남긴다. 1. main.ts 수정 import {createApp} from 'vue' import App from './App.vue' import router from "@/router"; const app = createApp( App ); app.use( router ).mount( '#app'

로컬서 돌리면 잘 되는데 서버에 올리니까 이따구 에러가 나온다. vue.config.js 파일을 찾아 아래처럼 devServer... 부분을 추가해 준다. const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, devServer: { allowedHosts: "all" } }) -끗-

vue3으로 전환하면서 <script setup> 관련한 오류(경고)가 발생했다. vue를 v2를 사용하다가 v3으로 변경하면서 너무너무너무 좋은 기능을 발견했다. 기존에 export default {} 를 선언해서 데이터든 컴포넌트등 설정을 했었다면 이제는 <script></script> 속성에 setup만 정의해주면 그런 보일러플레이트를 모두 제거할 수 있다. 심플이즈베스트! 그런데 문제가 생겼다. 다른

못생겼는데 개발 잘하는 머리 큰 친구가 알려줬다. vue 3 버전에서는 export default 를 안써도 된다. 뷰 전용 문법들 같은 애들이 기존 자바스크립트 소스코드 모양새로 변했다. import 'v-calendar/dist/style.css'; import {DatePicker} from 'v-calendar'; import DateUtil from "@/assets/js/DateUtil"; export default { name: "

javascript 에서 사용하던 공통함수 기법이 통하질 않았다! vue에서 사용하는 방법이 있나 찾아보니 mixin 이라는 방법이 있어서 기록해 둔다 import MathUtil from "@/assets/js/MathUtil"; export default { mixins: [MathUtil], methods: { $yyyyMMdd( str, delimiter ) { const date = new Date( str ); return date.getFullYear() + delimiter + this.$zerofill( ( date.getMonth() + 1 ), 2 ) + delimiter