본문 바로가기

프론트엔드11

Swiper 양쪽 끝에서 드래그시 밀림 막기 Swiper 양쪽 끝에서 드래그시 밀림 막기 swiper를 사용하다보면 맨 왼쪽이나 맨 오른쪽 슬라이드에서 드래그 시 슬라이드가 살짝 밀리는 모습을 볼 수 있습니다. 경우에 따라 이게 많이 거슬리는 경우가 있는데, 이 현상을 막을 수 있는 스와이퍼 옵션이 있습니다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com swiper api를 보시면 resistanceRatio라는 옵션이 있는데, 이 옵션을 사용하면 양쪽 끝에서 밀리는 정도를 조절할 수 .. 2022. 1. 30.
Vue2에서 clearTimeout & clearInterval 하는법 Vue2에서 clearTimeout & clearInterval 하는법Vue를 이용해서 프로젝트를 만들다보면 'setTimeout'나 'setInterval' 함수를 사용하는 경우가 꽤 자주 생깁니다. setTimeout은 일정 시간이 지나면 인자로 전달된 callback 함수를 실행하는 함수로 중간에 취소하고 싶으면 clearTimeout을 해줘야 합니다다.setInterval은 일정 시간을 텀으로 두고 주기적으로 인자로 전달된 callback 함수를 실행하는 함수인데, 원하는 만큼 실행이 되면 조건을 통해 clearInterval을 해줘야 합니다.이 두 함수는 사용보다 해제를 잘 하는 것이 더 중요한데요. 해제를 할 땐 각각 'clearTimeout'과 'clearInterval' 함수를 사용하면 됩.. 2022. 1. 19.
(Vue 3) non-emits event 경고 (Vue 3) non-emits event 경고 Vue로 프로젝트를 개발하다 보니 팝업창을 띄울 때마다 런타임시 이상한 경고창이 뜨는 것을 발견했다. Extraneous non-emits event listeners (closePopup) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 왜 이런 경고창이 뜨는 것일까? 내가 진행하던 프로젝트에서.. 2022. 1. 16.
자주쓰는 정규식 표현들 모음 자주쓰는 정규식표현(regexr) 및 형식(format) 모음 프로젝트를 진행하다 보면 로그인이나 회원가입 페이지 등을 개발할 때, 사용자가 입력한 값에 유효성 검사를 해야하는 경우가 많다. 여러 프로젝트를 반복적으로 진행하다 보니 자주 쓰는 정규식 표현들이 보여서 이번기회에 정리해 보았다. Check 비밀번호 정규식 이메일 정규식 아이디 정규식 한글 정규식 영어 정규식 숫자 정규식 주민번호 정규식 Format 핸드폰번호 형식 숫자에 쉼표(,) 넣기 주민등록번호 형식 사업자등록번호 형식 형식 체크 (Checking) 입력값이 형식에 맞는지 체크할 때 사용하는 정규식들의 모음이다. 더보기 정규식과 'test' 내장 함수를 이용하여, 입력값이 해당 정규식에 부합한지를 true or false로 return .. 2022. 1. 11.
(Javascript) array 비교 방법 (Javascript) Array 비교 방법 자바스크립트에서 두 배열이 같은지 비교하는 방법을 알아보자. 급한 사람을 위해 결론부터 :) 가장 간단한 방법은 3가지로 배열을 아래처럼 String 형태로 만들어서 비교하는 방법이 가장 쉽다. String() 사용 toString() 사용 JSON.stringify 사용 (추천) const arr1 = [1,2,3]; const arr2 = [1,2,3]; // 결과는 셋다 true console.log( String(arr1) == String(arr2) ); console.log( arr1.toString() == arr2.toString() ); console.log( JSON.stringify(arr1) == JSON.stringify(arr2) );.. 2021. 12. 15.