팁 & 노하우/Javascript8 jquery, mouse over, delay 처리하기 제이쿼리, 마우스 오버 시, 지연 후 실행 하기마우스 오버 시 특정 내역을 실행 할 경우, setTimeout 을 이용해서 딜레이 후 청리하는 방법 안내 드립니다.간단한 방법인데 잘 모르는 경우가 많아서 샘플 코드 올려 드립니다. 주니어 개발자님들에게 도움이 되었으면 합니다. let delay = 1000;let setTimeoutConst;$(document).on("mouseenter", "#target-image", function () { let that = this; setTimeoutConst = setTimeout(function () { //do something }, delay);});$(document).on("mouseleave", "#target-imag.. 2024. 11. 30. Blocked aria-hidden on an element because its descendant retained focus 부트스트랩 모달 에러 해결 (error bootstrap modal) Blocked aria-hidden 문제 해결문제 발생Bootstrap 4.x 버전 사용 시 예전에는 문제가 없었지만,구글 크롬 개발자 콘솔에서 오류가 발생하였다. 에러 로그는 아래와 같이 aria-hidden 처리 오류이다.구체적 원인은 더 봐야 하겠지만, aria-* attribute는 스크린 리더에 관련한 태그인데,모달 창이 닫힐 경우 특정 버튼으로 포커싱 되지 않아서 발생하는 오류로크롬 업데이트 후 w3c 정책에 맞도록 수정한 것으로 판단된다. Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid u.. 2024. 11. 28. vue3 js 목록에서 마우스 오버 시 글자, 버튼 등 나타나게 vue.js 에서 목록에서 Loop 문에서 아이템에 마우스 오버 시 글자 나타나게 하는 방법을 알려드립니다.소스를 보면 아주 간단합니다.loop 의 key 값을 비교해서 보이게 안보이게 처리하는 것이 특징이며,v-bind:key 값을 index 로 사용해도 됩니다. CSS로 처리하는 방법도 있지만, 이렇게 하는 것이 더 편하니 꼭 기억해서 사용하시기 바랍니다.createApp({ setup() { const action = ref(null); const resultData = ref([{id:1,name:'실행'},{id:2,name:'취소'}]); onMounted(() => { }) return { action, .. 2024. 3. 25. 뷰3 스타일 클래스 인라인 바인딩 (Vue.js 3 Style Class inline Binding) Vue.js 에서 리스트 항목을 표시할 때 반복문을 사용하게 되는데, 특정 조건에 따라서 글자색, 배경색 등 style class 를 변경해야 하는 경우가 많습니다. 여러가지 방법이 많지만 이번에는 if 인라인 형태로 쉽게 처리하는 방법을 설명하겠습니다. Vue.js 3 클래스 인라인 바인딩 {{item.Result}} 위의 코드는 dataLists 반복하면서 Result 값이 합격일 경우 span 태그에 추가하는 방법입니다. 저 또한 이렇게 간단한 방법도 생각이 나지 않아서 방법을 설명해 드립니다. 2024. 3. 19. 실전 꿀팁 + javascript 정수 random 랜덤 난수 만들기 javascript를 사용해서 난수를 만들때 Math.random() 을 활용합니다. 하지만, 그냥 사용할 경우 소수점이하로 나오기 때문에, array, list 등 배열에서 랜덤하게 값을 가져올 경우 제대로 사용할 수 없습니다. 이번 게시물에서는 정수로 랜덤하게 값을 가져오는 방법을 설명하겠습니다. Math.random() 사용법 0 이상 1 미만의 난수 생성하기 function getRandomDecimal() { return Math.random(); } 최소값 최대값 사이의 난수 생성하기 function getRandomRange(min, max) { return Math.random() * (max - min) + min; } 최소값 최대값 사이의 정수 난수 생성하기 // min 2024. 3. 7. javascript, 엔터키 줄바꿈 쉽게 정규식으로 변경 (br 태그) textarea 를 통해서 등록된 내용을 보여 줄 때, 엔터키로 줄바꿈된 내용이 옆으로 붙어 나오게 됩니다. 이럴 경우 엔터키를 br 태그를 이용해서 줄 바꿈하여 나타내는데 많이 사용하는 함수를 알려드립니다. 보통 문자열을 치환하거나 제한을 할 경우에 정규식 표현을 많이 사용하는데, 이번에 알려드리는 방법 또한 정규식을 활용한 함수 예제입니다. function newLineToBr(checkString) { let returnValue = checkString; if (checkString !== '' && typeof (checkString) !== 'undefined') { returnValue = checkString.replace(new RegExp('\r?\n', 'g'), ' '); } ret.. 2024. 3. 5. 이전 1 2 다음
