[Vue.js] 경로를 나타내는 기호

import common from '@/assets/js/common.js';
import HelloWorld from './components/HelloWorld.vue'

 

좌측의 구조에서

HelloWorld.vue에서 common.js를 가져올 때

App.vue에서 HelloWorld.vue를 가져올 때

위의 코드처럼 가져온다!!

 

vue사용이 처음이라 경로표시에 대해 궁금한 점을 알아보았다.

 

 

 

 

 

 

vue에서 경로를 가져올 때 @, .의 의미

@와 .은 모두 파일 경로를 나타내는 기호입니다.

• @: @ 기호는 Vue CLI에서 제공하는 앨리어싱(aliasing) 기능으로, 프로젝트 루트 경로를 가리킵니다. 이를 통해 상대 경로 대신에 프로젝트 루트 경로를 기준으로 파일 경로를 지정할 수 있습니다.
• .: . 기호는 현재 파일이 위치한 경로를 가리킵니다. 이를 통해 상대 경로로 파일 경로를 지정할 수 있습니다.

예를 들어, import common from '@/assets/js/common.js'; 코드에서 @/는 프로젝트 루트 경로를 나타내고, assets/js/common.js는 @/를 기준으로 assets 폴더 아래에 있는 js/common.js 파일을 가리킵니다.

 

왜 root경로가 vuefrontend가 아니고 src인지

Vue CLI에서 생성한 프로젝트 구조에서는 보통 src 디렉토리가 프로젝트의 루트 디렉토리입니다.

Vue CLI는 프로젝트 생성시 vue create 명령을 사용하여 프로젝트 구조를 생성하며, 이 명령은 기본적으로 src 디렉토리를 포함하는 구조를 생성합니다. 따라서 @ 기호가 가리키는 디렉토리는 보통 src 디렉토리가 됩니다.

물론, 프로젝트 생성시 vue create 명령을 사용하지 않고 프로젝트 구조를 직접 만든 경우에는 다른 루트 디렉토리를 가지게 됩니다. 하지만 보통은 vue create 명령을 사용하여 프로젝트를 생성하기 때문에 @ 기호는 src 디렉토리를 가리키게 됩니다.

 

이 기호는 vue에서만 사용되는가?

@ 기호는 Vue CLI에서 제공하는 앨리어싱(aliasing) 기능입니다. 따라서 일반적으로 다른 프로젝트나 라이브러리에서는 사용되지 않습니다. 그러나 모듈 번들러나 패키지 매니저에서는 파일 경로를 다룰 때 유용한 기능이므로, 비슷한 기능을 제공하는 다른 도구에서도 사용될 수 있습니다.

. 기호는 파일 경로를 나타내는 일반적인 기호이므로, 다른 언어나 도구에서도 사용됩니다. 예를 들어, Node.js에서는 .을 사용하여 현재 파일이 위치한 경로를 나타냅니다. 다른 언어나 도구에서도 . 기호를 파일 경로를 나타내는 데에 사용할 수 있습니다.