javascript (10) 썸네일형 리스트형 Javascript 정규표현식 - n번째 글자만 '*'로 치환할 때 보통 이름이나 전화번호 같은 개인정보를 이렇게 처리한다. '홍길동'이 실제 데이터이면 '홍*동' 같은 식으로 보여주는 것이다. 서버에서 처리해야 하는 것이 당연하지만, 경우에 따라 프론트에서 처리해도 무방한 데이터도 있다. 그럴때는 이렇게 변환해주면 된다. n번째 문자만 치환하는 콛 아래 코드는 3자리 이상 문자열일 때, 2번째 문자만 '*'로 변환하는 예제이다. 코드를 잘 살펴보면 응용해서 사용할 수 있을 것이다. const replaceSecondChar = (str) => { return str.length >= 3 ? str.replace(/(? { return str.length >= 4 ? str.replace(/(? 부트스트랩 기간 달력 시작/종료일 제한하기 (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='_.. IE에서 [Syntax Error: ':'가 필요합니다] 발생하면 ES6를 사용한 것 오류 잘 되던 것이 IE에서 테스트를 하니 ':'가 필요합니다 오류 메시지가 뜬다. 사정상 Vue를 컴파일하지 않고 httpVueLoader로 불러 사용하고 있는데 코드 중 ES6가 있었기 때문이다. 정확하게는 다음 문제이다. 원인 ES6 문법 중 오브젝트의 프로퍼티로 함수를 지정할 때 다음과 같이 function 키워드를 명시하지 않고 ()축약해서 쓸 수 있다. var methods = { someFunction() { // ... } }; 해결 IE에서는 당연히 안된다. 다음과 같이 고쳐야 한다. var methods = { someFunction : function () { // ... } }; IE 없는 세상에서 살고 싶다. 대한민국 인터넷 브라우저 중 IE 점유율이 이미 10% 밖.. [Vue.js] 체크박스 값을 boolean(true/false) 대신 'Y/N' 으로 바꾸기 상황 Vue.js에서 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 이다. 근데 고객 놈들의 디비는 Y/N 문자로 관리한다. 해결 input의 true-value와 false-value props를 사용한다. 주의할 점은, 이 값은 form submit 시 체크되지 않은 값은 전송되지 않는다는 점이다. 나는 form submit 하지 않고 바인딩된 모델 json을 전송해서 사용하므로 상관없었다. 참고 https://kr.vuejs.org/v2/guide/forms.html#%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4-1 jQuery rotate 이미지 회전 시 함정카드 조심 여러가지 훌륭한 프론트엔드 프레임워크가 많은 시대에 jQuery로 일반적인 CRUD 화면을 개발해야 하는 것은 굉장히 난감한 상황이다. 그러나 제이쿼리의 오래된 역사와 생태계로 인해 UI 개발에는 여전히 jQuery의 여러가지 플러그인 없이는 무언가를 '쉽게' 구현하기 힘들다. jQuery rotate도 그 중 하나이다. 그 이름처럼 무언가를 회전시켜 주는 플러그인이다. jQuery rotate [http://jqueryrotate.com/]http://jqueryrotate.com/ 기본적인 사용법은 워낙 간단해서 공식 홈페이지에 나온 몇 가지 예제로 충분하다. 단순 회전 애니메이션과 함께 회전 애니메이션 시간 조절 완료 후 콜백 무한 회전 이 정도면 회전으로 하는 모든 것을 할 수 있다.. [OpenLayers 3] 경계 좌표 가운데 지점 찾기 (Vector 레이어 가운데 지점) 악명 높은 브이월드를 할 일이 생겼다. 브이월드는 OpenLayers 3를 사용한다. 아주 옛날 버전이다. 2020년 01월 기준 최신 버전은 6.1이다. 메이저 버전이 3이나 차이난다. 어쨌든, GIS는 1도 몰라서 좌표계 어쩌고 고생했지만 가운데 지점을 찾았다. 요구사항 전국 지도에 시도 단위로 히트맵을 각각 클러스터링 한 정보를 그려달라(숫자) 문제 시도 단위로 색칠까지는 했는데 가운데 지점을 못 찾겠다. 해결 GetFeature 어쩌고 해서 좌표 정보를 가져옴. 피쳐 정보로 ol.source.Vector를 만든다. vectorSource.getExtent() 하면 [minX, minY, maxX, maxY] 좌표가 나온다. 참고 Extent는 범위 정보이다. 예컨대 꼬불꼬불 경계 정보로 만들어진 .. 이전 1 2 다음
