타입스크립트 리액트 Vite 절대경로 설정하기

Vite 를 사용해서 리액트를 타입스크립트로 구성하는 도중, 절대 경로를 설정하며 정리해 보았습니다.

타입스크립트가 아닌 자바스크립트 방식과는 조금 달랐는데요, vite-tsconfig-paths 모듈 설치 및 vite.config.ts, tsconfig.json 수정으로 해결하였습니다.

목차 숨기기

vite-tsconfig-paths 모듈 설치

vite-tsconfig-paths 모듈은 vite 빌드 도구를 통해 TypeScript의 경로를 매핑을 사용하여 가져올 수 있도록 하는 npm 모듈입니다.

npm install vite-tsconfig-paths --save-dev

절대 경로 지정 위한 vite tsconfig path 모듈

설치가 완료되면 vite.config.ts 를 다음과 같이 수정합니다.

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

아래와 같이 설정을 하면 기본 url이 ./src로 설정이 됩니다.

{
  "compilerOptions": {
    // 절대 경로 설정
    "baseUrl": "./src",

현재 아래와 같이 구성을 해가고 있습니다.

root --
      -- public --
      -- src    --
                -- components
                -- pages
                ....
    App.tsx

즉, src 밑으로 편하게 사용하고 싶은 건데요,

예컨대, src 하위에 pages 컴포넌트를 App.tsx 에서 사용하고자 하다면 다음과 같이 사용할 수 있습니다.

import "./App.css";

import TodoList from "pages/todo/TodoList";

function App(): JSX.Element {
...

만약에 위에서 baseUrl을 “.” 으로 지정했다면

{
  "compilerOptions": {
    // 절대 경로 설정
    "baseUrl": ".",

불러올 때에는 아래와 같이 지정해야 합니다.

import "./App.css";
import TodoList from "src/pages/todo/TodoList";

function App(): JSX.Element {
...

즉, baseUrl을 생략할 수 있다는 느낌으로 사용하면 될 것 같습니다.

이상, vite 빌드 도구에서 typescript 기반 리액트 앱을 개발할 때 절대 경로를 사용하는 방법을 정리해 보았습니다.