성능최적화 (4) 썸네일형 리스트형 [javascript] structuredClone() 가이드: 깊은 복사부터 고급 활용까지 자바스크립트에서 객체를 복사하는 방법은 여러 가지가 있지만, 그중에서도 structuredClone()은 깊은 복사를 위한 강력한 도구입니다. 얕은 복사와 깊은 복사의 차이점부터, structuredClone()의 동작 방식, 장단점, 그리고 실제 개발에서 유용하게 사용할 수 있는 고급 활용법까지 자세히 알아보겠습니다. 1. 깊은 복사 vs 얕은 복사: 왜 structuredClone()이 필요할까요? 자바스크립트에서 객체를 복사할 때 얕은 복사와 깊은 복사라는 두 가지 방법이 있습니다.얕은 복사: 객체의 참조만 복사합니다. 즉, 복사된 객체와 원래 객체가 같은 메모리 주소를 가리키므로, 복사된 객체를 변경하면 원래 객체도 함께 변경됩니다. Object.assign()이나 스프레드 연산자(...)가 대표.. [Medium 번역글] 시니어 개발자가 되기 위한 18가지 React 기술 보호되어 있는 글입니다. [TanStack Query / React Query] useInfiniteQuery와 무한 스크롤 useInfiniteQuery는 페이지네이션이나 무한 스크롤과 같은 데이터 로딩을 구현할 때 사용됩니다. 1. useQuery 와 useInfiniteQuery의 차이 ● useQuery단일 데이터 객체 반환 한 번의 요청에 대한 응답만 저장 ● useInfiniteQuerypages 배열: 모든 페이지의 데이터를 순서대로 저장 pageParams 배열: 각 페이지를 가져올 때 사용된 매개변수 저장 여러 페이지의 데이터를 누적하여 저장 좀 더 이해하기 쉽게 data에 로그를 찍어보면 useQuery 와 uesInfiniteQuery 의 반환되는 data 의 구조는 다음과 같은 차이가 있습니다 1-1. useQuery const { data } = useQuery({ queryKey: ['i.. [TanStack Query / React Query] prefetchQuery : 데이터 선제적 로딩 이전 토이 프로젝트에서는 react-router 와 함께 사용하여loader 를 이용하여 페이지가 열리기 전, 사전에 데이터를 가져오는 방법을 사용했었지만순수하게 TanStack Query 를 사용하여 사전에 데이터를 가져오는 방법을 찾아보았습니다. prefetchQuery & prefetchInfiniteQuery https://tanstack.com/query/latest/docs/framework/react/guides/prefetching#prefetchquery--prefetchinfinitequery TanStack | High Quality Open-Source Software for Web DevelopersHeadless, type-safe, powerful utilities for c.. 이전 1 다음
