자바스크립트

[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 메서드로 배열을 공백 없는 하나의 문자..

[JS] 자판 배열에 따른 가입 조건문 구현하기

회원가입 조건문을 만들 때 비밀번호 보안을 위해 키보드 배열에 따른 3개의 연속된 문자를 사용하지 못하는 조건문이 필요했고, JS로 구현해 보았습니다. 위 이미지와 같이, 사용자가 가장 많이 사용하는 문자 조합인 123, qwe, asd ,zxc 등 간단한 조합을 방지하는 기능을 구현해 보았습니다. 코드 const pwChk = (value) => { // 키보드 배열 조건 const keyboard = ["1234567890", "qwertyuiop", "asdfghjkl", "zxcvbnm"]; for (let i = 0; i < value.length-2; i++) { const sliceValue = value.substring(i, i + 3); // 모든 조건을 한번씩 순회 if (keyboa..

[JS] 페이지 상단(하단)으로 이동하는 버튼 구현하기

버튼 클릭 하나만으로 웹 페이지의 상단으로 이동하는 기능을 구현해보겠습니다. 코드 맨 위로 .moveTopBtn { position: fixed; bottom: 1rem; right: 1rem; width: 4rem; height: 4rem; background: #000; color: #fff; } 간단한 HTML 코드로 버튼을 만들어 줍니다. 대부분의 해당 버튼은 페이지 오른쪽 하단에 위치하기에 fixed 속성을 통해 고정시켜주었습니다. const $topBtn = document.querySelector(".moveTopBtn"); // 버튼 클릭 시 맨 위로 이동 $topBtn.onclick = () => { window.scrollTo({ top: 0, behavior: "smooth" }); ..

[JS] 줄바꿈을 포함한 모든 문자 일치 정규식

문제점 단순히 모든문자(.) 정규식을 사용하면 문장이 개행 문자로 인해 하나로 묶이지 않고 개행을 기준으로 나뉘는 문제점이 발생합니다. 정규식에서 . 특수문자는 개행 문자를 제외한 모든 문자를 인식합니다. 하지만 모든 문자에 개행 문자를 포함시켜 인식을 해야 할 때가 존재합니다. 코드 const reg = /^(.|\n)*?$/ 문자에 모든 문자 또는 개행 문자를 찾을 수 있게 묶인 그룹으로 비교하는 정규식입니다. 현재 코드는 임시로 시작점(^)과 끝점($)을 지정해 제한하였습니다. 그 이유는 단순한 .* 정규식은 빈 항목을 판정하기 위해 무한한 판정을 하기 때문입니다. 결과 해당 정규식을 사용하면 개행을 기준으로 분리되었던 문장이 개행도 하나의 문장으로 인식, 묶인 모습을 볼 수 있습니다.

[JS] 스크롤 방향 감지하기

아래로 이동하고 있는지, 위로 이동하고 있는지를 scroll 이벤트로 감지할 수 있습니다. 예제 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 이전 위치를 기록하여 비교하기 let lastScrollY = 0; addEventListener("scroll", e => { const scrollY = window.scrollY; // 이전의 스크롤 위치와 비교하기 const direction = scrollY > lastScrollY ? "Scroll Down" : "Scroll Up"; // 현재의 스크롤 값을 저장 lastScrollY = scrollY; console.log(direction); }); 현재의 scroll 된 위치는 window..

[JS] 클릭한 요소의 index 구하기

1 2 3 4 5 6 위와 같은 HTML 코드에서 div를 클릭, 클릭한 요소의 index (순서)를 구하는 방법입니다. JS const boxs = document.querySelectorAll(".boxList > div"); boxs.forEach((el, index) => { el.onclick = () => { console.log(index); } }); 가장 쉬운 방법은 다수의 이벤트를 걸어주는 반복문에서 index를 가져오는 방법입니다. 하지만 다수의 이벤트를 걸어주지 못하는 상황에서는 아래와 같은 방법으로 index를 가져올 수 있습니다. const $box = document.querySelector(".boxList"); $box.onclick = (e) => { const nodes..

[JS] 정규식으로 모든 HTML 태그 제거하기

코드 const reg = /]*>?/g String.replace(/]*>?/g, ''); HTML 태그의 형식( )에서 에 싸여있는 태그를 모두 감지할 수 있는 정규식입니다. 해당 정규식을 사용하여 HTML 태그를 매치, 제거할 수 있습니다. 예시 가나다라 위와 같은 HTML 태그를 텍스트로 받아와 아래와 같은 코드로 태그를 제거해주면, 태그가 제거된 가나다라 텍스트만 남게 됩니다. // JavaScript const $el = document.querySelector(".box"); const newText = $el.innerHTML.replace(/]*>?/g, ''); console.log(newText);

[JS] 프로그래머스 로또의 최고 순위와 최저 순위

출처 https://programmers.co.kr/learn/courses/30/lessons/77484 코딩테스트 연습 - 로또의 최고 순위와 최저 순위 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 1 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호 programmers.co.kr 문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순서와 상관없이, 구매한 로또에 당첨 번호와 일치하는 번호가 있으면 맞힌 걸로 인정됩니다. 알아볼 수 없는 두 개의 번호를 각각 10, 6이라고 가정하면 3..