can you clean up this function to have the least amount of redundancy and keep the behavior the same? make it really clean and use local variables or even loops to make it compact. 
let mousedownOnResizer = (e) => {
 this.setZOnTop();
 let prevX = e.clientX;
 let prevY = e.clientY;
 let currentResizer = e.target;
 let rect = this.outer.getBoundingClientRect();
 let prevLeft = rect.left;
 let prevTop = rect.top;
 let newWidth;
 let newHeight;
 const barHeight = 20;
 let newSize = null;

 const mouseup = () => {
 isResizing = false;
 window.removeEventListener('mousemove', mousemove);
 window.removeEventListener('mouseup', mouseup);
 if (this.callback && newSize) {
 this.callback(newSize);
 }
 };

 const mousemove = (e) => {
 const newX = prevX - e.clientX;
 const newY = prevY - e.clientY;

 if (currentResizer === this.sizers[0]) {
 newWidth = rect.width - newX;
 newHeight = (rect.height - barHeight) + newY;
 const ratio = newHeight / newWidth;
 var ar = this.aspectRatio || ratio;

 if (ratio > ar && newWidth > minWidth) {
 this.outer.style.top = prevTop - newY + 'px';
 this.outer.style.height = newHeight + 'px';
 this.outer.style.width = (newHeight / this.aspectRatio) + 'px';
 newSize = [(newHeight / ar), newHeight];
 } else {
 const actualNewHeight = (newWidth \* ar);
 this.outer.style.width = newWidth + 'px';
 this.outer.style.height = actualNewHeight + 'px';
 this.outer.style.top = (prevTop + rect.height - actualNewHeight) + 'px';
 newSize = [newWidth, actualNewHeight];
 }
 } else if (currentResizer === this.sizers[1]) {
 newWidth = Math.abs(rect.width - newX);
 newHeight = Math.abs(rect.height - newY);
 const ratio = newHeight / newWidth;

 var ar = this.aspectRatio || ratio;

 if ((ratio) < ar) {
 newWidth = Math.max(newWidth, minWidth);
 this.outer.style.width = newWidth + 'px';
 this.outer.style.height = (newWidth \* ar) + 'px'
 newSize = [newWidth, newWidth \* ar]
 } else {
 newHeight = Math.max(newHeight, minHeight);
 this.outer.style.height = newHeight + 'px';
 this.outer.style.width = (newHeight / ar) + 'px'
 newSize = [(newHeight / ar), newHeight]
 }
 } else if (currentResizer === this.sizers[2]) {
 newWidth = rect.width + newX;
 newHeight = rect.height - newY;
 const ratio = newHeight / newWidth;

 var ar = this.aspectRatio || ratio;

 if (ratio < ar && newWidth > minWidth) {
 this.outer.style.left = prevLeft - newX + 'px';
 this.outer.style.width = newWidth + 'px';
 this.outer.style.height = (ar \* newWidth) + 'px';
 newSize = [newWidth, (ar \* newWidth)];
 } else {
 const actualNewWidth = (newHeight / ar);
 this.outer.style.height = newHeight + 'px';
 this.outer.style.width = actualNewWidth + 'px';
 this.outer.style.left = (prevLeft + rect.width - actualNewWidth) + 'px';
 newSize = [actualNewWidth, newHeight];
 }
 } else if (currentResizer === this.sizers[3]) {
 newWidth = rect.width + newX;
 newHeight = rect.height + newY;
 const ratio = newHeight / newWidth;
 var ar = this.aspectRatio || ratio;

 if (ratio < ar) {
 this.outer.style.left = prevLeft - newX + 'px';
 this.outer.style.width = newWidth + 'px';
 const actualNewHeight = (newWidth \* ar);
 this.outer.style.height = actualNewHeight + 'px';
 this.outer.style.top = (prevTop + rect.height - actualNewHeight) + 'px';
 newSize = [newWidth, actualNewHeight]
 } else {
 this.outer.style.top = prevTop - newY + 'px';
 this.outer.style.height = newHeight + 'px';
 const actualNewWidth = (newHeight / ar);
 this.outer.style.width = actualNewWidth + 'px';
 this.outer.style.left = (prevLeft + rect.width - actualNewWidth) + 'px';
 newSize = [actualNewWidth, newHeight]
 }
 }
 e.preventDefault();
 };

 isResizing = true;
 window.addEventListener('mousemove', mousemove);
 window.addEventListener('mouseup', mouseup);
 };
이 함수를 정리하여 중복성을 최소화하고 동작은 동일하게 유지할 수 있을까요? 정말 깔끔하게 만들고 지역 변수나 루프를 사용하여 컴팩트하게 만들 수 있습니다. let mousedownOnResizer = (e) => { this.setZOnTop(); let prevX = e.clientX; let prevY = e.clientY; let currentResizer = e.target; let rect = this.outer.getBoundingClientRect(); let prevLeft = rect.left; let prevTop = rect.top; let newWidth; let newHeight; const barHeight = 20; let newSize = null; const mouseup = () => { isResizing = false; window.removeEventListener('mousemove', mousemove); window.removeEventListener('mouseup', mouseup); if (this.callback && newSize) { this.callback(newSize); } }; const mousemove = (e) => { const newX = prevX - e.clientX; const newY = prevY - e.clientY; if (currentResizer === this.sizers[0]) { newWidth = rect.width - newX; newHeight = (rect.height - barHeight) + newY; const ratio = newHeight / newWidth; var ar = this.aspectRatio || ratio; if (ratio > ar && newWidth > minWidth) { this.outer.style.top = prevTop - newY + 'px'; this.outer.style.height = newHeight + 'px'; this.outer.style.width = (newHeight / this.aspectRatio) + 'px'; newSize = [(newHeight / ar), newHeight]; } else { const actualNewHeight = (newWidth \* ar); this.outer.style.width = newWidth + 'px'; this.outer.style.height = actualNewHeight + 'px'; this.outer.style.top = (prevTop + rect.height - actualNewHeight) + 'px'; newSize = [newWidth, actualNewHeight]; } } else if (currentResizer === this.sizers[1]) { newWidth = Math.abs(rect.width - newX); newHeight = Math.abs(rect.height - newY); const ratio = newHeight / newWidth; var ar = this.aspectRatio || ratio; if ((비율) < ar) { newWidth = Math.max(newWidth, minWidth); this.outer.style.width = newWidth + 'px'; this.outer.style.height = (newWidth \* ar) + 'px' newSize = [newWidth, newWidth \* ar] } else { newHeight = Math.max(newHeight, minHeight); this.outer.style.height = newHeight + 'px'; this.outer.style.width = (newHeight / ar) + 'px' newSize = [(newHeight / ar), newHeight] } } } else if (currentResizer === this.sizers[2]) { newWidth = rect.width + newX; newHeight = rect.height - newY; const ratio = newHeight / newWidth; var ar = this.aspectRatio || ratio; if (ratio < ar && newWidth > minWidth) { this.outer.style.left = prevLeft - newX + 'px'; this.outer.style.width = newWidth + 'px'; this.outer.style.height = (ar \* newWidth) + 'px'; newSize = [새로운 너비, (ar \* 새로운 너비)]; } else { const actualNewWidth = (newHeight / ar); this.outer.style.height = newHeight + 'px'; this.outer.style.width = actualNewWidth + 'px'; this.outer.style.left = (prevLeft + rect.width - actualNewWidth) + 'px'; newSize = [실제 새 너비, 새 높이]; } } else if (currentResizer === this.sizers[3]) { newWidth = rect.width + newX; newHeight = rect.height + newY; const ratio = newHeight / newWidth; var ar = this.aspectRatio || ratio; if (ratio < ar) { this.outer.style.left = prevLeft - newX + 'px'; this.outer.style.width = newWidth + 'px'; const actualNewHeight = (newWidth \* ar); this.outer.style.height = actualNewHeight + 'px'; this.outer.style.top = (prevTop + rect.height - actualNewHeight) + 'px'; newSize = [newWidth, actualNewHeight] } else { this.outer.style.top = prevTop - newY + 'px'; this.outer.style.height = newHeight + 'px'; const actualNewWidth = (newHeight / ar); this.outer.style.width = actualNewWidth + 'px'; this.outer.style.left = (prevLeft + rect.width - actualNewWidth) + 'px'; newSize = [실제 너비, 새로운 높이] } } e.preventDefault(); }; isResizing = true; window.addEventListener('마우스이동', 마우스이동); window.addEventListener('mouseup', mouseup); };