개발자 메론빵

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

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그리고 다음과 같은 컴포넌트 트리를 렌더링할 수..