I'm sw engineer!

✅ .is() 문법$(selector).is(selectorOrFunction) selectorOrFunction: CSS 선택자, DOM 요소, jQuery 객체, 또는 함수반환값: true 또는 false 📌 .is() 예$('.box').each(function() { if ($(this).is('.box')) { console.log('이 요소는 box 클래스입니다.'); }}); .is('.box'): 자신이 .box 클래스인지 확인

jQuery의 .has()는 선택된 요소 집합 중에서 특정 자식을 포함하는 요소만 필터링하는 메서드입니다.📌 문법$(selector).has(selectorOrElement) selectorOrElement: 특정 자식 요소(selector) 또는 DOM 요소를 의미합니다.반환값: 해당 자식 요소를 포함하고 있는 상위 요소만 반환하는 새로운 jQuery 객체입니다.✅ 예제 1: 특정 자식 요소를 가진 부모 필터링 Apple Banana Cherry $('li').has('span').css('color', 'red');📌 결과: 요소 중 을 자식으로 가지고 있는 요소만 빨간색으로 바뀜즉, 2번째와 3번째 만 선택됨 ✅ 예제 2: 특정 DOM 요소가 자식으로 있는지 확인$('#parent1, #p..

항목 #javascript:void(0)의미현재 페이지 최상단 이동JS 코드 실행 후 아무것도 하지 않음기본 동작페이지 최상단으로 스크롤 이동없음preventDefault 필요 여부필요 (evt.preventDefault())불필요SEO 친화도비교적 나쁨 (빈 링크)더 나쁨 (JS 직접 사용은 권장 안 됨)안정성/직관성중간 (제대로 막지 않으면 문제)더 안전하게 이벤트만 실행 가능 ✅ 왜 href="javascript:void(0)"은 SEO에 안 좋을까?링크로써 의미 있는 목적지가 없기 때문입니다.검색 로봇이 "이건 클릭해도 갈 곳이 없는 링크네"라고 판단합니다.내부 링크 구조를 파악하지 못하면 페이지 랭크 전달, 색인 등록 등 SEO 점수가 낮아집니다.즉, a 태그는 실제로 이동할 콘텐츠가 있을 때만..

hide()는 화면에서만 숨기고 DOM에는 그대로 남아 있는 반면,remove()는 DOM 자체에서 요소를 완전히 제거합니다.메서드 설명hide()요소를 display: none으로 만들어 화면에서 숨김. DOM에는 존재.remove()요소를 DOM 트리에서 완전히 제거. 이후 .find()로도 못 찾음.detach()DOM에서 제거하지만, 이벤트 핸들러/데이터는 유지. 나중에 다시 붙일 수 있음. ✅ 언제 remove를 쓸까?폼에서 아예 해당 항목이 필요 없을 때성능상 필요 없는 노드를 줄이고 싶을 때사용자에게 혼란을 줄 수 있는 비활성화 필드 자체를 안 보여줄 때필요에 따라 hide() vs remove() 선택하시면 됩니다.remove()를 사용하면 이후 해당 요소는 다시 show()로 복구할 수..

pointer-events는 CSS 속성 중 하나로, 마우스 클릭이나 터치 같은 "포인터 이벤트"를 해당 요소에 전달할지 여부를 결정합니다.🔍 쉽게 말해:pointer-events: none;을 주면,해당 요소는 클릭되지 않으며, hover, active 등도 무시됩니다.🧪 예시클릭 안 됨클릭 됨 none → 클릭해도 아무 일도 안 생김auto → 기본 동작 (클릭 가능) 이 버튼도 클릭 안됨 부모인 에 pointer-events: none을 줘도, 자식인 버튼도 클릭 안 됩니다. 값설명auto기본값, 포인터 이벤트 정상 처리none포인터 이벤트 무시 (클릭, hover 모두 무시)inherit부모 요소의 값을 상속

let isSubmitting = false;$('#submitBtn').on('click', async function() { if (isSubmitting) return; isSubmitting = true; try { await submitOpinion(); // 예: 의견 등록 API 호출 alert('의견이 등록되었습니다.'); } catch (e) { alert('오류 발생'); } finally { isSubmitting = false; }});

$('#submitBtn').on('click', async function() { const $btn = $(this); if ($btn.prop('disabled')) return; // 이미 눌렸다면 무시 $btn.prop('disabled', true); // 버튼 비활성화 try { // 등록 로직 await submitOpinion(); // 예: 의견 등록 API 호출 alert('의견이 등록되었습니다.'); } catch (e) { console.error(e); alert('등록 중 오류가 발생했습니다.'); } finally { $btn.prop('disabled', fal..

✅ 기본적인 차이$.extend(a, b):첫 번째 인자(a)에 두 번째 인자(b)의 내용을 덮어씁니다.첫 번째 인자가 원본 객체이므로, 원본 객체가 변경됩니다.$.extend({}, a, b):첫 번째 인자에 빈 객체 {}를 전달하고, **a와 b**를 병합합니다.원본 객체(a)는 변경되지 않고, 새 객체가 생성되어 병합된 결과를 반환합니다.✅ 상세 비교1. $.extend(a, b)동작: 첫 번째 인자에 두 번째 인자의 속성을 덮어씁니다.결과: 원본 객체(a)가 변경됩니다.jslet a = { others: "기타사항" };let b = { others: null, memo: "메모" };$.extend(a, b); // a에 b의 값을 덮어씀console.log(a.others); // null (..

$.extend({ deepMerge: function(target, source) { for (let key in source) { if (source[key] !== null) { // null일 경우 덮어쓰지 않음 target[key] = source[key]; } } return target; }}); let a = { others: "기타사항" };let b = { others: null };let result = $.extend.deepMerge({}, a, b);console.log(result.others); // "기타사항" (b.others가 null이므로 덮어쓰지 않음)

const merged = { ...ldDetail.result, ...mtrmLead, others: mtrmLead.others ?? ldDetail.result.others // 우선순위 직접 지정};