main.js에 import RightToolbar from '@/components/RightToolbar 문장이 있어. 여기서 @의 의미

 

Vue.js 프로젝트에서 사용된 @는 일반적으로 프로젝트의 경로를 간소화하기 위해 설정된 "별칭(alias)"입니다. 예를 들어, @는 종종 프로젝트의 src 디렉터리를 가리키도록 설정됩니다. 이렇게 하면 상대 경로를 길게 작성하지 않아도 되고, 코드가 더 깔끔해지며 유지보수가 쉬워집니다.

이 별칭은 보통 webpack이나 vite와 같은 번들러에서 설정됩니다. 만약 vue.config.js나 vite.config.js 파일을 열어보면 다음과 같은 설정을 찾을 수 있습니다:

 

Webpack 예시:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

 

Vite 예시:

import { defineConfig } from 'vite'
import path from 'path'

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

 

따라서 import RightToolbar from '@/components/RightToolbar는 사실상 import RightToolbar from './src/components/RightToolbar와 동일한 역할을 합니다. 프로젝트 설정을 한번 확인해보시면 직접 별칭이 어떻게 정의되었는지 알 수 있을 거예요!

 

 

 

 resolve: {

      // https://cn.vitejs.dev/config/#resolve-alias

      alias: {

        // 경로 설정

        '~': path.resolve(__dirname, './'),

        // 별칭 설정

        '@': path.resolve(__dirname, './src')

      },