자바스크립트

[JS] 특정 영역 밖을 클릭 했을 때 감지하기

예제코드 See the Pen JS OutsideClick by hyukson (@hyukson) on CodePen. 코드 class useOutsideClick { ref = null; onClickOutside = null; constructor(ref, onClickOutside) { this.ref = ref; this.onClickOutside = onClickOutside; document.addEventListener('mouseup', this.handleClickOutside); } handleClickOutside = (event) => { if (this.ref && !this.ref?.contains?.(event.target)) { this.onClickOutside(this);..

[JS] 배열 초기화 시키기 (빈 배열)

3가지 방법 모두, 원본 배열에서 값을 제거하는 참조 방식을 사용합니다. length 속성 const array = [1, 2, 3, 4, 5]; array.length = 0; 배열의 길이를 수정하면 해당 길이만큼 배열의 크기가 바꿔지며 0으로 지정하면 배열은 초기화됩니다. splice() 메서드 const array = [1, 2, 3, 4, 5]; array.splice(0); // 2번째 인자가 없으면 모든 값을 제거 splice(0)을 사용하면 처음부터 끝까지 원본 배열에서 잘라 반환하기에 초기화를 시켜줄 수 있습니다. pop() 메서드 const array = [1, 2, 3, 4, 5]; while(array.length) array.pop(); pop() 메서드는 배열의 마지막에 존재하는 ..

[JS] Textarea 높이 자동 조절

예제 코드 See the Pen Textarea Auto Height by hyukson (@hyukson) on CodePen. 코드 높이를 조절할 textarea 요소를 준비해줍니다. textarea { width: 240px; height: 30px; } textarea의 기본 Height를 지정해주고, 이 크기는 JavaScript 코드에서도 사용하게 됩니다. const DEFAULT_HEIGHT = 30; // textarea 기본 height const $textarea = document.querySelector('#textarea'); CSS에서 지정한 Height를 'DEFAULT_HEIGHT' 변수에 저장시켜줍니다. document.querySelector() 선택자로 textarea ..

[JS] 객체에 특정 KEY값이 존재하는지 확인하기

includes() 사용 const obj = {a: false, b: true, c: null}; Object.keys(obj).includes('a'); // true Object.keys(obj).includes('abc'); // false Object.keys() 메서드로 객체의 모든 키값을 담은 배열을 생성해 주고, includes() 메서드로 해당 키가 존재하는지 판별해 줍니다. in 연산자 사용 const obj = {a: false, b: true, c: null}; 'c' in obj // true 'abc' in obj // false in 연산자를 사용하면 간단한 코드로 key가 존재하는지 간단하게 확인할 수 있습니다. obj.prototype.test = false; 'test' ..

[JS] forEach(), map() break 시키기

일반적인 방법으로는 forEach(), map()를 break 시킬 수 없습니다. 코드 try { [1, 2, 3, 4, 5, 6, 7].forEach((value) => { console.log(value); if (value === 2) { throw value; } }); } catch (e) { console.log("Stop! " + e); } forEach, map 메서드에서는 break를 걸 수 없습니다. “return false”를 사용하라는 방법이 소개되곤 반복이 멈추지는 않습니다. forEach, map 메서드에서는 try, catch 문법에서 강제로 에러를 일으켜 루프문을 벗어나게 하는 방법을 사용합니다. some, every 메서드 사용하기 some(), every() 메서드는 반환..

[JS] 소수점 계산 오차 해결

원인 컴퓨터에서 계산을 할 때는 10진수 대신에 0과 1만을 사용하는 2진수로 계산합니다. 0과 1만을 사용하여 계산하기에 10 진수를 2진수로 바꾸는 변환과정이 필요합니다. 이때 컴퓨터 메모리에 존재하는 한계로 인해서 연산 중 발생한 무한소수의 중간을 잘라서 유한 소수로 저장해 버립니다. 이 과정에서 미세한 오차가 발생하는 것입니다. 첫 번째 방법 Number((0.2 + 0.4).toFixed(1)) // 0.6 Math.round((0.2 + 0.4) * 10) / 10; // 0.6 Number.toFixed(n) → 소수점 n자리까지 반올림 Math.round((a + b) * 10) / 10 → 소수점 첫째 자리까지 반올림 toFixed() 메서드는 문자열로 반환되기에 Number로 감싸서 숫..

[JS] 코드 실행 지연 시키기 (delay)

흔히 알려진 시간을 지연시키는 방법으로는 setTimeout() 함수가 있습니다. 문제점 function delayTest() { console.log("__코드 시작__"); setTimeout(() => { // 5초 후 실행 console.log("실행! 1"); setTimeout(() => { // 3+5초 후 실행 console.log("실행! 2"); }, 5000); }, 3000); } 가장 쉽게 시간을 지연시킬 수 있지만, 다음과 같은 상황에서는 사용하기에 어려움이 존재합니다. 중첩해서 5초 후에 코드 실행과 3초 후에 코드 실행이 되어야 하는 상황입니다. 위 코드와 같이 setTimeout callback 안에 setTimeout을 넣어줘야 하는 문제점이 발생합니다. 계속 함수가 늘어..

[JS] 눈 내리는 효과 만들기

완성 코드 See the Pen Canvas Snow by hyukson (@hyukson) on CodePen. 전체코드(보기) 더보기 const $canvas = document.querySelector("canvas"); const ctx = $canvas.getContext("2d"); const getRandomRadius = () => Math.random() * 1 + 0.5; const getRandomSpeed = () => Math.random() * 0.3 + 0.1; const getRandomDir = () => [-1, 1][Math.floor(Math.random() * 2)]; const Snow = { data: [], canvasWidth: $canvas.clientWid..

[JS] 개인정보 마스킹 처리 (이름, 전화번호, 주민번호, 이메일, 계좌번호..)

정규식으로 마스킹하는 방법이 존재하지만, 익스플로러에서 호환성 문제로 동작하지 않는 이슈가 존재합니다. 이름 function maskingName(name) { if (name.length

[JS] 시작일과 종료일 사이 모든 날짜 구하기

시작일(YYYY-MM-DD) ~ 종료일(YYYY-MM-DD) 사이의 모든 [시, 일, 월, 년] 단위의 배열을 만들 수 있습니다. See the Pen Untitled by hyukson (@hyukson) on CodePen. 코드 const getDateRange = (startDate, endDate) => { const start = new Date(startDate); const end = new Date(endDate); const result = []; while (start

[JS] 뒤로가기 막기, 뒤로가기(이전페이지) 링크 만들기

사용자가 방문한 모든 URL을 포함하는 객체로는 history라는 JavaScript 객체가 존재합니다. 뒤로가기 링크 제작 history.back(); // 이전페이지로 이동 History 객체에는 사용자가 방문한 모든 URL을 스택 방식으로 쌓아놓습니다. 이를 위에 코드로 사용하면 Array.pop() 같은 효과가 나오게 됩니다. history.go(-1) // 이전페이지로 이동 history.go(-2) // 이번페이지 -2번 클릭한 것과 동일한 동작 가장 뒤에 있는 URL을 빼는 메서드가 존재한다면, 특정 URL을 지정하는 메서드도 존재합니다. history.go() 메서드는 인자로 전달하는 수만큼 페이지를 이동합니다. 뒤로가기 막기 // 스택 추가 history.pushState(null, nu..

[JS] 중복없는 특정 범위의 랜덤 숫자 배열

코드 예제 See the Pen Lotto Number by hyukson (@hyukson) on CodePen. Set 객체 function getRandomNumber(max, min = 1) { return Math.floor(Math.random() * max) + min; } function getUniqueNumberList(count, max, min = 1) { const list = new Set(); while (count > list.size) { list.add(getRandomNumber(max, min)); } return [...list]; } getUniqueNumberList(3, 10); // [4, 7, 9] Set 객체를 활용하면 중복된 값을 제거할 수 있습니다. 매..