본문 바로가기

전체 글

정규식 모음
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-..
모바일 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_..
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 = ..
Cross-Domain - JSONP 해결방법
AJAX 요청을 할 때 개발자는 종종 다른 도메인에서 데이터를 가져오려고 할 때 문제에 직면합니다. 이는 웹 페이지가 페이지를 제공한 도메인이 아닌 다른 도메인에 요청하는 것을 방지하기 위해 브라우저에서 구현한 보안 조치인 Same-Origin Policy 때문입니다. 그러나 이러한 제한을 극복하고 AJAX를 사용하여 교차 도메인 요청을 하는 방법이 있습니다. 이 게시물에서는 JSONP 기술을 사용하는 AJAX 교차 도메인 설루션의 예를 살펴보겠습니다. JSONP JSONP(JSON with Padding)는 Same-Origin Policy를 우회하고 AJAX를 사용하여 도메인 간 요청을 허용하는 데 사용되는 기술입니다. JSONP는 다른 도메인의 URL을 가리키는 src 속성으로 스크립트 태그를 생성..
안드로이드 스튜디오 빌드 에러 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..
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..
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..
Vue - DOM 업데이트 후 작업하는 함수 $nextTick() Vue - DOM 업데이트 후 작업하는 함수 $nextTick()
비동기로 데이터를 가져와 테이블을 생성하고 같은 이름끼리 병합하는 함수를 생성하여 사용하였는데 어떻게 된 것인지 data를 변경하고 함수를 사용하였지만 생성한 함수가 제대로 동작하지 않음. 원인으로는 data가 변경되었지만 DOM에는 반영되지 않은 상태에서 rowsapn을 변경하려는 동작을하여 제대로 동작을 하지 못하였습니다. 이후 알게 된 것이지만 Vue는 DOM 업데이트를 비동기로 하여 컴포넌트는 즉시 재 렌더링되지 않습니다. 큐가 플러시 될 때 다음 “tick” 에서 업데이트됩니다. 해결 방법으로 DOM업데이트후 호출하는 $nextTick() 함수를 사용하여 DOM업데이트를 하고 난 뒤 병합하는 함수를 호출하는 방식으로 처리하였습니다. 사용방법 Vue.component('example', { tem..
Vue - moment.js 날짜 계산 사용하는 법 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..
Vue - checkbox 선택한 값 가져오기 Vue - checkbox 선택한 값 가져오기
v-model을 이용하여 가져옵니다. -HTML 펩시 코카콜라 815콜라 v-model을 사용한 방법으로는 data()속에 변수를 생성하여 v-model에 넣어주면 생성한 변수에 값이 들어가있습니다. 변수는 배열로 생성해야 여러개의 값이 들어감. -script export default { data(){ return{ cola_check : [], } } } 체크 박스를 모두 선택했을 경우 ["펩시" , "코카콜라" , "815콜라"]와 같이 값이 들어갑니다. 변수를 스트링으로 생성하면 올바르게 작동하지 않습니다.
Vue - Select 태그 선택한 값 Value 가져오기 Vue - Select 태그 선택한 값 Value 가져오기
Select 태그에서 @change 를 사용 펩시 코카콜라 815콜라 위 코드와 같이 select 태그에 change 함수를 사용합니다. 값 가져오기 - 함수내에서 $event에서 받은 값을 사용하여 value값 처리 함수명(envet){ console.log(event.target.value); //value값 출력 } methods 내에 다음과 같이 생성한뒤 사용하시면 됩니다.

티스토리툴바