본문 바로가기

분류 전체보기142

Zustand와 React Query로 완성한 캐싱 전략과 상태 관리 최적화 1. 들어가며MBTiD를 개발하며 사용자 상태, 친구, 투표 등 다양한 데이터를 다뤄야 했다나는 이 문제를 Zustand와 React Query의 조합을 통해서 풀어나가보았다. 중요하게 생각했던 것은api 호출을 최소화친구 목록과 같은 내가 상태를 바꾸지 않는 한 바뀌지 않는 데이터는 긴 staleTime과 gcTime을 이용해서 캐싱된 데이터를 사용친구 삭제 / 추가 성공시 => setQueryData를 통해 상태 업데이트사용자가 빈화면을 보지 않도록.최신 데이터가 중요한 부분은 최신 데이터를 보여줄 수 있는 것내 투표 리스트, 투표 결과와 같이 최신 데이터가 중요한 데이터 => 기본값인 staleTime 0 / refetchOnMount은 true렌더링을 줄이기shallow 비교로 Zustand 상.. 2025. 6. 20.
웹 성능 최적화 - 폰트 preload와 WebP 이미지 최적화로 LCP 개선 1. 폰트 preload와 외부 CDN 제거 처음에는 해커톤이 목적이었기 때문에 빠른 완성이 중요해서 폰트를 사용하기 위해 url을 사용했다.@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); 다음은 위와 같은 메세지를 확인하고 폰트 로딩을 최적화하고, 외부 CDN을 제거한 과정이다. 1. 폰트 로딩 최적화: preload 사용폰트를 내부에서 받아오고, preload를 사용하여 렌더링 전에 미리 로드함으로써, 폰트가 즉시 적용되도록 하였다.이는 폰트 파일을 렌더링 후에 로드하게 되면, 종종 기본 폰트로 표시되다가 폰트.. 2025. 6. 18.
React.memo를 통해 최적화 - 이해, 적용, 성능 비교 1. WHY? Virtual Dom을 사용하는데 React.memo를 왜 사용할까?React는 가상돔을 사용하기 때문에 상태를 비교한 뒤 달라진 부분만 다시 그리는 걸로 알고 있었기 때문에 React.Memo가 어떤 부분에서 다르고 왜 필요한지 궁금하여 알아보았다 항목 Virtual DOM React.memo렌더링 시점이미 호출된 후호출되기 전주요 역할실제 DOM 조작을 최소화컴포넌트 함수 실행 자체를 방지비교 기준JSX 결과를 기반으로 가상 DOM 비교props를 기반으로 얕은 비교 성능 최적화 단위화면(DOM) 최적화연산(CPU) 최적화 기준에 대해 잘 이해가 되지 않아 gpt에게 물어봤는데 이런 비유를 해줬다. 너무 이해가 잘 되어 공유해본다. Virtual Dom => 매번 밥상을 차리고 저번과 .. 2025. 6. 16.
js 싱글스레드와 비동기처리 보호되어 있는 글 입니다. 2025. 5. 17.

티스토리툴바