개발이야기/자바스크립트58

• 

  [자바스크립트] Infinity&NaN 해결하기, 체크, 예외처리, 발생원인 Infinity와 NaN은 JavaScript에서 숫자를 다룰 때 발생하는 특수한 값을 나타냅니다. Infinity & NaN 1. Infinity (무한대) ㅇ Infinity는 무한대를 나타냅니다. ㅇ 어떤 숫자를 0으로 나눌 때 또는 어떤 양수를 무한히 더하거나 빼는 경우에 발생합니다. ㅇ 예를 들어, 10 / 0 또는 Number.POSITIVE_INFINITY와 같은 연산은 Infinity를 반환합니다. ㅇ 무한대와 어떤 숫자를 더하면 무한대이며, 무한대에서 어떤 숫자를 빼도 무한대입니다. 2. NaN (숫자가 아님) ㅇ NaN은 "Not-a-Number"의 약어로, 숫자가 아닌 값을 나타냅니다. ㅇ 수학 연산 중 예상치 못한 결과가 발생했을 때 생성됩니다. ㅇ 예를 들어, 문자열을 숫자로 변환.. 개발이야기/자바스크립트 2023. 9. 25.

• 

  [자바스크립트] 우클릭 방지 이벤트 등록, 해제하기 (사용법, 예제) 아래 소스코드는 우클릭 가능한 영역과 우클릭 불가능한 영역에 대해서 이벤트를 처리합니다. handleContextMenu 함수를 통해서 event.target을 확인하여 우클릭이 막힌 영역에서 우클릭 시 이벤트를 중단하고 alert 메시지를 표시하고 있습니다. 우클릭 해제 버튼을 클릭하면 이벤트 핸들러를 제거하고 우클릭을 허용합니다. 간단한 코드이니 응용해서 사용하시면 됩니다. 우클릭 해제 이 영역에서는 우클릭 가능합니다. (우클릭 해보세요) 이 영역에서는 우클릭이 막혔습니다. (우클릭 해보세요) 개발이야기/자바스크립트 2023. 9. 21.

• 

  [자바스크립트] HTML요소 텍스트를 클립보드로 복사하기 (navigator.clipboard) 아래 소스코드는 입력된 텍스트에 대해서 복사하기 버튼을 클릭하여 텍스트를 클립보드에 복사할 수 있으며, 복사 작업의 성공/실패 메시지를 표시하고 있습니다. 간단한 예제이니 응용해서 사용하시면 됩니다. 소스코드 ㅇ navigator.clipboard.writeText(text) - 브라우저에서 제공하는 Clipboard API이며, 클립보드에 텍스트를 쓸 수 있습니다. 복사 및 붙여넣기 작업을 수행할 때 유용하게 사용됩니다. - text : 클립보드에 복사하려는 텍스트를 나타냅니다. - 클립보드에 텍스트를 성공적으로 복사한 경우 then() 메서드를 사용하여 처리할 수 있고, 실패한 경우 catch() 메서드를 사용하여 오류를 처리할 수 있습니다. 1. 복사하기 버튼을 클릭하세요. 2. Ctrl+V 로 붙.. 개발이야기/자바스크립트 2023. 9. 20.

• 

  [자바스크립트] userAgent 사용해서 브라우저, 디바이스 정보 확인하기 (버전, PC, 모바일, OS, IOS) 아래 소스 코드는 userAgent를 활용해서 사용자의 디바이스 및 브라우저 환경에 대한 정보를 확인할 수 있습니다. 사용자의 정보를 활용하여 웹 페이지의 동작을 조정하거나 활용하시면 유용합니다. 소스코드 ㅇ navigator.userAgent를 사용하여 사용자의 브라우저 UserAgent 문자열을 가져옵니다. UserAgent 문자열에는 브라우저와 운영 체제에 대한 정보가 포함되어 있습니다. ㅇ userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i)를 사용하여 UserAgent 문자열에서 모바일 기기 여부를 확인합니다. 개발이야기/자바스크립트 2023. 9. 18.

• 

  [자바스크립트] anime js 사용해서 애니메이션 주기 (사용법, 예제) 아래 소스 코드는 Anime.js 라이브러리를 사용하여 박스와 텍스트에 애니메이션을 적용한 예제입니다. box는 이동하며, 텍스트는 설정 방향에 따라 이동하며 나타나고 사라집니다. 소스코드 설명 // 박스 애니메이션 const boxes = document.querySelectorAll('.box'); anime({ targets: boxes, translateX: [250, -250], translateY: [50, -50], rotate: ['1turn', '2turn'], duration: 2000, easing: 'easeInOutQuad', direction: 'alternate', loop: true }); // 첫 번째 텍스트 애니메이션 const textElements = document... 개발이야기/자바스크립트 2023. 9. 14.

• 

  [자바스크립트] TypeIt 사용해서 타이핑 애니메이션 효과 내기 (사용법, 예제, 콜백) 아래 소스 코드는 TypeIt 라이브러리를 사용해서 텍스트에 타이핑하는 효과를 나타냈습니다. 지정된 HTML 요소에 타이핑 애니메이션을 생성하고 제어하는 데 사용됩니다. 소스코드 new TypeIt("#typeit-demo1", { // 설정 옵션들 }) ㅇ TypeIt 라이브러리를 초기화하고 #typeit-demo1이라는 HTML 요소에 타이핑 애니메이션을 적용하는 설정을 시작합니다. { speed: 100, // 글자가 타이핑되는 속도 (밀리초) waitUntilVisible: true, // 요소가 화면에 나타날 때까지 대기 여부 afterComplete: function (instance) { // 타이핑 애니메이션이 완료된 후에 실행되는 콜백 함수 document.getElementById("t.. 개발이야기/자바스크립트 2023. 9. 14.

• 

  [자바스크립트] Leaflet 사용해서 지도 그리기 (사용법, 예제, 이벤트 처리) 아래 소스 코드는 Leaflet 라이브러리를 사용해서 지도를 그리고, 지도 위에 마커 생성 및 팝업 추가, 이벤트 처리의 작업을 수행하였습니다. Leaflet은 가벼운 라이브러리로, 빠른 지도 렌더링을 제공하고, 많은 웹 브라우저에서 지원되고 모바일 에서도 작동합니다. 소스코드 설명 1. 지도 초기화 및 기본 설정 var map = L.map('map').setView([37.5729, 126.9794], 15); ㅇ L.map('map'): Leaflet 지도 객체를 생성하고, map이라는 HTML 요소에 지도를 표시하도록 연결합니다. ㅇ setView([37.5729, 126.9794], 15): 지도의 초기 중심 좌표를 [37.5729, 126.9794]로, 초기 확대 레벨을 15로 설정합니다. 2.. 개발이야기/자바스크립트 2023. 9. 13.

• 

  [자바스크립트] Flatpickr 사용해서 달력 만들기 (사용법, 예제, 옵션, 한국어) 아래 소스 코드는 Flatpickr 라이브러리를 사용하여 날짜, 시간 선택 등 다양한 옵션과 선택한 날짜를 처리하는 이벤트 까지 설명 드리겠습니다. Flatpickr 라이브러리는 다양한 날짜 및 시간 형식을 지원하고 사용자가 원하는 형식으로 입력을 할 수 있습니다. 또 다양한 언어로 날짜와 시간을 표시하고 옵션으로 이벤트 처리와 기능을 쉽게 추가할 수 있습니다. 소스코드 ㅇ flatpickr 함수를 사용하여 각각의 날짜 입력란에 Flatpickr 위젯을 연결하고 다양한 설정 옵션을 적용합니다. ㅇ handleDateChange 함수는 날짜가 선택될 때 실행되는 콜백 함수로, 선택된 날짜를 콘솔에 출력합니다. Flatpickr 옵션 ㅇ dateFormat : 날짜 표시 형식을 설정합니다. 예를 들어, 'Y.. 개발이야기/자바스크립트 2023. 9. 12.

• 

  [자바스크립트] TOAST UI Chart 사용법, 예제, 차트 그리기 아래 소스 코드는 Toast UI Chart 라이브러리를 사용하여 다양한 형태의 차트를 생성하고 렌더링 하는 예제 코드입니다. 이 외에도 다양한 예제와 테마가 있으니, 참조하셔서 사용하시면 됩니다. 개발이야기/자바스크립트 2023. 9. 1.

• 

  [자바스크립트] 비밀번호 영문, 숫자, 특수문자, 자릿수 조합 체크하기 아래 소스 코드는 비밀번호 정규식을 통해서 유효성을 검사하고, 비밀번호 확인을 통해 비교하는 로직입니다. 정규식을 사용하여 유효성을 검사하고, 이후 비밀번호 확인 input창에서 일치하는지 확인합니다. 간단한 소스 코드이니 확인하시고 응용하시면 됩니다. 정규식 var passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_]).{8,16}$/; 1. 비밀번호 자릿수 (최소 8자에서 16자까지) 2. 최소 하나 이상의 영문자 (소문자 or 대문자) 3. 최소 하나 이상의 숫자 4. 최소 하나 이상의 특수문자 (!@#$%^&*?_) 새로운 비밀번호를 입력하세요. 확인 개발이야기/자바스크립트 2023. 8. 29.

• 

  [자바스크립트] 올바른 이메일 형식 유효성 체크하기 아래 소스 코드는 정규 표현식에 따라 올바른 이메일 주소의 유효성을 체크하고 확인하는 스크립트 코드입니다. 유효한 이메일은 true를 반환하고, 반대의 경우는 false를 반환합니다. 간단한 코드이니 확인하시고 응용하시면 됩니다. 확인 개발이야기/자바스크립트 2023. 8. 28.

• [자바스크립트] 업로드 파일 용량, 확장자, 특수문자 체크하기 아래 소스 코드는 파일을 선택할 때 파일 크기, 확장자 및 파일명에 특수문자를 검사하는 스크립트 함수입니다. 파일을 선택할 때 호출되며 조건에 맞지 않을 때 경고 메시지를 표시하고 필드를 초기화합니다. 간단한 함수이니 확인하시고 응용해서 사용하시면 됩니다. 개발이야기/자바스크립트 2023. 8. 28.