클로저(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\""+..

개발환경 : 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 내 스크립트 실행 ..

개발환경 : SpringBoot, Jquery 필요한 input 태그 데이터와 다중 이미지 파일을 업로드 해야하는데 에러상황이 많아 정리 겸 작성한다. 아래 이미지와 같이 String 형 데이터와 int 형 데이터, 다중 이미지 파일이 존재한다. 다중 이미지 파일은 아래와 같다. 이제 실제적으로 javascript 코드를 봐보자 Javascript(Jquery) let formData = new FormData(); formData.append('b_title', 'oboTest'); formData.append('server_seq', 'oboTest2'); formData.append('b_content', 'oboTest3'); fileList.forEach((data, index) => { for..