react

[JS] 소수점 존재여부 확인하기

코드 function hasDecimal(number) { return number % 1 !== 0; } hasDecimal(123); // false hasDecimal(123.45); // true number % 1은 숫자를 1로 나눈 나머지를 계산하는데, 정수가 아니면 0이 아닌 값을 반환하는 점을 이용한 코드입니다. 자바스크립트에서는 문자열에 대해서 나머지 연산자를 사용해면 똑같은 0의 결과가 나오게 됩니다. 오직 숫자만 판별하기 function hasDecimal(number) { return typeof number === 'number' && number % 1 !== 0; } hasDecimal('123.45'); // false hasDecimal(123.45); // true 숫자가..

[JS] 검색어 자동완성 기능

위와 같은 자동완성 기능은 우리가 흔히 접할 수 있는 UI 요소입니다. ※ 초성검색 적용 버전 코드도 있습니다. 예제 코드 See the Pen JS Autocomplete by hyukson (@hyukson) on CodePen. HTML 태그 사용하기 HTML에는 Input 자동완성 기능을 이용할 수 있도록 해주는, datalist 태그와 list 속성이 존재합니다. 하지만, 다양한 이벤트 설정이 어렵고 커스텀이 힘들다는 단점을 보완하기 위해서 자바스크립트로 구현해 보았습니다. 코드 풀이 먼저 검색어를 입력받을 Input 요소와 자동완성을 시켜줄 리스트 요소를 하나 생성해 줍니다. /* active 클래스를 가진 요소에 대해 */ .autocomplete > div.active { backgroun..

[JS] 초성검색 구현하기

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다. 한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub. github.com 'hangul-util' 코드와 '한글 초성, 중성, 종성 구하기' 포스트를 기반으로 작성된 글입니다. includeByCho('ㄱ', '귤') // true includeByCho('ㅅ과', '사과') // true 코드 예시 See the Pen includeByCho by hyukson (@hyukson) on CodePen. 코드 const CHO_HANGUL = [ 'ㄱ', 'ㄲ', 'ㄴ',..

[JS] Form Submit 동작 막기 (ft. Button Submit)

주로 submit 동작에는 Form 데이터를 서버에 전송하고, 와 같이 페이지 이동이 발생합니다. 예제 코드 See the Pen Stop form Submission by hyukson (@hyukson) on CodePen. HTML 코드 (Basic) 로그인 1. 모든 submit 동작 막기 (JavaScript) const $form = document.querySelecotr('form'); $form.addEventListener("submit", (event) => { // 동작(이벤트)을 실행하지 못하게 막는 메서드입니다. event.preventDefault(); console.log(event.target); }); “event.preventDefault()”는 브라우저에 동작하는 이벤..

[JS] 객체 value 값으로 정렬 시키기

객체를 value 값을 기준으로 sort() 시켜 줄 수 있게 데이터를 변환시켜 주는 과정이 필요합니다. 코드 const fruits = { Apple: 4000, Banana: 10000, Cherry: 800, Kiwi: 7000, }; const object = Object.fromEntries( Object.entries(fruits).sort((a, b) => a[1] - b[1]) ); console.log(object); // { "Apple": 4000, "Banana": 10000, "Cherry": 800, "Kiwi": 7000 } sort() 메서드를 이용하기 위해서 배열로 변환시킨 후, 다시 객체로 만들어 주는 방법을 거쳐줍니다. 코드 풀이 const fruits = { Apple..

[JS] 배열을 객체로 변환 (Array to Object)

Object.fromEntries() 메서드 const entries = [ ['first', 'apple'], ['second', 7], ]; const object = Object.fromEntries(entries); console.log(object); // {'first': 'apple', 'second': 7} 다음과 같이 key-value 형식으로 갖추어진 배열은 Object.fromEntries() 메서드를 사용하면 객체로 변환하여 반환해 줍니다. forEach(), reduce() 메서드 const array = ['apple', 'banana', 'mango']; // 1. const object = {}; array.forEach((value, index) => { object[ind..

[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] 객체에 특정 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] 눈 내리는 효과 만들기

완성 코드 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] 시작일과 종료일 사이 모든 날짜 구하기

시작일(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..