react에서 절대경로 @ 설정 방법

vite.config를 설정해주면 된다.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
})

vite.config.js 파일에서 resolve와 alias 설정은 모듈 로더가 모듈을 해석하고 가져오는 방식을 커스터마이징하는 데 사용됩니다.

resolve 설정은 모듈을 해석하기 위해 사용되는 옵션을 정의합니다. 일반적으로 이 옵션은 특정 파일 확장명을 처리하거나 모듈의 루트 디렉토리를 지정하는 데 사용됩니다. 예를 들어, resolve.extensions 옵션은 Webpack과 같은 다른 번들러와 유사하게 파일 확장자를 처리하기 위해 사용됩니다.

alias 설정은 모듈 이름의 별칭을 만듭니다. 이것은 긴 모듈 경로를 줄여서 모듈 이름을 더 간결하고 가독성 높게 만드는 데 유용합니다. 예를 들어, @를 src 디렉토리 경로로 지정할 수 있습니다. 이렇게 하면 import "@/components/Button"과 같은 식으로 모듈 경로를 지정할 수 있습니다.

또한 resolve와 alias 설정은 모듈 로더에서 경로를 검색할 때 사용됩니다. 이는 모듈 경로를 해결하는 데 도움이 됩니다. 이러한 설정은 번들러가 모듈 경로를 해석하는 방법을 커스터마이즈할 수 있는 강력한 기능을 제공합니다.

resolve 객체 안에는 다음과 같은 설정이 가능합니다

extensions: 파일 확장자를 지정할 수 있습니다. 기본적으로는 .js, .json, .ts, .tsx 등이 지정되어 있습니다.
예시:

resolve: {
  extensions: ['.js', '.jsx', '.json']
}

modules: 모듈을 탐색할 디렉토리를 지정할 수 있습니다. 이 설정은 Node.js의 require() 함수에서 모듈을 찾는 방법과 유사합니다.
예시:

resolve: {
  modules: ['node_modules', 'src']
}

fallback: 모듈이 해석되지 않을 때 사용할 경로를 지정할 수 있습니다. 이 설정은 주로 Node.js 모듈에서 브라우저 전용 모듈을 참조할 때 사용됩니다.
예시:

resolve: {
  fallback: {
    fs: false,
    crypto: require.resolve('crypto-browserify'),
    path: require.resolve('path-browserify')
  }
}