new Promise 로 return 을 하는 함수가 있다.Promise 함수 내부에서 jquery 의 ajax 를 통해 api 요청을 한 후 count 값이 0일 경우 "return;" 을 사용했더니promise 를 await 로 호출한 부분 이후의 로직이 실행되지 않았다. 이유는 new Promise 가 resolve 또는 reject 를 줄 때 까지 await 는 계속 대기하고 있기 때문에이후 로직이 실행되지 않는다. new Promise 함수 예시function checkData() { return new Promise((resolve, reject) => { $.ajax({ url: '/api/data', success: (response..

Jquery 로 .html() 을 사용하여 동적 HTML 삽입 시 기존 노드와 기존 이벤트 리스너가 삭제되지만.on() 으로 등록했던 이벤트 리스너들은 Jquery 가 재 바인딩을 해줘 이벤트를 사용할 수 있었다. 하지만 vanilla JS 의 .innerHTML 을 통해 동적 HTML 삽입 시 기존 노드 및 기존 이벤트 리스너가 삭제된 후.addEventListener() 를 통해 이벤트를 수동으로 재등록 해줘야 사용할 수 있다. 이때 vanilla JS 로 동적 HTML 삽입 시 이벤트 리스너 및 스크립트를 실행할 수 있는 방법은공통 함수를 호출하여 함수 내 스크립트 태그내용을 불러와서 재등록 해주면 된다. 본인은 모달창을 띄울때 모달창 내용을 동적 HTML 삽입하여 띄웠다. const initial..

환경 = Spring Boot, JQuery, thymeleaf Spring Boot 와 Thymeleaf  환경에서 JQuery Ajax 요청 중 Spring Security 의 CSRF Token을 헤더에 기본적으로설정하기 위해 찾아보다가 ajaxSend 함수와 ajaxSetup() 의 beforeSend 를 보아 정리한다.  .ajaxSend(function(e, xhr, options){ ... })ajaxSend 는 JQuery 에서 Ajax 요청을 보내기 전에 실행시킬 함수를 정의한다.즉, Ajax 이벤트 처리기이다. Ajax 요청을 보내기 전에 매번 ajaxSend() 함수 이벤트를 발생시킨다. Ajax 요청을 서버에 보내기전에 공통적으로 처리해야할 것이 있을 때 사용한다. 사용법// JQu..

개발 환경 : Jquery, datepicker datepicker 를 사용해 시작날짜와 종료날짜를 선택하는데 최대 10일까지 선택할 수 있도록기능 구현이 필요했다.시작 날짜를 선택했을 때 종료날짜와 비교해 10일을 초과했을 경우 시작날짜 기준으로 종료날짜를시작날짜 + 10일로 변경하도록 기능 구현했다. HTML시작날짜 : 종료날짜 : javascript $('.callflow-date-start').datepicker({ changeMonth: true, changeYear: true, selectOtherMonths: true, showButtonPanel: true, yearRange: "c-50:c+50", dateFormat: "yy-mm-dd", onSelec..

datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다.// html// javascript$('#manager-mst-view-table').DataTable({ searching : true, initComplete: function() { let api = this.api(); $('#manager-mst-view-table thead tr') .clone(true) .addClass('filters') .appendTo('#manager-mst-view-table thead'); //columns 들의 eq(0) 인 head 들만 반복한다. api...

DataTables 를 사용하면서 테이블 column 칸에 데이터 양이 많아 모두 보여줄 수 없을 때sliding 기능을 사용한다. DataTables Columns 설정table = $('#manager-usedHistory-table').DataTable({ dom : "Bfrtip", paging : false, searching : false, buttons : [], language:eval(datatable_lang), processing: true, columns: [ ...이하생략 { data: null, className: "text-center", //defaultContent: ""+..