input type="text" 형식으로 된 input 태그에 전화번호 입력 시 앞자리 숫자에 따른 자동 하이픈 삽입이필요하여 구현하였다. Javascriptconst cellNumHyphen = (target) => { let value = target.value; if (!target.value) { return ""; } value = value.replace(/[^0-9]/g, ""); const result = []; let restNumber = ""; // 시작번호 02 if (value.startsWith("02")) { result.push(value.substr(0, 2)); restNumber = va..

실행 컨텍스트란? Javascript 실행 컨텍스트란 우리가 작성한 자바스크립트 코드가 실행되는 환경을 의미한다. 여기서 실행 컨텍스트를 보기전에 자바스크립트 동작 원리에 대해 간단하게 봐보자. 자바스크립트는 한번에 한 코드밖에 실행시키지 못한다. 그래서 싱글 쓰레드라고 부른다. 아래의 예시를 보자. 결과를 보기전 우리가 예상할 수 있는 결과는 2, 4, 6 이지만 실제 결과 값은 2, 6, 4 이다. 이유는 setTimeout, 비동기통신 등 바로 실행시킬수 없는 코드는 대기실로 보내어 실행될 수 있는 코드가 될 때까지 대기하고 바로 실행될 수 있는 코드는 "스택" 이라는 공간에서 코드를 실행 시킨다. 바로 실행될 수 없는 코드들이 실행될 수 있는 코드가 되면 큐라는 공간으로 들어와 스택 공간이 완전히..

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//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\""+..