티스토리

B군의 Answer

검색하기

블로그 홈

B군의 Answer

bman-note.tistory.com/m

내가 좋아하는 걸 좋아하는 만큼만 하는 노트

구독자: 0

방명록 방문하기

주요 글 목록

Vue - 페이지 이동시 onMounte 동작하지 않을 때 해결방법 Vue3에서 페이지를 변경했는데 해당 페이지에 컴포넌트에서 onMounted 훅을 타지 않는 이유는 컴포넌트가 실제로 언마운트되지 않고 재사용되었을 가능성이 있습니다. 이전페이지에서도 사용하는 컴포넌트를 이동한페이지에서 사용한다면 컴포넌트 재사용으로 마운트 하지않는경우 발생 해결방법- 해당 컴포넌트에 :key 값을 추가하여 컴포넌트를 완전히 새로 마운트하도록 합니다. 이 방법은 router-view가 라우트 경로가 바뀔 때마다 컴포넌트를 완전히 새로 마운트하도록 강제합니다. 그 결과 onMounted() 훅도 매번 새롭게 실행됩니다. 공감수 0 댓글수 0 2025. 4. 22.
개발에 유용한 사이트 추천 여러 가지 개발에 필요한 기능을 많이 가지고 있는 사이트! 추천드립니다. 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.. 공감수 4 댓글수 0 2024. 9. 3.
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.. 공감수 0 댓글수 0 2024. 9. 3.
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 공감수 0 댓글수 0 2024. 7. 15.
Vue - 두번 클릭해야 화면 이동 할 경우(a태그) a태그 href에 '#'을 사용할 때 발생하는 이슈와 해결 방법 - 웹 개발 중에 종종 태그의 href 속성에 #을 사용하는 경우가 있습니다. 이는 주로 JavaScript 이벤트와 연결하여 동적으로 내용을 변경하거나 화면을 스크롤하는 등의 동작을 수행하기 위해 사용됩니다. 그러나 Vue.js와 같은 프런트엔드 프레임워크를 사용할 때, 이러한 방식으로 링크를 처리할 때 문제가 발생할 수 있습니다. 퍼블리싱받은 파일에 다음과 같이 태그가 포함되어 있다고 가정해 봅시다. 약관 동의 일반적으로 이 링크를 클릭할 때 Vue.js의 router.push()를 사용하여 화면을 이동하고자 할 때, 다음과 같이 코드를 작성할 수 있습니다. 약관 동의 //pageMove에는 다음과 같이 router를 사용한다고 할경우 .. 공감수 0 댓글수 0 2024. 2. 27.
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": "감사합니다.. 공감수 0 댓글수 0 2024. 2. 23.
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,//사용하지 .. 공감수 0 댓글수 1 2023. 12. 20.
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을 사용할 때 태그 안에 주석이 들어가면 해당 주석이 엘리먼.. 공감수 1 댓글수 0 2023. 12. 1.
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.. 공감수 2 댓글수 0 2023. 11. 22.
정규식 모음 N번째 마다 특정 기호 넣기 const inputStr = "123412341234"; const outputStr = inputStr.replace(/(.{4})(?!$)/g, '$1-'); 결과: 1234-1234-1234 휴대폰번호 체크 const phoneNumber = '01012345678'; const regPhone = /^01([016789])(\d{3,4})(\d{4})$/; const isValidPhoneNumber = regPhone.test(phoneNumber); console.log(isValidPhoneNumber); // true 특정 확장자 체크 /\.(jpg|jpeg|gif|png|bmp|pdf)$/i 이메일 주소 체크 const emailRegex = /^[A-Za-.. 공감수 0 댓글수 0 2023. 5. 10.
모바일 input에서 키패드 다음버튼 keydown 이벤트 안먹을때 해결방법 모바일 프로젝트 모바일키보드 keydown 이벤트 해결 모바일 프로젝트 중 input 타입을 눌렀을 때 이동 버튼 or 다음 버튼이 키패드에 생성되는데 이동버튼은 keydown 이벤트가 타지만 다음버튼은 keydown 버튼을 타지 않는다. 해결방법은 inputmode="search" 를 input 태그 안에 넣어준다. inputmode 그 외 기능은 아래링크에서 확인 하시면됩니다. 자주 사용하는기능은 숫자키패드로 나타나게 할 때 numeric 또는 decimal 를 사용해서 원하는 숫자키패드를 생성 해준다. 위 기능을 이용하면 input type="text" 에서도 숫자키패드를 생성해 할 수 있다. 참조 : https://developer.mozilla.org/ko/docs/Web/HTML/Global_.. 공감수 2 댓글수 0 2023. 4. 12.
JavaScript 형변환 모음 유형 변환은 한 데이터 유형의 값이 다른 데이터 유형으로 변환되는 JavaScript의 일반적인 관행입니다. JavaScript는 암시적 및 명시적 변환을 포함하여 데이터 유형을 변환하는 여러 가지 방법을 제공합니다. 이 글에서는 JavaScript 유형 변환의 몇 가지 예를 살펴보겠습니다. 1. String to Number parseInt()및 함수 parseFloat()는 문자열을 숫자로 변환하는 데 사용됩니다. let str = "10"; let num = parseInt(str); console.log(typeof num); // number 2. Number to String 숫자를 문자열로 변환하려면 toString()메서드를 사용할 수 있습니다. let num = 10; let str = .. 공감수 0 댓글수 0 2023. 2. 16.
Cross-Domain - JSONP 해결방법 AJAX 요청을 할 때 개발자는 종종 다른 도메인에서 데이터를 가져오려고 할 때 문제에 직면합니다. 이는 웹 페이지가 페이지를 제공한 도메인이 아닌 다른 도메인에 요청하는 것을 방지하기 위해 브라우저에서 구현한 보안 조치인 Same-Origin Policy 때문입니다. 그러나 이러한 제한을 극복하고 AJAX를 사용하여 교차 도메인 요청을 하는 방법이 있습니다. 이 게시물에서는 JSONP 기술을 사용하는 AJAX 교차 도메인 설루션의 예를 살펴보겠습니다. JSONP JSONP(JSON with Padding)는 Same-Origin Policy를 우회하고 AJAX를 사용하여 도메인 간 요청을 허용하는 데 사용되는 기술입니다. JSONP는 다른 도메인의 URL을 가리키는 src 속성으로 스크립트 태그를 생성.. 공감수 0 댓글수 0 2023. 2. 16.
안드로이드 스튜디오 빌드 에러 type 3 안드로이드 스튜디오에서 빌드할 때 아래와 같은 에러가 나타난다면 앱이 정상적으로 삭제가 되지 않아서 나타나는 문제일 수 있습니다. 해결방법 휴대폰 설정 > 앱 및 알림 > 앱정보 > 해당앱이 남아있는지 확인 후 남아있다면 삭제 하시면 해결됩니다. Error while executing: am start -n "경로.mobile.Startup" -a android.intent.action.MAIN -c android.intent.category.LAUNCHER Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=경로/.Startup } Error type 3 Error: Activity cla.. 공감수 0 댓글수 0 2020. 9. 24.
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가 제대로 동작.. 공감수 0 댓글수 0 2020. 7. 27.
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.. 공감수 0 댓글수 0 2020. 7. 27.
JavaScript] 동적 테이블 병합 프로젝트하면서 동적 테이블 병합을 할 일이 생겨 사용한 테이블 병합 함수입니다. 병합을 원하는 열을 넣으면 row별로 체크하여 rowspan을 셋팅합니다. setRowspan(num) {//num 병합을 원하는 열 var mergeItem = "";//병합구분값 var mergeCount = 0;//병합 수 var mergeRowNum = 0;//병합들어갈 row $('tr','#table1').each(function(row){ // #테이블ID값 if(row > 0 ){ var item = $(':eq(' + num +')',$(this)).html(); if(mergeItem != item ) { mergeCount = 1; mergeItem = item ; mergeRowNum = row; }el.. 공감수 2 댓글수 0 2020. 7. 1.
Vue - DOM 업데이트 후 작업하는 함수 $nextTick() 비동기로 데이터를 가져와 테이블을 생성하고 같은 이름끼리 병합하는 함수를 생성하여 사용하였는데 어떻게 된 것인지 data를 변경하고 함수를 사용하였지만 생성한 함수가 제대로 동작하지 않음. 원인으로는 data가 변경되었지만 DOM에는 반영되지 않은 상태에서 rowsapn을 변경하려는 동작을하여 제대로 동작을 하지 못하였습니다. 이후 알게 된 것이지만 Vue는 DOM 업데이트를 비동기로 하여 컴포넌트는 즉시 재 렌더링되지 않습니다. 큐가 플러시 될 때 다음 “tick” 에서 업데이트됩니다. 해결 방법으로 DOM업데이트후 호출하는 $nextTick() 함수를 사용하여 DOM업데이트를 하고 난 뒤 병합하는 함수를 호출하는 방식으로 처리하였습니다. 사용방법 Vue.component('example', { tem.. 공감수 1 댓글수 0 2020. 7. 1.
Vue - moment.js 날짜 계산 사용하는 법 moment.js를 npm을 통하여 설치합니다. npm install moment --save - package.json에서 dependencies 속에 moment가 설치되어있나 확인. 사용 방법 - 날짜 모듈을 사용하려는 vue파일을 열고 다음과 같이 사용 var moment = require('moment'); // moment 모듈불러오기 var now = moment(); //오늘 var now = moment('2020-01-01'); //특정일 셋팅 //moment().add(number,String); 추가 //moment().subtract(number,String); 빼기 var tomorrow = moment().add(1,'days'); //내일 var yesterday = mome.. 공감수 0 댓글수 0 2020. 6. 19.
Vue - checkbox 선택한 값 가져오기 v-model을 이용하여 가져옵니다. -HTML 펩시 코카콜라 815콜라 v-model을 사용한 방법으로는 data()속에 변수를 생성하여 v-model에 넣어주면 생성한 변수에 값이 들어가있습니다. 변수는 배열로 생성해야 여러개의 값이 들어감. -script export default { data(){ return{ cola_check : [], } } } 체크 박스를 모두 선택했을 경우 ["펩시" , "코카콜라" , "815콜라"]와 같이 값이 들어갑니다. 변수를 스트링으로 생성하면 올바르게 작동하지 않습니다. 공감수 1 댓글수 0 2020. 6. 12.
Vue - Select 태그 선택한 값 Value 가져오기 Select 태그에서 @change 를 사용 펩시 코카콜라 815콜라 위 코드와 같이 select 태그에 change 함수를 사용합니다. 값 가져오기 - 함수내에서 $event에서 받은 값을 사용하여 value값 처리 함수명(envet){ console.log(event.target.value); //value값 출력 } methods 내에 다음과 같이 생성한뒤 사용하시면 됩니다. 공감수 2 댓글수 0 2020. 6. 10.
Vue - 프로젝트 공통함수 적용하기 1. 공통 js 생성 저의 경우 common.js를 생성하여 assets/js 안에 두었습니다. 함수 생성은 Vue.prototype.$함수명 = function(data){} 와 같은 방식으로 생성할 수 있습니다. import axios from 'axios' import config from 'config'; var requestOptions = { headers: { 'Content-Type': 'application/json', timeout: 60000 } }; export default{ install(Vue){ // ajax post Vue.prototype.$post = function (callUrl, postData, succ, fail){ var URL = `${config.conte.. 공감수 0 댓글수 0 2020. 5. 22.
Vue - ckeditor 사용방법 vue 프로젝트에 ckeditor5 사용시 에러 발생 기본 에디터에 플러그인 추가시 아래 에러 발생 ckeditor.js:5 TypeError: Cannot read property 'getAttribute' of null at IconView._updateXMLContent (iconview.js:100) at IconView.render (iconview.js:76) at IconView.on (observablemixin.js:249) at IconView.fire (emittermixin.js:196) at IconView.(anonymous function) [as render] (http://localhost:3030/js/bundle.js:27142:16) at ViewCollection.o.. 공감수 0 댓글수 0 2020. 5. 18.
HTML] data 속성 간단 사용법 HTML 태그속 data-* 형식으로 저장하고 싶은 값들을 저장할 수 있습니다. Example 버튼 JavaScript JavaScript에서는 dataset을 통하여 값을 가져올수 있습니다. 속성에 접근하는 방법은 data 속성의 data-부분을 뺀 뒷부분만 사용하며 - 뒤 첫번째 영단어는 대문자로 작성하여야 합니다. (데이터 속성 이름에서data-를 뺀 뒤 camelCase로 변환.) ex) data-color-type > dataset.colorType Example var codeId = document.getElementById('btn').dataset.codeId; var type = document.getElementById('btn').dataset.type; JQuery JQuery에서.. 공감수 1 댓글수 0 2019. 12. 19.
JavaScript] 객체 배열 특정 값 인덱스 찾는 함수 findIndex 객체 배열 속 특정값 인덱스를 찾는 방법을 찾다가 findIndex라는 함수를 알게되어 사용하였습니다. findIndex() 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다. Syntax array.findIndex(function(currentValue, index, arr), thisValue) Example 1 var ages = [3, 10, 18, 20]; function checkAdult(age) { return age >= 18; } function myFunction() { var index = ages.findIndex(checkAdult); } Example 2 var array = [ {name:"홍길동", ag.. 공감수 2 댓글수 0 2019. 12. 19.
HTML5 특수문자 코드표 확인 HTML5 에서 특수문자를 사용할때 깨진다면 아래의 사이트에서 코드값을 찾아 변경하면 깨지지 않습니다. ex) >의 경우 > , &의 경우 & 로 변경하시면 됩니다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 공감수 0 댓글수 0 2019. 12. 18.
안드로이드 스튜디오 빌드 오류 잘 돌아가던 프로젝트가 갑자기 빌드가 안되고 아래의 오류가난다면 RansomDefender가 문제일 수 있습니다. The newly created daemon process has a different context than expected. Java home is different. Please configure the JDK to match the expected one. Open JDK Settings 저의 경우에는 삼성 노트북에 RansomDefender 라는 프로그램의 행위탐지 동작을 통해 java.exe를 검역소로 이동시키고 있었습니다. 해당 RansomDefender 프로그램에서 기록 > 검역소 > java.exe 체크 후 복원 버튼 클릭 하시면 파일이 복원됩니다. 행위탐지 동작이 켜져있을 .. 공감수 0 댓글수 0 2019. 12. 16.
IntelliJ ] Vue 초기 개발 세팅 // IntelliJ 2018.2.8(Ultimate Edtion)으로 세팅 // node.js, npm 설치 후 진행 1. IntelliJ 모듈 생성 원하는경로에 IntelliJ 모듈 생성 File - New - module New Module - static Web - Vue.js 선택 후 Next Module name 입력 후 Next 2. IntelliJ 내 Terminal Open 3. vue-cli를 이용하여 프로젝트 생성 vue init webpack [원하는 프로젝트명] 위 코드 입력 후 나타나는 입력 창 모두 엔터해도 문제없음 4. 해당 프로젝트 경로로 이동 cd [프로젝트명] 5. Vue 프로젝트 실행 npm run dev npm start 위 두 코드중 하나 실행(npm start 가.. 공감수 0 댓글수 0 2019. 12. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.