debounce2 Fabric.js에서 디바운싱을 활용한 정렬 가이드 기능 최적화 Fabric.js와 jQuery를 사용하여 웹 에디터를 개발하면서, 객체를 정렬할 때 정렬 가이드를 표시하는 기능을 구현했습니다. 처음에는 객체가 이동할 때마다 object:moving 이벤트에서 직접 정렬 가이드를 그리는 방식으로 구현했습니다. 하지만 이 방법은 객체를 빠르게 이동할 때 불필요한 계산과 렌더링이 반복되어 성능 문제가 발생했습니다. 이를 해결하기 위하여 디바운싱을 적용한 사례를 소개해드리고자합니다. 정렬 가이드란?정렬 가이드는 사용자가 객체를 이동할 때 다른 객체와의 정렬을 쉽게 할 수 있도록 도와주는 시각적 보조 도구입니다. Figma, Sketch 등의 디자인 툴에서 흔히 볼 수 있는 이 기능은 사용자 경험을 크게 향상시킵니다.기본 코드먼저, 디바운싱을 적용하지 않은 기본적인 정렬 가.. 2024. 7. 25. 리액트 디바운싱, 쓰로틀링(Debouncing, Throttling) Debouncing과 Throttling이란?디바운싱(Debouncing)과 쓰로틀링(Throttling)은 특정 시간 동안 함수가 너무 많이 호출되는 경우, 함수 실행을 제어할 수 있는 기법입니다. 리액트 애플리케이션을 개발하다 보면, 사용자 입력이나 이벤트 핸들링 시 성능 문제에 직면할 수 있습니다. 이때 디바운싱과 쓰로틀링 기법을 활용하면 불필요한 함수 호출을 줄이고 애플리케이션의 성능을 향상시킬 수 있습니다. 동작 예시 디바운싱(Debouncing)디바운싱은 연이은 함수 호출을 그룹화하여 마지막 호출 이후 일정 시간이 지난 후에 한 번만 실행되도록 하는 기법입니다. 예를 들어, 검색어 입력 시 API 요청을 보내는 경우, 사용자가 입력을 완료할 때까지 기다렸다가 마지막 입력 이후 한 번만 API .. 2024. 7. 17. 이전 1 다음 반응형
