개발자 메론빵

FSD 구조를 사용할 때 TanStack Query를 더 효율적으로 사용하기 위해 QueryFactory 형식으로 API요청 관리해주면 좋다는 FSD 공식문서 내용을 보고 queryFactory를 적용 해보기로 한다. qeuryFactory는 queryOptions로 구성한다.📌queryOptionsqueryKey와 queryFn을 재설정 없이 공유하기 위해 queryOptions를 사용할 수 있다. 한 곳에서 공통 옵션을 정의해주어 반복 설정해주지 않아도 된다는 이점이 있다.const getLearnerStatus = (learnerId: string) => queryOptions({ queryKey: ['learnerStatus', learnerId], queryFn:..

📌Code SplittingCode splitting과 lazy loading번들 사이즈와 로드 성능을 향상시킨다.초기 페이지 로드 시 로드해야 하는 코드의 양을 줄인다.코드는 필요할 때 로드된다 (on-demand 방식)코드를 더 작은 단위의 청크로 나누어 저장하기 때문에 브라우저가 더 쉽게 캐시할 수 있다.코드 분할 방법1. Critical Route Configuration (중요 라우터 구성)현재 라우트를 렌더링하고 가능한 빨리 데이터 로딩 프로세스를 시작하는 데 필요한 코드💡 Critical Route Configuration 예시경로 파싱/직렬화(Path Parsing/Serialization)검색 매개변수 검증(Search Param Validation)로더(Loaders), 로드 전(B..

❓TransitionUI에서 중요도가 낮은 작업을 백그라운드에서 처리하는 것📌useTransition?React 18에서 도입된 훅으로 UI 업데이트를 트랜지션으로 처리하여 사용자 경험을 개선하는 데 사용된다. 비동기 작업이나 시간이 오래 걸리는 상태 업데이트를 처리할 때 유용하다.📌useTransition 사용 방법const [isPending, startTransition] = useTransition();useTransiton을 사용해 상태 업데이트를 낮은 우선 순위로 처리할 수 있다.useTransition은 매개변수를 받지 않는다.useTransition 훅은 isPending과 startTransition을 반환한다.isPending : 트랜지션 진행 중 여부 (boolean)startTr..

Vite Plugin & Devtool 설치npm install --save-dev @tanstack/router-plugin @tanstack/router-devtoolsvite.config.ts 설정import { defineConfig } from 'vite'import viteReact from '@vitejs/plugin-react'import { TanStackRouterVite } from '@tanstack/router-plugin/vite'export default defineConfig({ plugins: [ TanStackRouterVite(), viteReact(), ..., ],})main.tsximport { StrictMode } from 'react';im..

📌 Route Trees & Nesting다른 라우터처럼 TanStack Router는 중첩된 라우트 트리를 사용하여 URL과 렌더링할 올바른 컴포넌트 트리를 매칭한다.TanStack Router는 라우트 트리를 구축하기 위해 두 가지 방식을 지원한다.파일 기반 라우팅코드 기반 라우팅두 방법 모두 동일한 기능을 지원하지만 파일 기반 라우팅은 더 적은 코드로 더 나은 결과를 구현할 수 있어 권장되는 방법이다.Route Trees중첩 라우팅은 URL을 사용해 중첩된 컴포넌트 트리를 렌더링할 수 있게 해주는 강력한 개념이다.예를 들어, /blog/posts/123 라는 URL이 주어졌을 때 다음과 같은 계층 구조를 매칭할 수 있다./blogposts$postId그리고 다음과 같은 컴포넌트 트리를 렌더링할 수..