React 프로젝트에서 **@ 같은 alias(별칭)**를 사용하지 않으면, 파일을 불러올 때 상대 경로를 사용해야 합니다.

1. Alias 없이 상대 경로 사용

1
import MyComponent from '../components/MyComponent';

• 디렉토리가 깊어질수록 경로가 복잡해짐.
• 파일 위치를 변경할 경우, 경로를 일일이 수정해야 함.

2. Alias 사용 시 절대 경로 사용

Alias를 설정하면 절대 경로를 사용할 수 있습니다:

1
2

import MyComponent from '@/components/MyComponent';

• 경로가 단순해지고 코드 관리가 편리해짐.
• 디렉토리 구조가 바뀌어도 수정할 부분이 적음.

3. Alias 설정 방법

1. Webpack에서 Alias 설정

• Webpack을 사용한다면 webpack.config.js 파일에서 resolve.alias 옵션을 사용하여 설정할 수 있습니다.

설정 방법: 프로젝트 루트에 있는 webpack.config.js 파일을 엽니다.다음 코드를 추가합니다:

1
2
3
4
5
6
7
8
9
10
const path = require('path');

module.exports = {
  // 기존 설정들
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // '@'를 'src' 디렉토리에 매핑
    },
  },
};

설명: path.resolve(__dirname, 'src')는 프로젝트의 루트 경로에서 src 디렉토리를 절대 경로로 설정하는 역할을 합니다. 이제 @/components/MyComponent 같은 형태로 src 디렉토리 내의 파일을 가져올 수 있습니다.

2. Create React App (CRA)에서 Alias 설정

• CRA에서는 기본적으로 Webpack 설정을 직접 수정할 수 없습니다. 대신, jsconfig.json 또는 tsconfig.json 파일에서 경로 설정을 할 수 있습니다.

설정 방법 (JavaScript 프로젝트): 프로젝트 루트에 jsconfig.json 파일을 추가하거나 수정합니다. 다음 내용을 추가합니다:

1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

설정 방법 (TypeScript 프로젝트): 프로젝트 루트에 tsconfig.json 파일을 열거나 수정합니다. 다음 내용을 추가합니다:

1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

설명: baseUrl은 기본적으로 src 폴더를 기준으로 경로를 설정합니다. paths는 @/*를 src/*로 매핑하는 역할을 합니다. 이제 @/components/MyComponent와 같은 방식으로 src 폴더 내 파일을 가져올 수 있습니다.

3. Vite에서 Alias 설정

• Vite는 프로젝트의 빌드 도구로, 설정 파일인 vite.config.js에서 Alias를 설정할 수 있습니다.

설정 방법: 프로젝트 루트에 있는 vite.config.js 파일을 엽니다. 다음 코드를 추가합니다:

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // '@'를 'src' 디렉토리에 매핑
    },
  },
});

설명: path.resolve(__dirname, './src')는 src 폴더를 절대 경로로 설정합니다. 이제 @/components/MyComponent와 같이 절대 경로를 사용할 수 있습니다.

결론

Alias 사용 시: 경로가 간단해지고 관리가 편리해짐. Alias 미사용 시: 상대 경로 사용으로 경로 관리가 복잡해질 수 있음.