[Vue3] import / export

만약 내가 

 

sessionInfo.js 의 내용을 가져다 사용하고 싶으면 import와 export를 이용하면 된다.

// import {isDev} from "@/assets/js/common/common";

const isDev = process.env.NODE_ENV === "development"
export const sessionInfo = {
    custName: isDev?"이름":document.getElementById("cha_custName").value,
    custSeq: isDev?0:parseInt(document.getElementById("cha_custSeq").value),
    userId: isDev?"이메일@email.co.kr":document.getElementById("cha_userId").value,
    userSeq: isDev?1:parseInt(document.getElementById("cha_userSeq").value),
    userName: isDev?"이름":document.getElementById("cha_userName").value,
    isLive: isDev?0:parseInt(document.getElementById("cha_isLive").value),//-- SpringBoot에 연결 했을때 spring profile이 live면 1 아니면 0
    isDebug: isDev?1: parseInt(document.getElementById("cha_isDebug").value)
}

 

이런 식으로 export를 한다.

 

그리고 import 를 한다.

import {sessionInfo} @/assets/js/common/sessionInfo.js"

 

@/ 절대경로를 쓴다고 해서 가까운 src 또는 최상위 src로 가는 것은 아니다.

현재 src 내부에 web-order-vue-src 가 있기 때문에

이는 Webpack 에서 개발자가 지정한 src로 이동한다. (이건 config를 통해 확인 가능)

 

 

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

Webpack 에서 지정할 때 이런식으로 하게 되는데 

__dirname은 현재 파일이 있는 디렉토리 경로를 의미

 

결국 "/Users/yourname/project/src" 라는 절대 경로가 만들어진다.

이는 @/ 가 src/ 라고 정의한다.

 

---

예제)

const path = require('path');

// 현재 파일 위치가: /Users/yourname/project
const result = path.resolve(__dirname, 'src');
console.log(result);

 

result를 출력하면

/Users/yourname/project/src

가 나온다.