나의 IT Note

개인정보 마스킹 보안이 중요시 되기 때문에 이름, 계좌번호, 전화번호 등등의 개인정보에 마스킹은 필수가 되어가고 있다. 성명 마스킹 성명의 맨 앞과 맨 뒤 1자리씩 제외하고 나머지는 *로 치환된다. 이름이 외자인 경우에 성은 노출이 되고 이름은 *로 치환된다. 성이 2자인 경우에는 성과 이름 구분없이 성명의 맨 앞과 맨 뒤를 제외한 나머지가 *로 치환된다. 예시) 선우길동 → 선**동 성만 입력 또는 이름이 외자인데 이름만 입력하여 이름값이 1자리수라면 해당 이름이 그대로 노출된다. function maskName(name) { if (name.length === 1) { return name; } else if (name.length === 2) { return name.slice(0, 1) + '*'..

숫자 3자리마다 콤마(,) 찍기 숫자 3자리마다(천단위) 콤마(,)를 찍는 2가지 방법 정규식(Regular Expression) 사용 var number = 100000; var number2 = 100000.123; function addCommas(amount) { return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } console.log(addCommas(number)) //100,000 console.log(addCommas(number2)) //100,000.123 toLocaleString() 함수 사용 number.toLocaleString(locales, options) toLocaleString() 함수는 숫자를 로컬의 l..

카운트 증가 / 숫자 증가 requestAnimationFrame을 사용하여 카운트를 증가시키는 스크립트로 duration을 통해 애니메이션의 시간을 조절할 수 있다. 0 // 모든 counter 요소를 가져옵니다. var counterElements = document.querySelectorAll('.counter'); // 각각의 counter 요소에 대해 애니메이션을 적용합니다. counterElements.forEach(function(counterElement) { var countLimit = parseInt(counterElement.getAttribute('data-count'), 10); var duration = 1000; // 애니메이션 시간 (ms) var start = null;..

디지털 시계 구현 Loading... 24시간으로 구현 function updateClock() { var now = new Date(); var hours = now.getHours().toString().padStart(2, '0'); var minutes = now.getMinutes().toString().padStart(2, '0'); var seconds = now.getSeconds().toString().padStart(2, '0'); var timeString = `${hours}:${minutes}:${seconds}`; document.getElementById('clock').textContent = timeString; } // 매 초마다 시계 업데이트 setInterval(upd..

페이지 자동으로 이동하기 현재 페이지에서 다른 페이지로 별도 액션없이 자동으로 이동시키는 방법 메타태그 대기시간은 숫자로 입력을 해야 하며 0이면 바로 이동하며, 5를 입력 시 5초후 이동합니다. 스크립트 // location.href 사용 location.href="http://이동할 주소"; // location.replace 사용 location.replace('http://이동할 주소'); location.href와 replace 차이점 location.href location.replace 기능 새로운 페이지로 이동 기존 페이지를 새로운 페이지로 변경 뒤로가기 가능 불가능 형태 속성 메서드 히스토리 저장됨 저장안됨 용도 일반적인 URL이동 뒤로가기가 안되므로 보안이 필요한 페이지나 히스토리 기록..

다음요소 찾기 JavaScript에서 기본적으로 제공하는 nextElementSibling 기능은 단순히 선택된 요소의 다음 요소만 찾아주기에 jQuery와 동일한 기능을 JavaScript로 만들어봤다. next() jQuery의 next()와 동일한 기능을 JavaScript로 구현 매개변수 selector가 제공되는 경우에는 다음 요소가 selector와 일치하는 경우에만 반환을 하며 일치하지 않는 경우에는 null 을 반환한다. function next(ele, selector) { var nextEl = ele.nextElementSibling; if (!selector || (nextEl && nextEl.matches(selector))) { return nextEl; } return nul..

이전요소 찾기 JavaScript에서 기본적으로 제공하는 previousElementSibling 기능은 단순히 선택된 요소의 이전 요소만 찾아주기에 jQuery와 동일한 기능을 JavaScript로 만들어봤다. prev() jQuery의 prev()와 동일한 기능을 JavaScript로 구현 매개변수 selector가 제공되는 경우에는 이전 요소가 selector와 일치하는 경우에만 반환을 하며 일치하지 않는 경우에는 null 을 반환한다. function prev(ele, selector) { var prevEle = ele.previousElementSibling; if (!selector || (prevEle && prevEle.matches(selector))) { return prevEle; ..

String.length 문자열의 길이를 반환하는 속성(property)이다. 문법(Syntax) String.length 숫자 타입의 경우 undefined를 반환한다. 공백도 길이에 포함된다. let str = 'hello world'; let blank = ' '; // 공백 3칸 let num = 123; str.length; // 11 blank.length; // 3 num.length; // undedined

Number() 문자열을 숫자로 변환해주는 함수 문법(Syntax) Number(value) 매개변수(parameter) 1. value 문자열 또는 문자열을 값으로 하는 변수 let str = '123' let num = Number(str); // 123 typeof(num); // 'number' Number('123'); // 123 숫자를 문자열로 변경할 때는 String() 사용 [JavaScript] String() 숫자를 문자열로 타입 변환 - 자바스크립트 String() 숫자를 문자열로 변환해주는 함수 문법(Syntax) String(thing) 매개변수(parameter) 1. thing 문자열로 변환할 값 숫자 또는 숫자를 값으로 하는 변수 let num = 123; let str =..

String() 숫자를 문자열로 변환해주는 함수 문법(Syntax) String(thing) 매개변수(parameter) 1. thing 문자열로 변환할 값 숫자 또는 숫자를 값으로 하는 변수 let num = 123; let str = String(num); // '123' typeof(str); // 'string' String(123); // '123' 문자열을 숫자로 변경할 때는 Number() 사용 [JavaScript] Number() 문자열을 숫자로 타입 변환 - 자바스크립트 Number() 문자열을 숫자로 변환해주는 함수 문법(Syntax) Number(value) 매개변수(parameter) 1. value 문자열 또는 문자열을 값으로 하는 변수 let str = '123' let num..