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..

Javascript 에서 함수를 생성하고 해당 함수를 괄호 없이 호출할때가 있다. 함수를 호출할 때 괄호가 있을때와 없을때의 차이점을 알아보자 아래와 같은 예시가 있다. a 라는 함수에 console.log 를 찍는 함수인데 괄호 없이 a 함수를 호출했을 때는 함수 그 자체를 보여준다. 하지만 a(); 처럼 괄호를 붙일 경우 함수 내부에 선언된 console.log 가 정상적으로 찍힌다. 이유는 함수에 () 괄호가 붙을 경우 자바스크립트 함수를 즉시 호출한다. 하지만 함수에 () 괄호가 없을 경우 함수의 주소를 뜻한다. 추가로 아래 예시도 확인하자. setInterval() 을 통해 1초마다 함수를 호출하는 구문이다. 1초마다 a라는 함수를 괄호없이 잘 호출하는걸 볼 수 있다. setInterval() ..