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 //Javascript let queryAll = document.querySel..

개발환경 : 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\""+..

개발환경 : SpringBoot, Thymeleaf, JQuery, javascript, DataTables JQuery 의 Datatables 를 사용하여 화면 구현 중 DataTables 옵션에 있는 페이징 기능을 사용하지 않고 직접 페이징 기능 구현이 필요하여 개발을 진행했다. 필요한 pagination 조건 한 그룹의 선택할 수 있는 페이지 수는 10개이다. 한 페이지의 게시물 개수는 select box 를 사용하여 보여준다.(select box option : 10개, 100개, 1000개, 10000개) 페이지 버튼 이외에 이전, 다음, 맨 앞쪽이동, 맨 뒤쪽이동 버튼이 존재한다. Pagination 기능 구현 일단 페이징 기능을 구현하기 위해선 총 4가지의 값이 필요하다. 현재 페이지의 페이..

innerHTML 프로젝트 개발과정 중 html 파일 전체 내용을 리턴하여 사용하는 곳이 있었다. 항상 아래의 jquery 의 .html() 을 사용하여 넣었으나 최대한 바닐라스크립트를 사용하기 위해 변경 중에 넘긴 html 데이터 중 스크립트가 실행이 되지 않았다. // Javascript axios({ method: 'post', url: Request URL, params: {action_type : action_type, site_code : site_code} }).then(function(result){ // jquery 의 .html() ==> html 내 스크립트 실행됨 $('#modalTest').html(result.data); // innerHTML ==> html 내 스크립트 실행 ..