modal id 값은 각각 아래와 같다. 1. manageDnisDialog 2. manageDnisLicenceCountDialog 레이어 팝업창을 2개 띄우기 위해 jquery ajax를 사용하여 Controller 에서 html 코드를 받아온 후 modal 태그에 직접 넣었다. // 첫번째 modal 레이어 팝업 $.ajax({ cache : false, type : 'POST', dataType : "html", url : menu_href, data : { dnis : dnis, action_type : action_type }, success : function(data) { $('#manageDnisDialog').html(data); //html data가 담길 target div $('#..

Javascript 의 "=="는 Equal Operator 이고, "==="는 Strict Equal Operator 이다. ==는 서로 다른 변수 유형이지만 변수 값을 기반으로 유형을 수정하여 비교한다. 즉, ==는 변수 값이 같으면 true를 반환하고, === 는 변수의 유형까지 비교하여 반환한다. == : 서로 다른 유형의 두 변수의 값을 비교 === : 엄격한 비교를 하는것으로 변수의 값 뿐만 아니라 변수의 유형까지 비교한다. == ==는 a == b 라고 했을 때 a 와 b 의 값이 같은지를 비교해서 같으면 true, 다르면 false 라고 한다. 예시) 0 == false // true 2 == "2" //true (변수의 유형을 자동변환) console.log(typeof 2); //num..

옵셔널 체이닝(Optional Chaining)은 ES2020에서 등장한 새로운 연산자로서 '?.' 형태로 쓰인다. 접근하는 데이터가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 참조된 값이 null 혹은 undefined 여도 에러로 뱉지 않고 undefined 값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다. 옵셔널 체이닝이 필요한 이유) 아래와 같이 user 객체의 info.name에 접근했지만 읽을 수 없는 TypeError가 나타났다. 당연히 존재하지 않는 값에 접근 했기 때문에 에러가 발생한다. const user = {}; console.log(user.info.name); * TypeErro..

* jquery $(''#subMenuDialog") * document.getElementById("subMenuDialog") 이 두개는 같은 DOM 데이터를 불러오는건 동일하다. $("#subMenuDialog") 처럼 jquery 를 이용해 DOM의 id를 불러올때는 jquery 의 객체를 반환한다. 그리고 document.getElementById("subMenuDialog") 를 이용해 id 값을 부를땐 DOM 객체 자체가 넘어온다. 아래 예시를 확인해보자 예를 들기 위해 bootstrap의 modal 창을 subMenuDialog 라는 id 값으로 생성하여 불러온다. 아래와 같이 html 코드가 있다. > document.getElementById("subMenuDialog") 를 통해 불러..

환경구성 : Spring Boot + Jquery + Thymeleaf Jquery ajax를 통해 Spring Boot Controller로 데이터를 보낼때 415 에러, 400 에러가 났다. 결론1. Controller 로 ajax를 통해 Json 데이터를 보낼땐 String 형태로 보내기HTTP 프토로콜 요청의 본문(Body) 에 들어가는 데이터는 문자열이어야 한다.Ajax 또는 Axios 를 통해 요청을 보낼 때 Javascript 객체를 그대로 보낼수는 없고문자열로 직렬화 해야한다. 방법const user = { name: "홍길동", age: 30 };axios.post('/api/test', JSON.stringify(user), { headers: { 'Content-Type': 'app..

가장 중요한 ordering의 옵션을 true로 설정한다.그 다음 rowReorder 옵션에 dataSrc 속성을 통해 순서 재정렬을 위한 seq 번호를 설정한다. * ordering 옵션을 설정 안할경우 테이블 리스트의 순서가 변경되지 않는다.let bannerDataTableOption = { scrollCollapse : false, select : false, language:eval(datatable_lang), dom : "t", autoWidth: false, ordering: true, searching: false, // 검색 기능 paging: false, //페이징 기능 processing: true, rowReorder: { ..