JavaScript

[JS] Element 크기 변화 감지 (ResizeObserver)

window창은 resize 이벤트를 이용해서 창 크기 변화를 감지할 수 있습니다. 하지만 div, p와 같은 HTML 태그들은 resize 이벤트에 해당하지 않습니다. ResizeObserver API const $target = document.querySelector('div'); const observer = new ResizeObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }); // 크기변화를 관찰할 요소지정 observer.observe($target); Resize Observer API는 resize 이벤트와 다르게 설정한 요소의 크기 변화를 관찰하며, 크기가 변경될 때마다 관찰자에게 정..

[JS] 키보드 단축키 만들기

keydown Event에 담겨오는 다양한 키 정보를 이용해서 단축키를 생성할 수 있습니다. 예제 코드 See the Pen JS hotkey by hyukson (@hyukson) on CodePen. 코드 document.addEventListener('keydown', (event) => { event.preventDefault(); // keyCode if (event.keyCode === 67 && event.shiftKey) { alert('Shift + C 단축키'); return false; } // key if (event.key === 'v' && event.altKey && event.ctrlKey) { alert('Ctrl + V + ALT 단축키'); return false; } ..

[JS] Sort(), 다중 조건 정렬

단일 조건 const data = [ { age: 19, name: '김씨' }, { age: 25, name: '박씨' }, { age: 18, name: '김씨' }, { age: 19, name: '나씨' }, ]; data.sort((a, b) => a.age - b.age); 해당 데이터에서 정렬을 시켜주면, age(나이)가 같은 값은 정렬이 되지 않습니다. 이를 해결하기 위해선 다중 조건으로 정렬을 해줘야 합니다. 다중 조건 const data = [ { age: 19, name: '김씨' }, { age: 25, name: '박씨' }, { age: 18, name: '김씨' }, { age: 19, name: '나씨' }, ]; data.sort((a, b) => a.age - b.age ..

[JS] getWeek(), 특정 날짜가 몇주차인지 구하기

코드 const getWeek = (date) => { const currentDate = date.getDate(); const firstDay = new Date(date.setDate(1)).getDay(); return Math.ceil((currentDate + firstDay) / 7); }; const week = getWeek(new Date("2022-11-11")); console.log(week + "주차"); // 2주차 2022-11-11와 같은 Date 객체를 넘길 시, 해당 날짜가 위치한 주차를 구해서 반환해주는 함수입니다. 코드 풀이 const date = new Date('2022-11-11'); const currentDate = date.getDate(); // 11 c..

[JS] HEX, RGB 색상코드 변환하기

흔한 웹사이트에서는 색깔을 지정하는 방법으로 HEX(FFFFFF), RGB(255,255,255) 방식의 색상 코드를 많이 사용합니다. 완성 코드 See the Pen RGB to HEX by hyukson (@hyukson) on CodePen. HEX 영어 16의 줄임말로 10진수를 16진수로 변환시켜 사용하는 색깔 코드입니다. RGB (red, green, blue) 각 세 가지의 10진수 색상이(0~255) 조합된 색깔 코드입니다. 예시 → 255, 255, 255 = ( FFFFFF ) 코드 const getHEX = (RGB) => { const colors = RGB.split(","); return colors .map(color => Number(color) .toString(16) .p..

[JS] 문자열 배열 정렬 (영어,한글)

GitHub - hyukson/hangul-util: 한글 관련 자바스크립트 유틸 라이브러리입니다. 한글 관련 자바스크립트 유틸 라이브러리입니다. Contribute to hyukson/hangul-util development by creating an account on GitHub. github.com 'hangul-util' 라이브러리 코드를 기반으로 작성된 포스트입니다. sortByASC(['멜론', '귤', '참외']); // [ '귤', '멜론', '참외' ] sortByGroups(["대리", "사원", "사장", "회장", "부장"], groups); // [ '회장', '사장', '부장', '대리', '사원' ] Array.sort() 메서드 const data = ['a가가', '나나..

[JS] SVG 다운로드 (내보내기), PNG로 변환

SVG 다운로드 const $svg = document.querySelector("svg"); const data = new XMLSerializer().serializeToString($svg); const blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); const $link = document.createElement("a"); $link.download = "export.svg"; $link.href = URL.createObjectURL(blob); $link.click(); SVG의 텍스트 데이터를 추출해 Blob 객체를 만들어주고 URL.createObjectURL 메서드를 이용한 다운로드 URL을 사용해 다운로드하는 코드입니다..

[JS] 룰렛 구현하기

JavaScript와 캔버스(Canvas)를 사용하여 룰렛을 구현해보았습니다. 코드 See the Pen Canvas Roulette by hyukson (@hyukson) on CodePen. 코드 풀이const $c = document.querySelector("canvas");const ctx = $c.getContext(`2d`);// 룰렛에 들어갈 항목const product = [ "떡볶이", '돈가스', "초밥", "피자", "냉면", "치킨", '족발', "피자", "삼겹살",];// 각 항목에 해당하는 색상const colors = [ "#dc0936", "#e6471d", "#f7a416", "#efe61f ", "#60b236", "#209b6c", "#169ed8"..

[JS] 캔버스(Canvas) 이미지 다운로드

A태그에 존재하는 download 속성과 canvas.toDataURL 메서드를 이용하여 base64 방식의 인코딩 이미지를 다운로드할 수 있습니다. 예제 코드 See the Pen drawing by hyukson (@hyukson) on CodePen. 코드 // 다운로드할 캔버스 const $canvas = document.querySelector("canvas"); // A DOM 생성 const $link = document.createElement("a"); $link.download = "파일명.png"; $link.href = $canvas.toDataURL("image/png"); // element에 마우스 클릭 $link.click(); document.createElement 메서드..

[JS] 마우스 이동 방향 판단하기

마우스 이동방향을 감지하는 가장 쉬운 방법은 이전에 위치했던 마우스 좌표값과 현재 마우스 좌표 값의 대소를 비교하는 것입니다. 코드 See the Pen mouse movement direction by hyukson (@hyukson) on CodePen. 코드 풀이 // 이벤트 생성 window.addEventListener("mousemove", getMouseDirection); 마우스의 이동을 감지하는 대표적인 이벤트로는 mousemove가 존재합니다. addEventListener 함수를 이용해서 마우스 이벤트를 생성해줍니다. let prevX = 0, prevY = 0; // 이전에 있던 좌표 function getMouseDirection(event) { const xDir = prevX

[JS] 배열을 n개씩 나누어 묶기(Chunk)

1차원 배열을 n개씩 묶어서 정한 개수만큼 2차원 배열로 바꿔서 반환시켜 주는 함수를 제작해 보았습니다. 코드 function chunk(data = [], size = 1) { const arr = []; for (let i = 0; i [ [1,2], [3,4] ] chunk 함수의 매게 변수로 자를 원본 배열과 개수(n)를 받아줍니다. Array.slice 메서드를 이용해서 i번째부터 ( i + 나눌개수 ) 만큼의 배열 값을 가져와 새로운 배열에 담아줍니다. 해당 방식으로 데이터가 모두 Chunk 되면 새로운..

[JS] 좌표로 요소(element) 가져오기

JavaScript에서 x, y 값으로 요소를 찾을 수 있는 native 함수가 존재합니다. 해당 함수의 이름은 " elementFromPoint "입니다. const element = document.elementFromPoint(x, y); 창 기준 지정된 좌표(x, y) 값에 존재하는 element를 찾아 가장 최상위에 존재하는 요소를 반환하는 함수입니다. 여러 개의 요소가 존재할 시 최상위에 존재하는 요소를 반환합니다. 해당 좌표에 요소가 존재하지 않거나 좌표가 음수이면 null을 반환합니다. 해당 메서드는 창 기준 좌표를 사용하기에 창 안에 보이는 영역에게만 작동합니다. pointer-events 속성이 none으로 설정된 요소는 무시됩니다. 예시 코드 mousemove 이벤트를 이용하여 움직인..