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

textarea 태그 에디터인 summernote 를 사용하여 이미지 업로드를 진행하면서 커스텀 할 일이 있어 callbacks 옵션의 onImageUpload를 사용했다. 자세한 내용은 홈페이지 api를 확인해주세요 https://summernote.org/deep-dive/#callbacks Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org onImageUpload 속성은 summernote의 이미지 업로드 시 발생하는 이벤트 핸들러라고..

호이스팅이란? Javascript 에서 var 키워드 변수나 함수는 선언 위치와 관계 없이 다른 코드 실행전에 변수 및 함수 선언과 초기화가 이루어지는걸 의미한다. var 키워드 변수는 선언 및 초기화가 한꺼번에 이루어지며,함수 선언문의 함수는 선언 및 초기화 그리고 할당까지 모두 이루어진다. 호이스팅을 알기 전에 변수 생성단계를 먼저 알아야 한다. 변수 생성 단계 자바스크립트는 3가지 단계를 거쳐 변수를 생성한다. 1. 선언단계 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 2. 초기화 단계 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined 로 초기화 된다. 3. 할당 단계 undefined 로 초기화된 변수..

input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..