I'm sw engineer!

✅ 기본적인 차이$.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 덮이지 않을 객체를 나중에 작성해야한다.

❗ 파일 누락이 발생하는 원인원인설명✅ 서버 처리 속도 부족병렬로 여러 요청이 들어오면 서버가 일부 요청을 정상적으로 처리 못함✅ 네트워크 문제느린 인터넷에서 병렬로 업로드 시 일부 전송 실패 가능✅ Dropzone 이벤트 처리 오류addedfile, sending, success 등 이벤트를 잘못 연결해서 생기는 문제✅ 너무 큰 파일 or 파일 수 과다Dropzone은 내부적으로 큐를 돌리는데, 이 큐 처리가 꼬일 수 있음✅ 서버 제한 (예: nginx, apache, WAS)동시에 처리 가능한 요청 수 제한 설정 (e.g., max concurrent connections) ✅ 그럼 어떻게 설정하는 게 좋을까?✔ 일반적인 권장 사항파일 누락 이슈가 없다면 parallelUploads: 2~4 정도가 ..

✅ 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() 후 특정 요소..

performance.getEntriesByType("navigation")는 페이지의 로딩 방식(예: 새로고침, 히스토리 탐색, 최초 로드 등) 을확인하기 위해 사용되는 Web Performance API의 메서드입니다.이를 통해 브라우저가 페이지를 어떤 방식으로 불러왔는지를 알 수 있습니다. 📌 문법javascriptconst entries = performance.getEntriesByType("navigation");반환값: PerformanceNavigationTiming 객체 배열 (보통 하나의 항목만 존재)이 객체에는 type, startTime, duration 등 다양한 로딩 관련 정보가 포함되어 있습니다.📘 주요 속성 (PerformanceNavigationTiming)javasc..

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