react

[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] 문자열 배열 정렬 (영어,한글)

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] 드래그 이동이 가능한 draggable 요소 만들기

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다. draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다. 코드 See the Pen Draggable HTML Element by hyukson (@hyukson) on CodePen. 코드 풀이 drag 먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다. let isPress = false, // 마우스를 눌렀을 때 prevPosX = 0, // 이전에 위치한 X값 prevPosY = 0; // 이전에 위치한 Y값 const $tar..

[JS] 브라우저 크기 변경에 반응하는 이벤트

브라우저 창의 크기 변화에 반응하는 resize 이벤트를 사용하여, 변경된 브라우저 창의 크기를 가져올 수 있습니다. addEventListener 함수를 이용하여 이벤트를 지정하거나, window.onresize 함수를 통해 이벤트를 지정할 수 있습니다. // 1. window.addEventListener(`resize`, function() { }); // 2. window.onresize = function() { } 변경된 사이즈 가져오기 window.onresize = function() { const width = window.innerWidth; const height = window.innerHeight; console.log(width); console.log(height); } 윈도우..

[JS] 자동으로 글자 적는 타이핑 효과 구현하기

JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다. 예시 코드 See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen. 위 예시코드는 동작을 보여주기 위해서 무한 반복하고 있습니다. 참고해주세요! 무한반복 막기 // 지우는 효과 if (letters[i + 1]) remove(); 코드 풀이 텍스트가 입력될 요소를 하나 생성해줍니다. // 텍스트 요소 const $text = document.querySelector(".text"); // 입력될 글자 모음 const letters = ["HTML", "CSS", "JavaScript"]; // 글자 입력 속도 const speed = 100; // 현재 지정된 글자 l..

[JS] 클립보드에 특정 텍스트 복사하기

코드블럭 오른쪽 상단바에 존재하는 "복사 아이콘"을 클릭해보세요! "Ctrl + C" 단축키와 같은 기능 또는 블로그에 새로 추가한 "코드 복사" 기능을 웹 상에서 구현하기 위해서는 특정 텍스트를 클립보드에 추가시켜줘야 합니다. 코드 클립보드와 상호작용하는데 가장 많이 사용되는 document.execCommand() 방법을 사용하여 쉽게 구현할 수 있습니다. document.execCommand("copy") - 클립 보드에 텍스트 복사 기능 document.execCommand("cut") - 클립 보드에 텍스트 잘라내기 기능 document.execCommand("paste") - 클립 보드에 이미 존재하는 내용을 붙여넣기 기능 해당 기능은 input, textarea와 같은 입력창에 입력된 값 중..

[JS] 랜덤 날짜 생성하기

See the Pen Random Date by hyukson (@hyukson) on CodePen. 랜덤 한 수를 생성하는 방법은 Math.random() 메서드를 이용하면 임의의 값을 얻을 수 있습니다. end - start 날짜 수식을 통해 날짜의 차이 값을 구할 수 있습니다. 두 날짜 사이의 범위 function getRandomDate(start, end) { const startDate = start.getTime(); const endDate = end.getTime(); return new Date(startDate + Math.random() * (endDate - startDate)); } // 시작 날짜 ~ 종료 날짜 getRandomDate(new Date(2022, 1, 1), ..