개인 프로젝트 | Linkeeper - 3

절대 경로 설정하기 (Vite + React-ts)

상대 경로와 절대 경로

상대 경로와 절대 경로는 파일이나 디렉토리의 위치를 나타내는 데 사용하는 경로이다. 상대 경로는 현재 작업 중인 디렉토리를 기준으로 파일이나 디렉토리의 위치를 나타낸다. 절대 경로는 파일이나 디렉토리의 전체 경로를 나타낸다.

절대 경로를 사용하는 이유

React 프로젝트에서 종종 다음과 같은 import 구문을 볼 수 있다.

import SomeComponent from '../../../components/SomeComponent'

현재 디렉토리를 기준으로 해당 컴포넌트의 위치를 탐색하기 때문에 상대 경로가 복잡해진 것이다. 프로젝트의 규모가 커지고 폴더 구조의 깊이가 깊어질수록 ../../와 같이 상대 경로가 길어져서 경로를 파악하기 힘들어진다. 혹여 파일이라도 옮긴다면 경로를 수정하는 것도 번거롭다.

절대 경로를 사용하면 현재 작업 중인 디렉토리와 상관없이 항상 동일한 위치를 가리킨다. 전체 경로를 나타내기 때문에 파일 및 디렉토리의 위치를 명확하게 알 수 있고, 파일의 위치가 변경되어도 상대적인 위치에 따라 import 경로를 수정할 필요가 없다.

import SomeComponent from 'components/SomeComponent'

절대 경로를 사용하면 코드의 가독성과 유지보수성이 향상되는 이점이 있다.

절대 경로 설정하기

Vite로 만든 React + TypeScript 환경에서의 절대 경로 설정 방법이다.

1. tsconfig.json 수정

compilerOptions에 baseUrl과 paths를 추가한다.

• baseUrl: 상대 경로로 모듈의 경로를 지정할 때 기준이 되는 위치
• paths: baseUrl을 기준으로 특정 모듈이나 디렉토리에 대한 별칭을 설정
  • "@components/*": ["components/*"]는 components 디렉토리에 있는 모든 파일을 @components/로 접근할 수 있게 한다.
  • @는 별칭 경로를 쉽게 알아볼 수 있도록 붙이는 특수 기호.

타입스크립트의 경로 맵핑 (baseUrl, paths)

{
  "compilerOptions": {
    /* 생략 */
    "baseUrl": "./src",
    "paths": {
      "@apis/*": ["apis/*"],
      "@assets/*": ["assets/*"],
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@shared/*": ["shared/*"],
      "@styles/*": ["styles/*"],
      "@types/*": ["types/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

2. vite.config.ts 수정

resolve.alias 설정은 Vite 프로젝트에서 모듈 경로 별칭을 정의하는 데 사용된다. resolve.alias 배열 안에 객체의 형태로 find에는 절대 경로의 별칭을, replacement에는 찾을 경로를 입력한다. 별칭은 tsconfig.json의 paths와 일치하도록 작성한다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@apis', replacement: './apis' },
      { find: '@assets', replacement: './assets' },
      { find: '@components', replacement: './components' },
      { find: '@hooks', replacement: './hooks' },
      { find: '@layouts', replacement: './layouts' },
      { find: '@pages', replacement: './pages' },
      { find: '@shared', replacement: './shared' },
      { find: '@styles', replacement: './styles' },
      { find: '@types', replacement: './types' },
    ],
  },
});

사용해보기

📦linkeeper
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂components
 ┃ ┣ 📂layouts
 ┃ ┃ ┗ 📜Header.tsx
 ┃ ┣ 📜App.tsx

// App.tsx

import Header from '@layouts/Header';
import { Outlet } from 'react-router-dom';

export default function App() {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
}

절대 경로를 사용해 코드의 가독성을 높이고, 프로젝트의 구조 변경 시 import 경로를 쉽게 관리할 수 있게 되었다.

참고 자료

• [Vite] ⚡ Vite 경로 설정.