프로그래밍/Javascript (17) 썸네일형 리스트형 Javascript 정규표현식 - n번째 글자만 '*'로 치환할 때 보통 이름이나 전화번호 같은 개인정보를 이렇게 처리한다. '홍길동'이 실제 데이터이면 '홍*동' 같은 식으로 보여주는 것이다. 서버에서 처리해야 하는 것이 당연하지만, 경우에 따라 프론트에서 처리해도 무방한 데이터도 있다. 그럴때는 이렇게 변환해주면 된다. n번째 문자만 치환하는 콛 아래 코드는 3자리 이상 문자열일 때, 2번째 문자만 '*'로 변환하는 예제이다. 코드를 잘 살펴보면 응용해서 사용할 수 있을 것이다. const replaceSecondChar = (str) => { return str.length >= 3 ? str.replace(/(? { return str.length >= 4 ? str.replace(/(? jQuery UI sortable을 사용한 드래그하여 목록 순서 변경, handle 옵션으로 특정 버튼만 적용할 때 유의사항 jQuery-ui sortable() https://api.jqueryui.com/sortable/ jQuery-ui의 sortable 함수는 특정 element 하위 목록을 드래그하여 정렬할 수 있게 한다. 적용 가능한 태그는 li, div 등 크게 상관없는 것 같다. 그림은 카카오지도 길찾기 영역이다. 클라이언트는 실내지도의 길찾기 기능을 구현해 달라고 했다. 퍼블에서 UI를 만들어 줬는데, 그림의 초록색 부분이 클릭하여 드래그하는 버튼 영역이다. 그런데 특정 element만 sortable 핸들러로 사용할 수 있는 handle 옵션을 아무리 넣어봐도 적용되지 않는다. 알고보니 기본적으로 클릭 시 이벤트가 있는 button, input(클릭 시 커서) 등은 sortable의 클릭 이벤트가 preven.. ckeditor / toolbar 없애기 CKEDITOR 툴바 없애기 CKEDITOR를 사용 중인데, 툴바를 안보이게 해달라고 한다. 텍스트만 입력하겠다고.. 그러면 textarea를 쓰지 왜 툴바를 쓰냐 싶지만 아무튼 알아보자. 없애야 할 부분이다. CKEDITOR.replace('textareaId', { toolbar: [] }); 툴바를 커스텀 정의하는 옵션을 주면서 빈 배열을 넣어주었다. 물론 이렇게 툴바 영역은 남아있다. HTML5 / input type="number" maxlength 키보드 입력 제한하기 input number 키보드 입력 제한(자리수 제한, maxlength) input type number는 maxlength 어트리뷰트가 없다. 숫자 최소 최대값을 지정하는 min, max는 있지만 입력 자체는 가능하며 submit이 불가능할 뿐이다. 그런데 카드번호 입력 등의 form에서 자리수 입력을 제한해달라는 요청이 있었다. 다음처럼 input 이벤트를 잡아 해결하였다. 해결 type이 number이며 maxlength 어트리뷰트가 있는 element를 찾아 입력 자리수를 제한한다. $('input[type=number][maxlength]').on('input', function(ev) { var $this = $(this); var maxlength = $this.. 부트스트랩 기간 달력 시작/종료일 제한하기 (Bootstrap datepicker, daterange) 그림처럼 시작일보다 빠른 종료일을 선택할 수 없도록 제한한다. (반대 경우도 마찬가지) 문제 페이지마다 달력을 각자 구현해서 어디는 언어나 날짜 포맷 등이 모두 달랐다. 그리고 화면에 따라 달력 방향이 엉뚱하게 input 위로 나오는 것 등이 있어, 표준 마크업으로 정리하고 일괄 선언하기로 했다. 그 중 대부분 목록화면의 검색조건에 사용되는 기간 검색에 시작일/종료일 선택 제한을 추가했다. 시작일은 종료일보다 늦을 수 없고, 종료일은 시작일보다 빠를 수 없게 설정한다. Bootstrap datepicker 공식 문서를 보니 startDate와 endDate 항목을 구현하면 된다고 한다. setStartDate와 setEndDate 메소드도 있다. 필요한 것이 모두 있으니 문제될 것이 없다. 아래처럼 간단.. 같은 element에 등록된 여러 이벤트 리스너 호출을 막는 stopImmediatePropagation() 문제 여태 preventDefault()나 stopPropagation()을 사용할 일은 많았다. 그런데 오늘 모달 팝업 개발 중, 공통에서 처리해둔 닫기버튼 이벤트 전에 confirm을 띄워야 하는 일이 생겼다. 하나의 엘리먼트에 다른 클릭 이벤트 리스너를 추가해서 이벤트 전파를 막아야 하는 것이다. 결론저으로 앞에 언급한 두 가지 모두 아니고, stopImmediatePropagation()을 사용해야 한다. 정리 preventDefault - 기본 동작을 막는다. (예컨대 submit 버튼이라면 form submit을 막음) stopPropagation - 이벤트 버블링을 방지한다. stopImmediatePropagation - 같은 element 동일한 이벤트(예:클릭)에 여러 리스너가 등록되어.. Spring / jQuery ajax 사용시 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 오류 오류 jQuery로 $.ajax 호출하는데 다음과 같은 오류가 발생했다. Uncaught TypeError: Cannot read property 'toLowerCase' of undefined 원인을 알아보니 스프링 시큐리티 csrf 설정 관련 오류이다. 사용자 인증 되지 않은 상태(비로그인)에서는 $(document).ajaxSend ajax 설정에서 token과 header가 null로 넘어가서 발생한 오류이다. 해결 token, header null 체크를 추가했다. 해결 전 $(function () { var token = $("meta[name='_csrf']").attr('content'); var header = $("meta[name='_.. 아이디, 패스워드 패턴 검사는 정규식으로 하자 레거시 소스 분석 중 이런 것을 보았다. var alphaDigit = "abcdefghijklmnopqrstuvwxyz1234567890"; for (i=0; i < userId.length; i++) { if (alphaDigit.indexOf(userId.substring(i, i+1)) < 0) { alert("아이디는 영문소문자와 숫자의 조합만 사용할 수 있습니다."); return false; } } 여기 뿐만 아니라 여기저기에 코딩 초보의 티가 많이 나는 소스이다. 문자열 패턴 검사에는 정규식이라는 좋은 것이 있다. 정규표현식 혹은 정규식이라고 검색하면 많이 나온다. 정규식을 사용하면 위 코드를 아래처럼 바꿀 수 있다. if (!/^[a-z0-9]{4,10}$/gi.test(userId)) .. 이전 1 2 3 다음
