[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] 영어 첫글자만 대문자로 바꾸기

코드예제 See the Pen <a href="https://codepen.io/hyukson/pen/GRwjjqe"> Untitled</a> by hyukson (<a href="https://codepen.io/hyukson">@hyukson</a>) on <a href="https://codepen.io">CodePen</a>. 코드 function toCapitalize(str) { return str.replace(/\b\w/g, (match) => match.toUpperCase()); } // : 사용예시 toCapitalize('hello world'); // 'Hello World' 코드풀이 'ABC'.replace(/\b\..

[JS] 길게 클릭(롱클릭) 이벤트 만들기

특정 요소를 정한 시간만큼 누르고 있는 행동을 Long-Click 또는 Long-Press라고 합니다. 예제코드 See the Pen Long Click by hyukson (@hyukson) on CodePen. 코드 const onlongclick = ($target, duration, callback) => { $target.onmousedown = () => { const timer = setTimeout(callback, duration); $target.onmouseup = () => { clearTimeout(timer); }; }; } 마우스로 해당 타깃을 누르는 시점을 mousedown 이벤트로 감지해 주고 특정 시간만의 setTimeout 함수를 실행해 줍니다. 만약 특정시간이 지나기 ..

[JS] 접속한 브라우저 체크하기

예시코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 전체 코드 function getBrowser() { const browsers = [ 'Chrome', 'Opera', 'WebTV', 'Whale', 'Beonex', 'Chimera', 'NetPositive', 'Phoenix', 'Firefox', 'Safari', 'SkipStone', 'Netscape', 'Mozilla', ]; const userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.includes("edg")) { return "Edge"; } if (userAgent.includes("trident") |..

[JS] 숫자를 한글로 표시하기

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다. 한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub. github.com 'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다. formatNumber(123456789); // 1억 2345만 6789 formatNumberAll(123456789); // 일억 이천삼백사십오만 육천칠백팔십구 예제 코드 See the Pen formatNumber by hyukson (@hyukson) on CodePen. 4자리 대상 (전체코드) 더보기 const th..

[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] 배열 순서 바꾸기 (맞교환)

splice() 메서드에 대해서 // Array.splice(시작위치, 삭제할 아이템 개수, 추가할 아이템) const array = [1, 2, 3]; array.splice(0, 1); // [1] array.splice(0, 0, 5); // [] console.log(array); // [5, 2, 3] splice() 메서드의 두 번째 인자는 삭제할 개수입니다. (1은 fromIndex 위치의 value 값) 두 번째 인자의 값이 0일 시, value 값이 제거되지 않습니다. 세 번째 인자 값에는 배열에 추가할 요소입니다. (없을 시 제거만 진행) Array.splice() 메서드는 원본배열에 직접적인 관여를 합니다. (참조) 위치 이동하기 function moveValue(array, from..

[JS] 한글 초성, 중성, 종성 구하기

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다. 한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub. github.com 'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다. divideHangul('사과') // ['ㅅ', 'ㅏ', 'ㄱ', 'ㅗ', 'ㅏ'] divideHangul("값싼"); // ['ㄱ', 'ㅏ', 'ㅂ', 'ㅅ', 'ㅆ', 'ㅏ', 'ㄴ'] 코드 예시 See the Pen Untitled by hyukson (@hyukson) on CodePen. (전체코드 67줄) 더보기 c..

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