◎ JavaScript
[JS] 정규표현식으로 텍스트 내 이메일 주소 찾기 [Regular Expressions을 활용한 텍스트 패턴 매칭]
- 정규표현식으로 텍스트 내 이메일 주소 찾기 1. 정규표현식이란? 정규표현식은 텍스트에서 특정한 패턴을 찾거나 매칭시키는데 사용되는 도구다. (이메일 주소나 전화번호와 같은 특정한 형식을 가진 문자열을 찾거나 대체할 때 유용하다.) 2. 텍스트 내 이메일 주소 찾기 아래는 이메일 주소를 찾는 데 사용할 수 있는 간단한 정규표현식이다. const text = "문자열 내에 이메일 주소 example@email.com을 찾아봅시다."; // 이메일 주소를 찾기 위한 정규표현식 const emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g; const foundEmails = text.match(emailRegex); console.log..
[JS] 자바스크립트에서 두 날짜 사이 비교하기 [두 날짜 사이의 일수, 월, 연도 구하기]
- 자바스크립트에서 두 날짜 사이 비교하기 Date 객체의 getTime() 메서드를 사용하면 해당 시간을 밀리초 단위로 환산하게 된다. 이 메서드를 활용하면 두 날짜를 비교할 수 있다. 초 : 1000 분 : 1000 * 60 시 : 1000 * 60 * 60 일 : 1000 * 60 * 60 * 24 월 : 1000 * 60 * 60 * 24 * 30 년 : 1000 * 60 * 60 * 24 * 365 // 일 차이 구하기 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.ab..
[JS] 자바스크립트에서 NaN 값 비교하는 방법 [NaN이란? Not-A-Number(숫자가 아님)]
- 자바스크립트에서 NaN 값 비교하는 방법 자바스크립트에서 NaN은 Not-A-Number(숫자가 아님)를 나타낸다. NaN을 반환하는 연산에는 아래와 같은 경우들이 있다. // 1. 숫자로 변환 실패 console.log(parseInt("blabla")); // NaN. 명시적인 경우 console.log(Number(undefined)); // NaN. 명시적인 경우 console.log(Math.abs(undefined)); // NaN. 암시적인 경우 // 2. 결과가 허수인 수학 계산식 console.log(Math.sqrt(-1)); // NaN // 3. 정의할 수 없는 계산식 console.log(0 * Infinity); // NaN console.log(1 ** Infinity); ..
[JS] gif 이미지를 이용한 투명 로딩바, 로딩서클 만들기 [loading bar, loading circle 만들기, 스크롤 고정하는 방법]
- gif 이미지를 이용한 로딩바, 로딩서클 만들기 데이터를 처리할 때 화면에 표시되는 로딩바, 로딩서클을 만들어보려 한다. 두 개의 함수만 구현하면 되기에 꽤나 간단하다. (아래 코드는 jQuery로 구현해놓았기에 cdnjs에서 jQuery를 받아와야 한다.) [jQuery] 제이쿼리(jQuery)란? [cdnjs에서 HTML로 jQuery 불러오기] 1. 제이쿼리(jQuery)란? HTML에 애니메이션, 이벤트 처리 등 다양한 기능을 부여해 주는 라이브러리 2. 제이쿼리(jQuery) 적용 방법 - jQuery 소스 : cdnjs jquery - Libraries - cdnjs - The #1 free and open source CDN built yermi.tistory.com [꿀팁] 투명 로딩바..
[JS] 현재 페이지 URL과 파라미터 가져오기 [URLSearchParams 객체 사용하여 parameter를 js 변수에 담기]
- 현재 페이지 URL과 파라미터 가져오기 1. 현재 페이지 URL 가져오기 // 현재 페이지의 URL 가져오기 window.location.href // https://yermi.tistory.com/?id=test&pw=1234 // 현재 페이지의 쿼리스트링만 가져오기 window.location.search // ?id=test&pw=1234 2. 현재 페이지 파라미터 변수에 담기 const url = new URL("https://yermi.tistory.com/?id=test&pw=1234"); // URLSearchParams 객체 사용 const urlParams = url.searchParams; // 각 파라미터 변수에 담기 let id = urlParams.get('id'); // te..