I'm sw engineer!

$('#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 // 우선순위 직접 지정};

$.extend(obj1, obj2)는 얕은 복사(shallow copy) 방식으로,obj2의 속성이 obj1과 겹치면 → obj1의 값을 덮어씁니다.👇 예시로 쉽게 설명let a = { others: "회의실 비고 있음", ldCd: "LD123" };let b = { others: null, ldCd: "LD456" };let merged = $.extend({}, a, b); // 또는 $.extend(a, b);console.log(merged.others); // ❌ null 덮이지 않을 객체를 나중에 작성해야한다.

✅ cancelAnimationFrame()으로 취소하는 방법📌 기본 사용법js const id = requestAnimationFrame(myCallback);// 필요 시 취소cancelAnimationFrame(id); 🧪 예시: 클릭하면 애니메이션 중단jslet animationId;function animate(timestamp) { // 애니메이션 처리 console.log("Animating..."); animationId = requestAnimationFrame(animate);}// 시작animationId = requestAnimationFrame(animate);// 3초 뒤 중단setTimeout(() => { cancelAnimationFrame(animationId)..

✅ requestAnimationFrame()의 내부 동작 원리📌 동작 순서JavaScript가 requestAnimationFrame(callback)을 호출하면,브라우저는 다음 프레임을 렌더링하기 직전(callback을 큐에 넣기 전) 타이밍에,callback을 실행합니다.브라우저는 보통 1초에 60번 화면을 그리므로(60fps), 대략 16.67ms마다 한 번씩 callback이 실행됩니다.브라우저의 렌더링 루프와 동기화되어 DOM 변화나 애니메이션을 가장 자연스럽고 효율적으로 처리할 수 있게 합니다.🧠 언제 실행되는가?화면이 활성 상태일 때만 실행됨→ 탭이 비활성화되면 일시 중지됨 → CPU 낭비 X프레임 스케줄에 따라 자동으로 실행 타이밍이 조절됨 → setTimeout보다 정확한 타이밍🧪..

requestAnimationFrame()은 브라우저가 다음 화면을 그리기 직전에 실행할 콜백을 예약하는 함수입니다.주로 애니메이션 처리나 렌더링 타이밍을 정확하게 맞추고 싶을 때 사용합니다. ✅ 기본 사용법js requestAnimationFrame(() => { // 브라우저가 다음 repaint 전에 실행할 코드 // DOM이 렌더링된 이후에 안전하게 실행됨});🧠 개념 요약항목설명실행 시점브라우저가 다음 프레임을 그리기 직전호출 빈도일반적으로 초당 60회 (60fps)주 목적부드러운 애니메이션 / 렌더링 이후 DOM 조작이점setTimeout보다 부드럽고 효율적이며, 렌더링 타이밍 보장 🎯 언제 사용하나?DOM 변경 직후 후속 처리예: innerHTML 또는 .append() 후 특정 요소..

requestAnimationFrame()은 브라우저가 다음 화면을 그리기 직전에 실행할 콜백을 예약하는 함수입니다.주로 애니메이션 처리나 렌더링 타이밍을 정확하게 맞추고 싶을 때 사용합니다. ✅ 기본 사용법js requestAnimationFrame(() => { // 브라우저가 다음 repaint 전에 실행할 코드 // DOM이 렌더링된 이후에 안전하게 실행됨});🧠 개념 요약항목설명실행 시점브라우저가 다음 프레임을 그리기 직전호출 빈도일반적으로 초당 60회 (60fps)주 목적부드러운 애니메이션 / 렌더링 이후 DOM 조작이점setTimeout보다 부드럽고 효율적이며, 렌더링 타이밍 보장 🎯 언제 사용하나?DOM 변경 직후 후속 처리예: innerHTML 또는 .append() 후 특정 요소..

const [a = 1, b = 2] = [10];console.log(a); // 10console.log(b); // 2const { score = 100 } = {};console.log(score); // 100