Path Aliases

Path aliases는 TypeScript의 유용한 기능으로, 프로젝트 디렉토리 구조에서 멀리 떨어진 경로에 대한 단축 경로를 정의할 수 있습니다. 이를 통해 코드에서 긴 상대 경로를 피할 수 있으며, 프로젝트 구조를 리팩터링하기 쉽게 만들어줍니다. 특히 긴 상대 경로를 피해야 할 때 매우 유용합니다.

TanStack Start는 기본적으로 Path aliases를 포함하지 않지만, tsconfig.json 파일을 업데이트하여 프로젝트에 쉽게 추가할 수 있습니다. 프로젝트 루트의 tsconfig.json 파일에 다음 구성을 추가하세요:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["app/*"]
    }
  }
}

이 예제에서, ~/*라는 Path alias를 정의했으며, 이는 app/* 디렉토리에 매핑됩니다. 이제 ~ 접두사를 사용하여 app 디렉토리의 파일을 import할 수 있습니다.

tsconfig.json 파일을 업데이트한 후, TanStack Start 프로젝트에서 Path aliases를 활성화하려면 vite-tsconfig-paths 플러그인을 설치해야 합니다. 다음 명령어를 실행하여 설치하세요:

npm install -D vite-tsconfig-paths

그런 다음, app.config.ts 파일을 업데이트하여 다음 구성을 추가하세요:

// app.config.ts
import { defineConfig } from "@tanstack/start/config";
import viteTsConfigPaths from "vite-tsconfig-paths";
 
export default defineConfig({
  vite: {
    plugins: [
      // Path aliases를 활성화하는 플러그인
      viteTsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },
});

구성을 완료한 후, 이제 Path alias를 사용하여 다음과 같이 파일을 import할 수 있습니다:

// app/routes/posts/$postId/edit.tsx
import { Input } from "~/components/ui/input";
 
// 대신에
 
import { Input } from "../../../components/ui/input";

Static Prerendering Router