본문 바로가기
반응형

프로그램563

jQuery에서 동적으로 추가된 <input> 요소에서 외부 함수를 호출 jQuery에서 동적으로 추가된 요소에서 외부 함수를 호출하는 방법은 여러 가지가 있습니다. 주로 다음과 같은 방법을 사용할 수 있습니다.1. on()을 사용한 이벤트 위임동적으로 생성된 요소는 기존 요소에 직접 이벤트를 바인딩할 수 없으므로, on()을 사용하여 부모 요소에서 이벤트를 위임해야 합니다. 예제: 동적으로 추가된 input에서 외부 함수 호출 입력창 추가 2. change() 이벤트 사용입력값이 변경된 후 외부 함수를 실행할 수도 있습니다.$(document).on("change", ".dynamic-input", function () { externalFunction($(this).val());});3. keyup() 이벤트 사용사용자가 입력할 때마다 외부 함수를.. 2025. 3. 29.
jquery div로 구성하되 조건에 따라 초기 필드를 설정하고, 추가 및 삭제 기능을 구현 요구 사항초기 필드 개수 설정 가능 (예: 3개 기본 생성)[추가] 버튼 클릭 시 필드 추가 가능[삭제] 버튼 클릭 시 해당 필드 삭제 가능최소 필드 개수 유지 (예: 2개 이하로는 삭제 불가) jQuery 코드 예제 추가 기능 설명 초기 필드 3개 생성 (initialFields = 3;)최소 필드 개수 2개 유지 (minFields = 2;)필드 추가 버튼을 누르면 새로운 필드가 추가됨삭제 버튼을 눌러 필드를 삭제할 수 있음단, 최소 필드 개수(2개) 이상은 유지해야 함     #jquery #필드추가 #필드삭제 2025. 3. 27.
iframe이나 동적으로 생성한 div 내부에서 마우스 좌표값을 얻는 방법 1. 일반적인 문서에서 마우스 좌표값 얻기일반적인 웹페이지에서 마우스의 X, Y 좌표를 가져오는 기본적인 방법입니다.$(document).mousemove(function (event) { console.log("X: " + event.pageX + ", Y: " + event.pageY);}); 설명event.pageX, event.pageY → 브라우저 전체 페이지에서의 마우스 위치event.clientX, event.clientY → 현재 뷰포트(보이는 화면) 기준의 마우스 위치2. 특정 요소(가상의 문서) 내에서 마우스 좌표값 얻기예를 들어, 가상의 문서 역할을 하는 div.container 내부에서 마우스 위치를 가져오는 방법입니다.$(".container").mousemove(functi.. 2025. 3. 25.
jquery 부모페이지에서 아이프레임 특정 클래스에 클래스 추가 및 여러 속성 값 추가 하기 1. 동일한 도메인 아이프레임일 경우 $(document).ready(function () { var iframe = $("#myIframe")[0]; // 아이프레임 요소 가져오기 var iframeDoc = iframe.contentWindow.document; // 아이프레임의 document 객체 가져오기 // 특정 클래스 요소에 여러 개의 속성 추가 $(iframeDoc).find(".target-class").attr({ "data-value": "newData", "title": "Tooltip Text", "aria-label": "Accessible Label", "custom-attr": "customValue" .. 2025. 3. 23.
JavaScript에서 랜덤 난수를 생성하는 방법 JavaScript에서 30자리 랜덤 난수를 생성하는 방법을 아래에 정리했습니다.빠른 방법 (숫자만)function generateRandomNumber(length = 30) { let result = ''; const digits = '0123456789'; for (let i = 0; i  특징숫자만 포함길이 지정 가능 (기본 30자리)더 안전한 방법 (crypto 사용)function secureRandomNumber(length = 30) { const array = new Uint8Array(length); window.crypto.getRandomValues(array); // 보안 난수 생성 return Array.from(array, byte => (byte % 10).toSt.. 2025. 3. 21.
JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경 JavaScript에서 특정 배열 값을 찾아 새로운 값으로 변경하는 방법은 여러 가지가 있습니다. 상황에 따라 아래 방법 중 하나를 선택하면 됩니다.1. map 메서드 사용 (추천)배열을 반복하며 특정 조건일 때만 값을 변경합니다.const fruits = ["apple", "banana", "orange"];const updatedFruits = fruits.map(fruit => fruit === "banana" ? "grape" : fruit);console.log(updatedFruits); // ["apple", "grape", "orange"] 설명map은 새 배열을 반환하며 기존 배열은 변경하지 않습니다.특정 값만 조건(fruit === "banana")으로 교체할 수 있습니다.불변성을 유지.. 2025. 3. 19.
JavaScript에서 특정 배열 값을 찾아 삭제하는 방법 JavaScript에서 특정 배열 값을 찾아 삭제하는 방법은 여러 가지가 있습니다. 사용 목적(원본 배열 유지 여부, 단일/다중 값 삭제)에 따라 적절한 방법을 선택하세요. 1. filter 메서드 사용 (가장 추천)특정 값을 제외한 새 배열을 반환합니다.불변성 유지 → React/Next.js 프로젝트에서 안전하게 사용 가능const fruits = ["apple", "banana", "orange", "banana"];const updatedFruits = fruits.filter(fruit => fruit !== "banana");console.log(updatedFruits); // ["apple", "orange"] 설명filter는 조건(fruit !== "banana")에 맞는 요소만 새 배.. 2025. 3. 17.
addEventListener 기능 addEventListener는 JavaScript에서 이벤트를 요소에 등록할 때 사용하는 메서드입니다. 사용자가 클릭, 키보드 입력, 마우스 이동 등 특정 이벤트를 발생시킬 때 지정된 함수를 실행합니다.기본 문법element.addEventListener(event, listener, options); 매개변수 설명element: 이벤트를 등록할 DOM 요소event: "click", "mouseover", "keydown" 등 이벤트 이름 (문자열)listener: 이벤트 발생 시 실행할 콜백 함수options (선택): boolean 또는 객체로, 이벤트 처리 방식 지정 (capture, once, passive 등) 간단한 예시const button = document.querySelector('.. 2025. 3. 15.
dispatch() 기능 dispatch()는 다양한 라이브러리와 프레임워크에서 상태나 액션을 전달할 때 사용되는 함수입니다. 어떤 컨텍스트에서 사용하는지에 따라 동작이 달라질 수 있습니다. 아래에 몇 가지 대표적인 예시를 소개할게요.1. Redux에서 dispatch()Redux에서 dispatch()는 액션을 리듀서에 전달하여 상태를 업데이트하는 데 사용됩니다.import { useDispatch } from 'react-redux';function Counter() { const dispatch = useDispatch(); const increment = () => { dispatch({ type: 'INCREMENT' }); // 액션을 디스패치 }; return Increment;} 설명dispatch(.. 2025. 3. 13.
React Hook이란? React Hook이란?React Hook은 클래스형 컴포넌트 없이도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도와주는 함수입니다. React 16.8에서 도입되었으며 함수형 컴포넌트에서도 상태 관리 및 부작용(side effects) 처리를 가능하게 합니다.  Hook을 사용하는 이유1. 클래스형 컴포넌트의 복잡성을 줄임기존에는 상태를 관리하려면 class 컴포넌트를 사용해야 했지만, Hook을 사용하면 function 컴포넌트에서도 상태 관리가 가능합니다.// 기존의 클래스형 컴포넌트class Counter extends React.Component { state = { count: 0 }; render() { return ( this.setStat.. 2025. 3. 3.
jquery 특정 영역 외부 클릭 시 이벤트 발생 jQuery를 사용하여 특정 영역 외부를 클릭했을 때 이벤트를 발생시키려면 $(document).on("click") 이벤트를 활용합니다. 클릭한 위치가 특정 영역 내부인지 확인하고 그렇지 않으면 원하는 동작을 수행하도록 처리할 수 있습니다.  기본 코드 예제$(document).ready(function () { $(document).on("click", function (event) { // 특정 영역 선택 (예: #targetElement) if (!$(event.target).closest("#targetElement").length) { // 특정 영역 외부를 클릭했을 때 실행될 동작 console.log("특정 영역 외부를 클릭했습니다!"); // 추가 .. 2025. 2. 8.
jquery 부모 프레임 특정 class 존재 유무 체크 jQuery를 사용하여 자식 페이지(iframe 내부)에서 부모 프레임(iframe을 포함한 페이지)의 특정 클래스 존재 여부를 확인하려면 다음 단계를 따릅니다. 동일 출처 정책(Same-Origin Policy)을 준수해야 하며 자식과 부모가 동일한 도메인, 프로토콜, 포트에 있어야 가능합니다. 1. 기본 코드 (부모 프레임의 클래스 확인)아래는 부모 페이지의 특정 요소에 특정 클래스가 있는지 확인하는 코드입니다.$(document).ready(function () { // 부모 페이지에서 특정 요소를 선택 var parentHasClass = $(window.parent.document).find("#parentElement").hasClass("targetClass"); if (parentHa.. 2025. 2. 6.

티스토리툴바