JavaScript

[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] 글 작성 경과 시간 표시 (방금전, 몇분전, 몇시간전, 몇일전, 몇달전, 몇년전)

유명 SNS 게시물을 보면 작성 날짜 항목에 "방금 전", "몇분 전", "몇시간 전", "몇일 전"에 작성됨, 과 같은 형식으로 표현하는 것을 볼 수 있습니다. See the Pen Untitled by hyukson (@hyukson) on CodePen. 코드 function elapsedTime(date) { const start = new Date(date); const end = new Date(); const diff = (end - start) / 1000; const times = [ { name: '년', milliSeconds: 60 * 60 * 24 * 365 }, { name: '개월', milliSeconds: 60 * 60 * 24 * 30 }, { name: '일', mill..

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

[JS] 밤하늘의 별 배경 만들기

여름이 시작되기도 하고 별이 가득한 밤하늘을 웹으로 나마 보고 싶어 제작해보았습니다. JavaScript로는 오로지 별을 랜덤 한 위치에 배치시키는 작업만 해주고, 스타일은 CSS 코드로 작성하였습니다. See the Pen stars Background by hyukson (@hyukson) on CodePen. 코드 HTML 태그 구성으로는 밤하늘 배경을 만들 부모 태그와 별들을 감쌀 태그를 만들어줍니다. 저는 Circle 태그를 사용하기 위해서 SVG를 사용하였습니다. (position 속성을 이용하여 div로도 가능) /* 배경 */ .backSky { width: 100vw; height: 100vh; position: relative; background: linear-gradient(to r..

[JS] 숫자 카운트 애니메이션 만들기

홈페이지에서 수치를 표현할 때 효과적으로 시선을 이끌 수 있는 방법 중 하나가 바로 카운트 애니메이션 효과를 사용하는 것입니다. 코드 See the Pen JS Number CountDown by hyukson (@hyukson) on CodePen. 예를 들어 17242까지 증가한다고 할 때, 일정한 간격으로 증가하는 것이 아닌 점점 증가하는 수치가 줄어들면서 훨씬 자연스러운 숫자 카운트 애니메이션으로 보이게 제작해 보았습니다. 코드 풀이 0 // 카운트를 표시할 요소 const $counter = document.querySelector(".count"); // 목표수치 const max = 17242; counter($counter, max); counter 함수를 하나 제작하고, 해당 함수로 카운..

[JS] 배열 마지막 값 가져오기

JS에서 배열의 마지막 값을 가져오는 방법은 다양합니다. 많은 방법 중 배열의 마지막 값을 가져오는 대표적인 방법 3가지를 소개합니다. 배열의 길이를 통해 구하기 const arr = [1, 2, 3, 4, 5]; // 마지막 값 arr[arr.length - 1]; Array.length 속성을 이용해 배열의 길이에서 -1을 뺏 인덱스에 접근하면, 배열의 마지막 값을 가져올 수 있습니다. Array.at 메서드 사용하기 const arr = [1, 2, 3, 4, 5]; // 마지막 값 arr.at(-1); // 뒤에서 n번째 값 arr.at(-n); // arr.at(0) -> 1 == arr[0] -> 1 at() 메서드는 정수를 값으로 받아 배열의 해당 인덱스의 요소를 반환하는 메서드입니다. 흔히..

[JS] 3자리 마다 콤마 표시하기 (소수점 제외)

정규식을 사용하거나 3자리마다 쪼개서 추가하는 방법 등, 다양한 방법이 존재하지만 가장 쉬운 방법은 toLocaleString() 메서드를 사용하는 방법입니다. 기본 코드 String.toLocaleString(); // 예시 (15000).toLocaleString(); // 15,000 포맷할 Number 타입의 숫자에 toLocaleString() 메서드를 사용하여 콤마를 표시해줍니다. 예시 코드 const price = "12000"; //

[JS] 파일 용량(사이즈) 체크, 변환하기

흔히 사용하는 데이터의 크기로는 KB, MB, GB 등이 있습니다. 이때 KB는 1,024Byte이고, MB는 1,024KB입니다. 해당 코드와 같은 파일을 첨부하는 박스에서 파일을 선택하면 fileSize 함수로 해당 요소를 보내 선택한 파일 요소의 정보를 가져와 활용할 수 있습니다. const fileSize = ($target) => { // 유저가 선택한 파일 가져오기 const file = $target.files[0]; // 해당 파일의 용량(사이즈) 정보 console.log(file.size); } 해당 코드로 파일의 정보를 가져올 수 있으며, File.size로 해당 파일의 바이트(Byte) 크기를 알 수 있습니다. 용량(사이즈) 변환하기 const getByteSize = (size) ..

[JS] if 문 간결화 시켜 줄이기

if, else 문과 같은 조건문을 남발하여 작성하게 되면 가독성을 해치는 코드를 작성하게 됩니다. 이를 해결할 수 있는 다양한 상황을 소개하겠습니다. 삼항 조건 연산자 사용하기 // 기존 코드 let user = "normal" if (isAdmin) { uesr = "admin"; } // 삼항 연산자 사용 const user = isAdmin ? "admin" : "normal"; 삼항 조건 연산자를 사용하면 코드가 더 간결해지며 변수에 값이 한 번만 할당됩니다. || , && 연산자 사용 // 기존 코드 alert( content ? content : "값을 찾을 수 없습니다." ); // || 연산자 사용 alert( content || "값을 찾을 수 없습니다." ); 삼항 조건 연산자를 사용..