import React, { useRef, useState } from 'react';export const useTimer = () => { const [time, setTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(); const startTimer = () => { if (!isRunning) { setIsRunning(true); intervalRef.current = setInterval(() => { setTime(prevTime => prevTime + 1); }, 1000); } }; const..

하나의 HTML 문서를 구성하는 콘텐츠는 다양합니다.단순한 마크업 텍스트 뿐만 아니라, css와 폰트 그리고 이미지가 가득합니다.그런데 현대 웹은 더이상 단순한 “페이지”가 아닙니다.콘텐츠가 많은 만큼 사용자 경험을 개선하기 위해 비동기 처리를 하고, 상태를 빠르게 업데이트를 해야 하기 때문입니다.코드가 점점 복잡해지는 문제를 해결하기 위해, 프론트엔드는 공통되는 로직을 추상화하고 분리하는 사고를 코드에 적용하게 되었습니다.즉 모듈화한 것이죠.이는 재사용성을 추구하는 개발자의 입장에서 매우 편리한 해결 방법입니다.하지만 이렇게 많아진 파일을 HTML의 나 를 작성해서 일일이 받아오기에는 문제가 많습니다.css나 js 파일 간 의존성(import)이 있다면 로드 순서를 보장하기 어렵습니다.브라우저는 각 파..

디바운스(Debounce)와 쓰로틀링(Throttling)은 웹 개발에서 이벤트 처리를 최적화하기 위해 사용되는 두 가지 기법이다. 이들은 연속적으로 발생하는 이벤트를 효율적으로 관리하여 성능을 향상시키는 데 도움을 준다. 디바운스(Debounce) 디바운스는 연속적으로 발생하는 이벤트 중 마지막 이벤트만을 처리하는 기법이다. 즉, 일정 시간 동안 이벤트가 발생하지 않을 때까지 대기한 후, 마지막에 발생한 이벤트를 실행한다. 이는 사용자가 입력을 멈춘 후에만 처리를 수행하므로, 불필요한 연산을 줄일 수 있다. 사용 사례검색 자동완성 : 사용자가 입력을 멈춘 후에만 서버에 요청을 보내어 검색 결과를 가져온다.창 크기 조절 : 사용자가 창 크기 조절을 멈춘 후에 레이아웃을 재계산한다. 쓰로틀링(Throttl..