반응형 팁 & 노하우/Javascript6 vue3 js 목록에서 마우스 오버 시 글자, 버튼 등 나타나게 vue.js 에서 목록에서 Loop 문에서 아이템에 마우스 오버 시 글자 나타나게 하는 방법을 알려드립니다. 소스를 보면 아주 간단합니다. loop 의 key 값을 비교해서 보이게 안보이게 처리하는 것이 특징이며, v-bind:key 값을 index 로 사용해도 됩니다. CSS로 처리하는 방법도 있지만, 이렇게 하는 것이 더 편하니 꼭 기억해서 사용하시기 바랍니다. createApp({ setup() { const action = ref(null); onMounted(() => { }) return { action } } }) .mount('#app') {{item.name}} 선택 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. javascript 천 단위 구분 기호 표시 요즘 Vue, React, Node 등 Javascript 기반 프레임워크를 많이 사용하는 추세입니다. Java, C#, Kotlin 등 Backend 프로그램에 대해서는 체계적으로 공부하는 편이지만, Javascript에 대해서는 체계적으로 배우지 못하는 경우가 많은 것 같습니다. 이번 시간에는 Javascript 정규식 표현을 활용하여 숫자에 천단위 구분기호 (, 콤마)를 추가하는 방법을 간단하게 설명해 드립니다. Javascript 천 단위 구분 콤마 표시 함수 정규식 이용하기 function makeNumberFormat(checkString) { let returnValue = checkString; if (checkString !== '' && typeof (checkString) !== 'u.. 2024. 3. 5. moment "Invalid date" 에러 처리 하기 Javascript Library 중에 날짜 시간 처리가 가장 편한 라이브러리는 moment.js 인 것 같습니다. 예전에는 숫자, 통화 변환 등 처리 작업을 Backend에서 처리했지만, 이제는 API, JSON, Frontend 개발로 변경되면서 Frontend에서 많이 처리하고 저 또한 이러한 방식을 사용합니다. moment "Invalid date" 에러 처리 방법 moment 시간 변환 처리 중 가장 많이 발생하는 것은 날짜 형식이 맞지 않는 문제인데, 변환 후 리턴 값을 받아 보면 "Invalid date" 가 나옵니다. 개발 시간이 부족해서 사용자가 입력하는 값의 데이터 검증을 모두 처리하기도 소홀히 하게 되면 많이 발생하는 문제입니다. 그렇다고 무작정 View 화면에 "Invaild dat.. 2024. 2. 29. 이전 1 다음 반응형