옵셔널 체이닝(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: { ..

form 태그에 추가되어 있는 태그를 제외하고 다른 데이터를 파라미터로 추가 해야할 경우 사용한다.구성환경 : Spring boot + Thymeleaf 템플릿엔진 + Jquery html 저장 script Jquery 의 .serialize() 함수를 사용하면 Form 태그 안의 데이터들을 한번에 모두 보낼 수 있는 데이터로 직렬화 해주기 때문에 사용한다. Form data를 .serialize() 함수를 통해서 데이터 직렬화를 시키면 아래 이미지와 같다.위 이미지와 같이 "&" 표시와 함께 데이터가 표시된다. .serialize() 함수를 통해 form_data에 저장하고 추가할 데이터는 "&변수명=변수값" 으로 문자열을 추가해준다.그런 다음 .submit() 함수를 통해 Controll..

웹 화면을 구현하면서 날짜뿐만이 아니라 시간까지 필요할때가 있다. 이때 jquery의 datetimepicker 라이브러리를 사용한다. 환경구성은 Spring Boot + Thymeleaf 템플릿 엔진 + jquery 사용 1. 다운로드 위치https://xdsoft.net/jqplugins/datetimepicker/ DateTimePickerDateTimePicker jQuery plugin select date and time Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. Source code on Git..