분류 전체보기

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

[JS] 백준 1929번 소수 구하기

출처 백준 온라인 저지 https://www.acmicpc.net/problem/1929 1929번: 소수 구하기 첫째 줄에 자연수 M과 N이 빈 칸을 사이에 두고 주어진다. (1 ≤ M ≤ N ≤ 1,000,000) M이상 N이하의 소수가 하나 이상 있는 입력만 주어진다. www.acmicpc.net 문제 M이상 N이하의 소수를 모두 출력하는 프로그램을 작성하시오. 첫째 줄에 자연수 M과 N이 빈칸을 사이에 두고 주어진다. (1 ≤ M ≤ N ≤ 1,000,000) M이상 N이하의 소수가 하나 이상 있는 입력만 주어진다. 풀이 주어진 입력 n ~ m의 범위 안에 존재하는 소수를 모두 찾아 반환하는 문제입니다. 이번 문제처럼 1,000,000까지의 큰 범위가 주어졌을 때는 에라토스테네스의 체 방식을 사용..

[JS] 특정 요소 스크롤 최하단 고정 시키기

실시간 채팅 기능을 제작하던 중 특정 요소에 다른 요소가 추가되어도 overflow 스크롤 속성이 적용된 영역이 아래로 내려가지 않고 상단에 고정되어 추가되는 현상을 해결해보았습니다. 코드 const $element = document.querySelecotr("div"); $element.scrollTop = $element.scrollHeight; scrollHeight 는 스크롤이 가능한 높이를 뜻합니다. 즉 해당 높이는 스크롤의 최하단을 의미하므로 특정 요소의 scroll을 가능한 길이 만큼 강제로 이동시킵니다. const $element = document.querySelecotr("div"); // 현재의 최하단 구하기 const eh = $element.clientHeight + $eleme..

[JS] 중복 없는 랜덤 고유한 값 생성하기

랜덤한 숫자를 생성하기 위해서는 Math.random() 메서드를 사용하면 간편하게 생성할 수 있습니다. 하지만 해당 메서드로는 고유한 값을 만들기에는 중복된 값이 나올 위험이 있습니다. 코드 // 현재 시간을 밀리초로 반환 new Date().getTime(); // 1초 = 1000밀리초 해당 코드는 Date 객체의 시간을 밀리초로 반환하는 getTime 메서드를 사용하여 고유한 값을 생성하는 코드입니다. // 난수와 합치기 new Date().getTime() + Math.random() 더욱 확실히 하기 위해서는 현재의 밀리초 시간에서 랜덤한 값을 더해주는 방법입니다. 관련 있는 글 https://gurtn.tistory.com/147 [JS] 랜덤 문자열 생성하기 자바스크립트에서 랜덤한 값을 얻..

[JS] 랜덤 문자열 생성하기

crypto.randomUUID()crypto.randomUUID()// '36eef6a2-e48c-4765-a800-ccb79c5ffa05';Crypto 객체는 JavaScript에서 암호화와 관련된 기능을 지원하는 객체입니다.crypto.randomUUID() 메서드는 함수명에서 알 수 있듯이 랜덤 한 UUID 값을 반환하는 메서드입니다. 첫 번째 코드자바스크립트에서 랜덤한 값을 얻기 위해서는 Math.random() 메서드를 사용하여 얻을 수 있습니다.하지만 해당 메서드를 이용하면 랜덤 한 숫자를 생성하지 문자를 만들지는 않습니다.  이때 사용하는 방법이 toString() 메서드를 이용하여 36진수로 표현하는 방법입니다. 첫 번째 코드Math.random().toString(36).substrin..

[JS] 이미지 src 변경하는 방법

자바스크립트에서 이미지의 src를 바꾸는 방법을 소개하겠습니다. 위와 같은 예시 html에서 이미지에 접근하는 간단한 방법은 querySelector 메서드를 이용하는 것입니다. // JavaScript $img = document.querySelector(".imgbox > img"); $img.src = `change.png`; 해당 메서드를 사용하여 img DOM 객체를 가져올 수 있으며, 해당 DOM 객체에서 src를 바꾸는 방법은 아래와 같습니다. Jquery를 사용하면 아래와 같은 한 줄로 끝낼 수 있습니다. $(`.imgBox > img`).attr({ src: "change.png" });

[JS] 파일 Drag & Drop 기능 구현하기

input 태그가 아닌 임의의 영역에 이벤트를 적용시켜 드래그 앤 드롭 기능을 구현해보겠습니다. 해당 기능을 구현하기 위해서는 아래의 이벤트를 사용하게 됩니다. drop - 드래그한 파일이 영역에 드롭(드래그한 객체를 놓았을 때)되었을 때 발생 dragover - 드래그한 파일이 영역에 머물러 있을 때 발생 dragenter - 드래그한 파일이 영역에 최초로 진입했을 때 발생 dragleave - 드래그한 파일이 역영에 벗어났을 때 발생 그중 drop, dragover 이벤트는 필수로 사용해야 하는 이벤트입니다. ( dragover 이벤트를 적용하지 않으면 drop 이벤트가 작동하지 않음 ) 코드 이곳에 파일을 드롭해주세요. 먼저 파일을 드롭할 영역을 만들어 줍니다. 그 후 자바스크립트 코드로 해당 태그..

[Next.js] 이미지 로딩 애니메이션 구현하기

이미지를 리스트 형식으로 나열 할때, next.js 의 Image 컴포넌트를 사용하면 이미지를 캐싱 하게됩니다. 문제는 로드와 캐싱되는 시간 동안 사용자는 이미지 대신 비어 있는 공간을 보게됩니다. 해당 상황을 방지하기 위해서 로드되는 동안 로딩이 되고 있다는 애니메이션이 보이는 기능을 구현해보겠습니다. 코드 import Image from "next/image"; import { useRef } from "react"; export default const Poster = () => { const ref = useRef(null); return ( ref.current.remove()} /> ); } 일단 임시로 Poster 라는 컴포넌트를 하나 만들어 주고, 해당 컴포넌트에는 이미지와 로딩 애니메이션..

[JS] 문자열 거꾸로 뒤집기

자바스크립트에서는 문자열 자체로 뒤집는 내장 메서드는 존재하지 않지만, 배열을 뒤집는 메서드는 존재합니다. 그리고 문자열을 배열로 바꾸는 방법도 존재합니다. 해당 방법을 응용하여 문자열을 거꾸로 뒤집을 수 있습니다. // 문자열을 배열로 const str = "12345"; 1. [...str] 2. str.split(""); 코드 const str = "123456789"; const reverseStr = [...str].reverse().join(""); console.log(str); // 123456789 console.log(reverseStr); // 987654321 문자를 배열로 나눠주고 reverse 메서드로 배열을 뒤집어 줍니다. 그 후 join 메서드로 배열을 공백 없는 하나의 문자..