[vite/react/typescript] 프로젝트에 절대경로 적용하기

개요

vite/react/typescript 프로젝트에 절대경로를 적용하면 다음 사진과 같이 절대경로를 이용한 것과 같이, 특정 폴더를 기준으로 다른 파일을 import할 수 있다. 정확한 절대 경로의 정의는 아니지만, 해당 글에서는 다음 사진과 같은 경로를 '절대경로'라고 지칭하겠다.
상대경로를 사용하면 좋기는 하지만, 여러 서로 다른 위치의 파일을 import하는 경우엔 각 파일이 위치한 경로에 따라 같은 파일이라도 경로가 다르게 적힐 수 있다.
프로젝트에 절대 경로를 적용하여 이를 단순화하자.

해당 글은 여러 다른 react 절대경로 글을 보고, 이것만 봐도 성공할 수 있도록 작성된 글이다. 명시된 버전에서는 따로 오류가 나지 않을 뿐더러, 성공적으로 절대경로를 적용할 수 있을 것이다.

환경

• 작성일: 2025-06-26
• node.js 버전: v22.13.0
• vite 버전: vite/6.3.5 win32-x64 node-v22.13.0
• 기타 다른 dependencies 버전:
  • "@types/node": "^24.0.4",
  • "@types/react": "^19.1.2",
  • "@types/react-dom": "^19.1.2",

방법

1. @types/node 라이브러리 설치

npm install --D @types/node

2. vite.config.ts에서 resolve.alias 옵션 설정

// vite.config.ts
...
import path from "path";

export default defineConfig({
...
resolve: {
    alias: {
    "@": path.resolve(__dirname, "./src"),
    },
},
});

3. tsconfig.app.json에도 alias 설정

// tsconfig.app.json
{
"compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
    "@/*": ["./src/*"]
    }
},
"include": ["src"]
}

결과

위의 방법을 그대로 따라한다면, 다음 사진과 같이 프로젝트에 절대경로를 적용할 수 있다.

참고자료

https://llddang-blog.tistory.com/68