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 에서 Select Box option 값을 추가 및 삭제해보자 아래와 같이 Select Box 가 존재한다.     선택     전체     제목     내용     작성자     제목+내용     제목+내용+작성자 $("#server_seq option[value='전체']").remove();특정값을 삭제하는 문장이다. select box 의 option 중 value 값이 전체인 option 값을 삭제한다. $("#server_seq").append("특정값");특정값을 추가하는 문장이다. option 의 value 값은 "특정값" 이며 보여지는 값은 "특정값"이다. $("#server_seq").children('option:not(:first)').remove();첫..

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

아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다. 시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다. HTML JavaScript // 시작날짜(min 속성) let sDate = new Date(); // 종료날짜(max 속성) let eDate = new Date(); sDate.setDate(sDate.getDate() + 1); // 시작날짜의 날짜를 +1일 한다. eDate.setDate(eDate.getDate() + 28); // 종료날짜의 날짜를 +28일 한다. let minStr = sDate.toISOString().split('T')[0]; let maxStr = eDate.toISOString(..