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: ""+..

실행 컨텍스트란? Javascript 실행 컨텍스트란 우리가 작성한 자바스크립트 코드가 실행되는 환경을 의미한다. 여기서 실행 컨텍스트를 보기전에 자바스크립트 동작 원리에 대해 간단하게 봐보자. 자바스크립트는 한번에 한 코드밖에 실행시키지 못한다. 그래서 싱글 쓰레드라고 부른다. 아래의 예시를 보자. 결과를 보기전 우리가 예상할 수 있는 결과는 2, 4, 6 이지만 실제 결과 값은 2, 6, 4 이다. 이유는 setTimeout, 비동기통신 등 바로 실행시킬수 없는 코드는 대기실로 보내어 실행될 수 있는 코드가 될 때까지 대기하고 바로 실행될 수 있는 코드는 "스택" 이라는 공간에서 코드를 실행 시킨다. 바로 실행될 수 없는 코드들이 실행될 수 있는 코드가 되면 큐라는 공간으로 들어와 스택 공간이 완전히..

javascript 를 사용해 DOM Element 요소를 불러와 style 및 css 를 처리가 필요할때가 있다. 보통 한개의 css style 을 처리해야할 땐 아래와 같이 한다. document.getElementById('styleId').style.display = 'none'; document.getElementById('styleId').style.color = 'red'; 하지만 DOM Element 의 style 데이터가 여러개일 경우와 여러개를 변경 해야할 때가 있는데 이때 문자열을 사용하는 cssText() 를 사용한다. cssText() 는 문자열을 사용해 불러온 Element 의 전체 스타일을 변경하기 때문에 주의해야 한다. document.getElementById('id값')...

클로저(Closure)란?클로저란 자바스크립트 고유의 개념이 아니라 ECMAScript 에는 정의되어 있지 않다.MDN 에는 아래와 같이 정의하고 있다.“A closure is the combination of a function and the lexical environment within which that function was declared.”클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.위 정의를 보면 도무지 이해할 수가 없다. 아래의 예시를 보며 확인해보자.function parentF(){ var x = 10; var childF = function(){ console.log(x); } childF();}par..

Javascript 를 개발하다가 배열과 유사 배열 객체의 차이점을 알아보기 위해 작성한다. 배열(Array)배열은 우리가 개발하면서 많이 접해봤다. let arr = [1, 2, 3, 4];console.log(arr); 하지만 유사 배열 객체는 배열처럼 보이지만 key가 숫자이고 length 값을 가지고 있는 "객체" 이다. 유사 배열 객체Javascript 에서 querySelectorAll 이나 document.body.children 으로 DOM Element 를 가져오면유사 배열 객체에 담겨서 온다. 아래 예시는 Bootstrap 5 의 tab 버튼을 사용하여 보여준다. // HTML버튼1버튼2버튼3//Javascriptlet queryAll = document.querySelectorAll(..

개발환경 : Spring Boot, javascript, html, jquery Controller.java import org.springframework.http.HttpHeaders; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; public ResponseEntity callListFullDownload(){ HttpHeaders header = new HttpHeaders(); header.add("Content-Type", "text/csv; charset=MS949"); header.add("Content-Disposition", "attachment; filename\""+..