JavaScript

[JS] 다중 배열 하나의 배열로 묶기 (flat)

flat 메서드 const newArr = arr.flat([depth]) flat 메서드는 모든 배열 요소를 지정한 깊이까지 이어 붙인 새로운 배열을 생성하는 메서드입니다. 빈 요소가 있으면 무시하며 depth에 따라 합치는 정도를 정할 수도 있습니다. (기본은 1입니다.) [1, 2, [3, 4]].flat(); // [1, 2, 3, 4] [1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, 3, 4, [5, 6]] [1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6] [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]].flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 어디서 ..

[JS] 팝업창 가운데에 위치시키기

코드 const width = 600; const height = 600; let left = (document.body.offsetWidth / 2) - (width / 2); let tops = (document.body.offsetHeight / 2) - (height / 2); left += window.screenLeft; const popup = window.open('/', 'popup', `width=${width}, height=${height}, left=${left}, top=${tops}`); 코드 설명 해당 코드는 screen.width을 사용하지 않습니다. 그 이유는 듀얼 모니터 때문입니다. screen.width을 사용 시 메인 모니터를 기준 값이기에 서브 모니터에서 페이지를 ..

[JS] 전화번호 자동 하이픈(-) 정규식

첫 번째 코드 const phone = '01012345678'; phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // '010-1234-5678' 00-000-0000 또는 000-0000-0000 전화번호를 (2, 3) - (3, 4) - (4) 자리에 숫자 그룹을 지어 묶어줍니다. replace() 메서드로 각 그룹($1, $2, $3)을 순서대로 배치하고 사이에 하이픈을 추가시켜 하이픈이 추가된 전화번호를 완성시켜 줍니다. const phone = "010-12345678"; phone .replace(/[^0-9]/g, '') // 숫자를 제외한 모든 문자 제거 .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-..

[JS] 아주 큰 숫자 한계 처리

문제점 자바스크립트의 기본 자료형의 수는 한계점이 존재합니다. Number.MAX_SAFE_INTEGER의 값보다 큰 값은 정확하지 않을 때가 많습니다. 해결방법 BigInt 타입의 값을 만들어 계산하는 방법으로 해결할 수 있습니다. 숫자 뒤에 BigInt을 호출하거나 n을 붙여 값을 만들 수 있습니다. 이를 사용하여 기본 자료형의 수로 연산하여 나온 Infinify의 한계를 넘을 수 있습니다. 하지만 주의해야 할 점은 BigInt형의 값은 BigInt형의 값만으로 연산할 수 있으며 기본 숫자형의 값으로는 연산할 수 없습니다. 그 후 toString 메서드를 이용하여 맨뒤에 붙어있는 n을 제거한 문자열로 바꿀 수 있습니다. 참고사이트 https://developer.mozilla.org/ko/docs/W..

[JS] 별점 드래그 구현

완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY CODE const drawStar = (target) => { $(`.star span`).css({ width: `${target.value * 10}%` }); } 별점 뒤에 숨겨진 input range의 값을 드래그로 조절할 수 있습니다. 해당하는 value값만큼 별 width를 늘려주는 방식입니다. 먼저 이미지..

[JS] 배열 특정 값 찾기 ( find, findIndex, filter )

find const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // callback(element, index, array) array.find(v => v > 5); // 6 find 메서드는 해당 조건에 만족하는 첫 번째 요소의 값을 반환하며 만족하지 않으면 undefined를 반환합니다. const array = [{name: 'red'}, {name: 'green'}, {name: 'yellow'}]; array.find(v => v.name === 'green'); // {name: 'green'}; find 메서드는 object가 담겨있는 배열에서도 유용하게 사용 가능합니다. findIndex const array = [1, 2, 3, 4, 5, 6, 7, 8, ..

[JS] a부터 z까지 출력하기

a부터 z까지의 문자를 쉽게 만드는 방법은 유니코드를 사용하여 숫자를 문자로 바꾸는 방법을 사용하는 것입니다. 코드 let str = ''; for (let i = 97; i String.fromCharCode(i + 97)).join(""); 코드 해설 fromCharCode 메서드를 사용하여 97 (a)부터 122 (z)까지의 UTF-16를 이용하여 생성하는 코드입니다.

[JS] 배열 랜덤하게 섞기

첫 번째 코드 [1, 2, 3, 4, 5].sort(() => Math.random() - 0.5); Math.random 메서드는 0부터 1까지의 난수를 반환합니다. 이 때 0.5는 반환되는 난수의 중간 값입니다. 이를 이용하여 sort 메서드로 매번 랜덤 한 값으로 정렬시켜 섞어줍니다. 두 번째 코드 const getRandom = () => Math.floor(Math.random() * tmpArray.length); const tmpArray = [1, 2, 3, 4, 5]; const array = [...tmpArray].map(_ => tmpArray.splice(getRandom(), 1)[0]); console.log(array); tmpArray 배열에서 값을 랜덤 하게 하나씩 뽑아 ..

[JS] 랜덤 RGB 색 만들기

코드const getRandomRGB = () => `rgb( ${new Array(3).fill().map(v => Math.random() * 255).join(", ")} )`; 각각 다른 0부터 255사이의 랜덤한 값을 배열 3개에 담아 반환시켜주는 함수 코드입니다. 관련 있는 글https://wezkit.com/random-color 랜덤 색상 생성 - wezkit랜덤한 HEX / RGB / HSL 색깔 코드를 생성할 수 있습니다.www.wezkit.com

[JS] 모든 setInterval, setTimeout 중지

코드 // 가장 마지막에 실행된 함수를 제외 전부 중지 const IntervalId = setInterval(() => console.log('interval'), 1000); for (let i = 0; i console.log('timeout'), 1000); for (let i = 0; i < TimeoutId; i++) { clearTimeout(i); } 코드 풀이 setInterval, setTimeout은 각 함수를 호출할 때마다 증가하는 수를 아이디로 반환하며 해당 아이디를 사용하여 각 함수를 중지시킬 수 있습니다. 이에 사용되는 함수는 clearInte..

[JS] base64 이미지 용량 줄이기 (File API)

코드 // const file = ().files[0] // file type을 가진 input DOM에 files로 파일 데이터를 가져올 수 있습니다. const fr = new FileReader(); fr.onload = (base64) => { const image = new Image(); image.src = base64.target.result; image.onload = (e) => { const $canvas = document.createElement(`canvas`); const ctx = $canvas.getContext(`2d`); $canvas.width = e.target.width; $canvas.height = e.target.height; ctx.drawImage(e.ta..

[JS] 현재 날짜, 시간 포맷 (YYYY-MM-DD hh:mm:ss)

YYYY-MM-DD HH:MM:SS const TIME_ZONE = 9 * 60 * 60 * 1000; // 9시간 const date = new Date('2021-08-05 09:51:31'); new Date(date.getTime() + TIME_ZONE).toISOString().replace('T', ' ').slice(0, -5); // 2021-08-05 09:51:31 toISOString() 메서드는 "YYYY-MM-DDTHH:mm:ss.sssZ" 형식으로 정보가 반환되며, replace(), slice(0, -5)으로 불필요한 정보를 제거해줍니다. 해당 메서드에서 출력되는 시간은 UTC(미국) 기준으로 출력됩니다. 이를 대한민국 서울 시간에 맞추기 위해서 3240 * 10000(9시간..