JS

[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() 메서드는 정수를 값으로 받아 배열의 해당 인덱스의 요소를 반환하는 메서드입니다. 흔히..

[CSS] 토글 스위치 버튼 만들기 (Toggle Swtich)

오직 CSS만을 사용해 제작한 토글과 JavaScript 코드로 토글을 제작할 수 있습니다. 전체 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 코드 풀이 JavaScript를 사용하지 못하기 때문에 checkbox의 체크 여부로 토글의 상호작용 기능을 제작하였습니다. .toggleSwitch { width: 100px; height: 50px; display: block; position: relative; border-radius: 30px; background-color: #fff; box-shadow: 0 0 16px 3px rgba(0 0 0 / 15%); cursor: pointer; } /* 토글 버튼 */ .toggleSwitch ...

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

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

[JS] 프로그래머스 주차 요금 계산

출처 https://programmers.co.kr/learn/courses/30/lessons/92341 코딩테스트 연습 - 주차 요금 계산 [180, 5000, 10, 600] ["05:34 5961 IN", "06:00 0000 IN", "06:34 0000 OUT", "07:59 5961 OUT", "07:59 0148 IN", "18:59 0000 IN", "19:09 0148 OUT", "22:59 5961 IN", "23:00 5961 OUT"] [14600, 34400, 5000] programmers.co.kr 문제 주차 요금을 나타내는 정수 배열 fees, 자동차의 입/출차 내역을 나타내는 문자열 배열 records가 매개변수로 주어집니다. 차량 번호가 작은 자동차부터 청구할 주차 요금..

[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 || "값을 찾을 수 없습니다." ); 삼항 조건 연산자를 사용..

[JS] 배열에서 중복 값 제거하기

기본값 // 배열안에 값 const arr1 = [1, 2, 3, 4, 5, 1, 3, 5] // 배열안에 객체 const arr2 = [{name: "레드"}, {name: "그린"}, {name: "블루"}, {name: "레드"}, {name: "블루"}] 해당 값과 같이 배열에 중복된 값이 들어 있는 경우, 중복된 값을 제거하는 방법을 소개하겠습니다. 첫 번째 방법 ( Set ) const result = [...new Set(arr1)]; // [1, 2, 3, 4, 5] Set 객체 내 값은 하나만 나타날 수 있습니다. 즉 어떤 값이 든 유일하게 만들어주는 검사를 진행합니다. 이를 이용하여 Set 객체를 생성할 때 배열을 넣어주면 중복된 값이 사라집니다. Set 객체를 이용했기에 다시 배열의 ..

[JS] Canvas에서 가운데 정렬 텍스트 그리기

다양한 방법으로 가운데(중앙) 정렬시킨 텍스트(글자)를 Canvas에 그릴 수 있습니다. 첫 번째 코드 const cw = width / 2; const ch = height / 2; // 그리는 기준점을 글자의 가운데로 ctx.textAlign = "center" ctx.fillStyle = "#000"; ctx.fillText( text, cw, ch ); ctx.fill(); 글자를 그리기 전에 텍스트의 X 시작점을 가운데로 옮기는 속성을 적용시키면 간단하게 중앙 정렬시킬 수 있습니다. 두 번째 코드 const cw = width / 2; const ch = height / 2; // 그릴 텍스트의 넓이 구하기 const textWidth = ctx.measureText(text).width; ct..

[JS] 백준 1978번 소수 찾기

출처 백준 온라인 저지 https://www.acmicpc.net/problem/1978 1978번: 소수 찾기 첫 줄에 수의 개수 N이 주어진다. N은 100이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다. www.acmicpc.net 문제 주어진 수 N개 중에서 소수가 몇 개인지 찾아서 출력하는 프로그램을 작성하시오. 첫 줄에 수의 개수 N이 주어진다. N은 100 이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다. 풀이 소수란 1과 자신만으로 나누어 떨어지는 1보다 큰 양의 정수를 뜻합니다. 2, 3, 5, 7, 11, 13... 와 같은 수는 소수가 됩니다. 이를 이용하여 1과 자신만으로 나누어 떨어지는지 체크하는 함수를 만들어 놓고 filt..