개발기록

🌱  결과물 🌱  디바운싱(Debouncing): 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 아래는 디바운싱을 적용하기 전과 후의 검색어 요청 모습이다. "안녕하세요" 라는 검색어를 입력 중인데, 적용 전은 매 입력마다 요청을 하고, 적용 후에는 최종 검색어만 요청을 한다.// 디바운싱 const [debouncedInput, setDebouncedInput] = useState(input); useEffect(() => { const handler = setTimeout(() => { setDebouncedInput(input); }, 300); // 300ms 지연 return () => { clearTimeout(hand..

🌱  결과물 🌱  Lighthouse 성능 측정 🌱  Tanstack Query - 비동기 API 호출 // src/hooks/useFetchData.tsimport { useQuery } from '@tanstack/react-query';async function fetchData (page: number, limit: number = 12) { // sessionStorage 데이터 존재 유무 확인. const cachedData = sessionStorage.getItem(`catImages-page-${page}`); if (cachedData) return JSON.parse(cachedData); const response = await fetch(`https://ap..