소행성왕자

원본 코드const loadChartDatahandler = data=>{ // to do};onUnmounted(()=>{ emitter.off('loadChartData', loadChartDatahandler) }):onMounted(()=>{ emitter.on('loadChartData', data=>{ loadChartDatahandler(data); })}); Vue 3에서 이벤트 리스너를 등록하고 해제하는 과정에서 loadChartData 배열의 길이가 계속 늘어난다면, 이는 이벤트 리스너가 제대로 제거되지 않았기 때문일 가능성이 큽니다. 이 문제를 해결하려면 이벤트 리스너를 등록할 때 사용하는 함수 참조를 일관되게 유지해야 합니다.문제는 onMoun..

이 코드에서 defineEmits는 emit 함수를 반환합니다. emit 함수를 사용하여 이벤트를 발생시킬 수 있습니다. 위의 코드에서는 'Click me' 버튼을 클릭할 때 notifyParent 함수가 실행되면서 'notify'라는 이벤트를 부모 컴포넌트로 발송합니다. 이를 부모 컴포넌트에서 사용하려면 다음과 같이 할 수 있습니다: Child notified! 이렇게하면 자식 컴포넌트에서 발생한 'notify' 이벤트를 감지하고, 그에 대한 처리를 수행할 수 있습니다. 을 사용하면 코드가 간결해지고 가독성이 향상되는 등의 이점을 얻을 수 있습니다.

import { createRouter, createWebHashHistory } from 'vue-router' import Home from '@/components/home.vue'; import About from '@/components/about.vue'; import Flutter from '@/components/n_flutter.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/flutter', component: Flutter }, ] const router = createRouter({ history: createWebHashHistory(), rout..

1. 화살표 함수 // 일반 함수 function(v1, v2) { return v1 + v2 } // 화살표 함수 const test = (v1, v2)=>{ return v1 + v2 } console.log(test(1,2)); // 3 // 화살표 함수 (인자없을때) const test =_=>{ } 2. 템플릿 리터럴 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. ` 백틱을 사용합니다. `string text` const test =_=>{ return `Hello ${this.name} ` } 3. 모듈..

결과 아래와 같이 항목을 입력후 로그인 버튼 클릭시 vue 와 java 연동을 보여준다. frontend => backend 연동 vue 와 springboot 기본 설치와 설정 되어 있어야 한다. 안되어 있으면 아래 클릭하여 vue 와 spring boot 연동 먼저. https://trytoso.tistory.com/1579?category=988314 인텔리제이(intellij) 스프링 부트(spring boot) vue.js 연동 8080 포트 방법 인텔리제이(intellij) 스프링 부트(spring boot) vue.js 연동 8080 포트 방법 보통 백엔드서버 8081 프론트엔드 8081 두개의 서버를 가동하지만 본 문서에서는 백엔드 서버 8080 으로 연동하는 방법을 사용하 trytoso...

vue 유효성 체크 validators install npm install --save vuelidate vuelidate/lib/validators 에러 발생 npm ERR! code ENOLOCAL npm ERR! Could not install from "vuelidate/lib/validators" as it does not contain a package.json file. npm ERR! A complete log of this run can be found in: npm ERR! /Users/naya/.npm/_logs/2021-12-13T02_28_10_898Z-debug.log 시도 npm install --save vuelidate

현재 vuetify vue 2에 호환된다. 설치는 vue 설치된 디렉토리 front 에서 진해하면 된다. $ cd front $ vue add vuetify Default 선택 설치완료후 서버 실행 $ npm run serve 에러 발생 ERROR Failed to compile with 1 error 11:16:27 AM Failed to resolve loader: vue-svg-loader You may need to install it. 해결 $ npm i -D vue-svg-loader

인텔리제이(intellij) 스프링 부트(spring boot) vue.js 연동 8080 포트 방법 보통 백엔드서버 8081 프론트엔드 8081 두개의 서버를 가동하지만 본 문서에서는 백엔드 서버 8080 으로 연동하는 방법을 사용하고자 한다. 필요사항 intellij spring boot vue.js 백엔드 (spring boot) 설정 build.gradle plugins { id 'org.springframework.boot' version '2.5.6' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' id "com.github.node-gradle.node" version "3.1.1" id 'war' } group..

spring boot port 8080 vue port localhost:8081 vue cli 설치 $ npm install -g @vue/cli vue 설치 $ vue create front vue.config.js 파일 추가 (front 프로젝트 root 폴더) http-common.js 파일 추가 (http 통신에 관련된 사항 기술 src 폴더) Vue router 추가 (다중 페이지 처리) axios 추가 (http 통신 처리) vue.config.js module.exports = { outputDir: "../src/main/resources/static", indexPath: "../static/index.html", devServer: { proxy: "http://localhost:80..