[기타] import 절대경로 vs 상대경로

import 경로는 절대경로와 상대경로 두 가지로 나뉜다. 규모가 커질수록 절대경로가 유지보수에 유리하다.

상대경로

import { Button } from '../../../components/Button';

장점

• 설정 없이 바로 사용 가능
• 작은 프로젝트에서 단순함

단점

• 경로가 깊어질수록 가독성 저하
• 파일 이동 시 수정 범위가 커짐

절대경로

import { Button } from '@/components/Button';

장점

• 경로가 짧고 명확함
• 파일 이동 시 영향이 적음

단점

• tsconfig / jsconfig / 번들러 설정 필요

  {
  "compilerOptions": {
      "baseUrl": ".",
      "paths": {
      "@/*": ["src/*"]
          }
      }
  }

  vite 사용 시 추가 설정

  // vite.config.ts
  import { defineConfig } from 'vite';
  import path from 'path';
   
  export default defineConfig({
  resolve: {
      alias: {
      '@': path.resolve(__dirname, './src'),
          },
      },
  });

• 팀 규칙 통일이 중요

결론

파일 위치 변경 시 경로를 일일이 수정하지 않아도 되기 때문에 절대경로를 주로 사용하게 된다.
팀 내 규칙을 설정해서 적용하면 팀 작업에서도 좋을 것이다.