본문 바로가기

vue

Vue3 - pinia 사용시 storage 반영이 느릴 경우 해결 법 Vue3 - pinia 사용시 storage 반영이 느릴 경우 해결 법
Vue3에서 pinia를 통해 상태관리를 할 경우import { defineStore } from "pinia";export const useTest = defineStore("test", { state: () => ({ loadingFlag: false, payParam: { price: "", id: "", grpId: "", }, }), getters: {}, actions: { setPayParam(data) { this.payParam.price = data.price; this.payParam.id = data.id; this.payParam.grpId = data.grpId; }, }, per..
Vue3 - 간단한 토스트 알림 적용 Vue3 - 간단한 토스트 알림 적용
vue3-toastify를  사용한 Vue 토스트 알림 적용 1. vue3-toastify 설치npm install --save vue3-toastifyoryarn add vue3-toastify 2. 소스적용vue3 script setup 으로 사용 메인화면3. 화면 확인 데모 페이지를 통하여 필요한 Toast 얼럿 생성 가능 Demo URL- https://vue3-toastify.js-bridge.com/ Document URL- https://vue3-toastify.js-bridge.com/get-started/introduction.html
Vue - 두번 클릭해야 화면 이동 할 경우(a태그) Vue - 두번 클릭해야 화면 이동 할 경우(a태그)
a태그 href에 '#'을 사용할 때 발생하는 이슈와 해결 방법 - 웹 개발 중에 종종 태그의 href 속성에 #을 사용하는 경우가 있습니다. 이는 주로 JavaScript 이벤트와 연결하여 동적으로 내용을 변경하거나 화면을 스크롤하는 등의 동작을 수행하기 위해 사용됩니다. 그러나 Vue.js와 같은 프런트엔드 프레임워크를 사용할 때, 이러한 방식으로 링크를 처리할 때 문제가 발생할 수 있습니다. 퍼블리싱받은 파일에 다음과 같이 태그가 포함되어 있다고 가정해 봅시다. 약관 동의 일반적으로 이 링크를 클릭할 때 Vue.js의 router.push()를 사용하여 화면을 이동하고자 할 때, 다음과 같이 코드를 작성할 수 있습니다. 약관 동의 //pageMove에는 다음과 같이 router를 사용한다고 할경우 ..
Vue - 간단 다국어 적용 방법(pinia사용) Vue - 간단 다국어 적용 방법(pinia사용)
Vue3에서 다국어 적용하기! 우선 저는 다국어 지원 vue-i18n 없이Pinia를 통해 다국어를 적용했습니다. pinia 설치는 아래 포스팅을 통해 적용해주시면 됩니다https://bman-note.tistory.com/44 vue3 - pinia 간단 세팅 방법이번 포스팅에서는 vue3에서 상태관리를 위한 pinia 세팅을 해보겠습니다. pinia, pinia-plugin-persist 설치 pinia : 상태관리 라이브러리 참고링크 : https://pinia.vuejs.kr/core-concepts/ pinia-plugin-persist : storage 저bman-note.tistory.com1. Json 파일 생성//kr.json{ "key1": "안녕하세요", "key2": "감사합니다..
Vue - WebSocket connection failed(webpack) 해결방법 Vue - WebSocket connection failed(webpack) 해결방법
VUE 웹 개발 중에 WebSocket connection failed 에러 발생에 대한 해결책을 알아보겠습니다. 구글링으로 블로그들에 올라와있는 방법으로 해보았지만 해결이 되지 않았습니다. 결국 공식문서확인 후 해결 문제의 원인 : webpack의 기능중 webpack-dev-server에서 자동으로 WebSocket을 ws를 기본값으로 세팅함 해결방법 : vue.config.js 파일에 아래와 코드 추가로 WebSocketServer를 사용하지 않음으로 설정함 추가한 코드 const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ devServer: { webSocketServer: false,//사용하지 ..
Vue - v-html 사용 시 발생하는 주석 관련 에러 해결 방법 Vue - v-html 사용 시 발생하는 주석 관련 에러 해결 방법
Vue.js는 가상 DOM을 기반으로 하는 강력한 프론트엔드 프레임워크로, 동적인 콘텐츠를 효과적으로 처리할 수 있습니다. 그중에서도 v-html 디렉티브는 HTML 문자열을 렌더링 할 때 사용되며, 때로는 예상치 못한 문제를 일으킬 수 있습니다. 특히, v-html이 사용된 태그 안에 주석이 들어갈 경우 에러가 발생할 수 있습니다.v-html will override element children. 에러 상황///일반적으로 v-html을 사용하면 다음과 같이 사용됩니다.///하지만 이렇게 사용할 때, 해당 태그 안에 주석이 포함되면 문제가 발생합니다.///이외의 무엇이든 v-html 태그속에 들어갈경우 에러 발생??Vue.js에서는 v-html을 사용할 때 태그 안에 주석이 들어가면 해당 주석이 엘리먼..
Vue - watch를 이용한 입력 값 제한 Vue - watch를 이용한 입력 값 제한
vue.js를 이용하여 개발을 할때 watch를 이용하여 입력값을 제한하기가 매우 편리합니다. 특정범위만 입력되어야하는 경우 아래와 같이 사용하시면 됩니다. 예제로는 숫자만 입력입니다. export default { data() { return{ number : "", } }, watch:{ number : function(){ return this.number = this.number.replace(/[^0-9]/g, ''); //정규식 사용 } } } 다음과 같은 방법으로 정규식을 이용하여 특정범위만 입력값을 받을 수 있습니다. 숫자만 입력의 경우 input 타입에 number 보다 text을 넣고 maxlength를 주는방식이 좋습니다. number 타입으로 할 경우 maxlength가 제대로 동작..
Vue - router params 새로고침 후 값이 없어질때 Vue - router params 새로고침 후 값이 없어질때
vue.js 에서 화면이동 하면서 params 를 넘겨주실 때 아래와 같이 사용하고 있으시다면 해당페이지에서 새로고침을 하였을경우 params에 값이 다 날아가버려서 당황하실 수 있습니다. this.$router.push({path : '/update', name:'update', params: {title: '제목', contant:"내용"}}); 새로고침을 하였을 때에도 값을 유지하고 싶으시다면 위의 코드에서 params 를 query 로 바꿔주시면 됩니다. this.$router.push({path : '/update', name:'update', query: {title: '제목', contant:"내용"}}); 값을 꺼내어 쓰실때에는 params 와 똑같이 query 로 사용하시면 됩니다. th..

티스토리툴바