DYO 공부하는 블로그

왜 Tanstack Query는 staleTime과 gcTime을 분리해 관리할까?Tanstack Query는 데이터 재요청 시간인 staleTime의 기본값은 0분이고, gcTime의 기본값은 5분이다. 왜 이 둘을 분리해 관리할까? Tanstack Query와 유사한 기능을 하는 라이브러리인 SWR은 라이브러리 이름이 정답을 그대로 서술하고 있다. SWR의 풀네임은 Stale-While-Revalidate이다. 이 말인 즉, 검증하기 전에 메모리에 남아 있는 캐싱된 데이터를 보여 주고, 재검증이 완료된 데이터를 새로 보여준다는 의미이다. 어떻게 동작하는지staleTime이 지났을 경우 Tanstack Query는 서버에 재요청하고 캐시를 갱신한다. 이때, gcTime이 남아있다면 메모리에 남아 있는 ..

Masonry란? Masonry는 사전적으로는 벽돌 쌓기입니다. 아이템들을 높이가 다른 벽돌을 쌓는 것처럼 쌓아주는 레이아웃을 의미합니다. flex, grid레이아웃은 줄 단위로 정렬하기 때문에 높낮이가 다른 아이템을 정렬할 때, 아래 공간이 남는 문제가 발생하게 됩니다. 이러한 문제를 해결하기 위해 Masonry 레이아웃이 등장했습니다. 비율을 계산해 이미지를 잘리지 않도록 고정 width에 고정하는 것은 어렵지 않지만, 결국 문제는 "배치를 어떻게 할 것인가." 입니다.// ... const aspectRatio = imageWidth / imageHeight; const height = width / aspectRatio; return ( )// ...구현 아이디어와 ..

0. 왜 Tanstack을 많이 쓰나요?Tanstack Query 기능의 강력한 점을 정리하면staleTime과 gcTime을 이용한 캐싱, 최신화 관리refetchOnWindowFocus와 같은 브라우저 레벨의 유저 동작에서의 제어 옵션select 등을 이용한 return 데이터 가공isLoading, isPending, isError 등과 같은 다양한 상황에서 제공되는 상태defaultSetting으로 전역적인 쿼리 클라이언트 동작 제어onMutate, isError Callback 등으로 이벤트 발생 타이밍마다 작동하는 콜백 제어로 낙관적 업데이트 가능queryClient 직접 제어를 통한 쿼리 무효화, refetching 등 직접 제어 가능무한 스크롤 제어에 특히 강력한 InfinityQuery과..

Next란?React 기반 풀스택 웹 프레임워크이고 SSR(서버 사이드 렌더링)과 SSG(정적 웹 페이지 생성)를 지원한다. Next는 초기 로딩 속도 개선, SPA 작동 방식의 가장 큰 문제인 SEO(검색 엔진 최적화) 문제를 해결하기 위해서 등장했다. Next는 풀스택 프레임워크이므로 프론트, 백 구분 없이 작성 가능하고 번들러 또한 terbopack으로 지원하고 있다. ( Vercel 배포 환경에서 최적화되어 있고, 다른 배포 환경에서는 문제가 있을 수 있으니 Webpack 사용도 고려 ) 다양한 내장 컴포넌트를 이용한 최적화 기능이 다수 마련되어 있고, JS 파일도 함께 내려줘야 하는 CSR(클라이언트 사이드 렌더링)방식과 달리 정적 HTML을 보내 줄 수 있는 SSR(서버 사이드 렌더링)의 속도..

로깅 아키텍쳐로깅이란?로깅이 필요한 이유로깅 타겟로깅 분석 도구로그 코드 넣기마무리로깅이란?백엔드에서는 시스템 에러와 같은 문제를 파악하기 위해서 사용하지만 프론트엔드에서는 사용자가 제품을 어떻게 사용하는지, 제품을 사용할 때 어떤 행동을 하는지 로그로 기록하고 분석해 비즈니스 측면으로 도움을 줄 수 있는 방법이다.큰 단위로는 페이지에서 체류 시간 (active time)을 기록하거나form의 버튼과 같은 컴포넌트 이벤트 발생에 대해서도 기록할 수 있습니다. 📊 로깅이 필요한 이유유저의 경향성 분석을 통해 개선 방향성을 탐색하거나 유저 페르소나를 정의하는 등의 비즈니스적 활동을 겸하는 활동을 할 수 있습니다. 비즈니스적인 성격도 많이 가지고 있기 때문에 이 데이터를 이용해 기획팀이 개선 방향성을 도출하..

Zustand를 사용하지 않는 환경에서는 모달창과 같은 화면 전체를 채우는 오버레이를 띄울 때, setState함수를 Props로 해당 이벤트가 발생하는 모든 버튼에 대해서 따로 내려줘야 하는 문제가 있었다. Zustand를 사용한 Root 페이지에서의 오버레이 통제에 대해서 알아보자. 기본적으로 React-Router와 Zustand를 사용하는 기준으로 구성되었다. 기본 구성 ( Props 대신 Zustand 이용 )store 구성import { create } from "zustand";// 공용 UIShellStatetype UIShellState = { modalOpen:boolean; setModalOpen:(visibility:boolean) => void;}const Initial = {..

상태 관리 라이브러리중에 가볍고, 사용하기 쉬워 트렌드가 된 Zustand에 대해서 알아보자. 기본적인 사용법부터 24년 10월에 업데이트된 Zustand v5의 변경점까지 다뤄보자. 예시와 함께 보는 Zustand 사용법📥 설치# NPMnpm install zustand# 다른 패키지 매니저도 상관없다. 설치는 이게 끝이다. zustand의 많은 장점 중에는 보일러플레이트가 작다는 장점이 있다. 🔔 Store 선언상태를 공유하는 저장소를 Zustand에서는 Store라고 정의한다. 접두어를 커스텀 훅처럼 use를 접두어를 붙여서 선언해줘야 한다. 기존 상태와 얕게 병합(shallow merge)되기 때문에 깊은 병합을 하기 위해서는 immer또는 전개식을 이용하여 깊은 복사를 처리해줘야 한다. St..

Presentational-Container 패턴의 모든 것: Hooks로 대체할 수 있을까?리액트 디자인 패턴 중 하나인 Presentational-Container 패턴: Hooks로 완벽히 대체할 수 있을까? 어떻게 효율적으로 UI와 비즈니스 로직을 분리할 수 있을까?velog.io 위 포스팅을 읽고 작성하는 이해를 담은 포스팅입니다. Presentational-Container 패턴이란?- Presentational Component : UI(렌더링, 스타일)만 담당하며 상태나 비즈니스 로직이 없습니다. props로 받은 데이터를 시각적으로 표현하는 역할만 하도록 해 재사용성과 테스트 용이성이 높아진다. (dumb component)- Container Component : 상태 관리, API 호..