본문 바로가기

개발

개발에 유용한 사이트 추천 개발에 유용한 사이트 추천
여러 가지 개발에 필요한 기능을 많이 가지고 있는 사이트!  추천드립니다.  https://www.coderstool.com/ No-Code Tools for Developers, DevOps, Server Admins, IT | Comprehensive ToolsetFree no-code tools for Developers, DevOps Engineers, Server Admins, IT Operations, Financial Professionals. From development to server managementwww.coderstool.com 주요기능 SITEMAPData Format Conversion ToolsJSON To CSVCSV to JSONJSON Escape / Unescape..
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 - pinia 간단 세팅 방법 Vue - pinia 간단 세팅 방법
이번 포스팅에서는 vue3에서 상태관리를 위한 pinia 세팅을 해보겠습니다. pinia, pinia-plugin-persist 설치 pinia : 상태관리 라이브러리 참고링크 : https://pinia.vuejs.kr/core-concepts/ pinia-plugin-persist : storage 저장 plugin 참고링크 : https://seb-l.github.io/pinia-plugin-persist/#nuxt npm i pinia npm i pinia-plugin-persist mian.js 에 아래와 같이 pinia, pinia-plugin-persist 사용설정 //pinia 상태관리 plugin import { createPinia } from 'pinia'; //pinia storag..

티스토리툴바