[JavaScript] 모듈 내보내기, 불러오기 - Import, Export

dhkim 8월 28, 2021

 



프로젝트 규모가 점점 커짐에 따라 모듈 단위의 관리 필요성을 느꼈습니다.

또한 JS파일을 Import문을 통해 받아오는 것으로, HTML 혹은 JSP파일에서 script태그를 하지 않아도 된다는 점에서 좀 더 정돈되는 느낌을 받았습니다.

이번 포스팅에서는 JS에서 사용하는 변수 혹은 객체들을 내보내고 불러오는 방법들에 대한 설명과 예제를 다룹니다.


1. HTML 속성정의

우선, 아래 코드처럼 Import할 JS파일의 script 태그의 type속성을 "module"을 입력합니다.

<head>
    <meta charset="utf-8" />    
    <script type="text/javascript" src="../../lib/jquery-3.4.1.js"></script>
    <script type="module" src="./subMain.js"></script>
</head>


2.  JS 파일 (예제)

 첫 예제로 간단한 상수(const)와 함수(function)을 export, import에 대해 설명합니다.

  • subMain.js        : export한 객체들을 import할 파일
  • test-Module.js   : export할 객체들을 정의해놓은 파일

# test-Module.js

const VALUES = {
    salse : "1000"
}


var TestFunction = function()
{
    console.log("[DEBUG] Call Test Function ...");
}


export { TestFunction, VALUES };

일반적으로 변수, 함수 선언하는 것과 같이 정의하고, 

맨 하단의 export 구문안에 내보낼 객체명을 인자로 기입합니다.


# subMain.js

import * as ImportTest from "./module/test-module.js";

{
    ImportTest.TestFunction();

    console.log("[DEBUG] Show Value ... " + ImportTest.VALUES.salse);
}

JavaScript 상단에 import 구문을 작성합니다.

import [객체명] from [export 파일 경로]

혹은 위 예제처럼

import * as [별칭] from [export 파일 경로]

로 정의한 경우 export된 객체 전체(*)를 import한 것이며, "ImportTest"라는 별칭으로 사용했습니다.



3. Export 예제 (즉시실행함수)

 즉시실행함수를 할당한 변수에 대한 export 예제

# test-Module.js
export var Model = (function(){

    var Init = function()
    {
        console.log("[Model] :: Init ...");

        DataBinding();
    }

    var DataBinding = function()
    {
        console.log("[Model] :: DataBinding ...");
    }


    return {
        Init : Init
    }

})();

  •   export : 위(2번)에서 언급한 export 방법 외에도 변수명 앞에 export 접두 키워드를 붙여 내보내는 방법

    export [변수타입] [변수명] = {};



4. Export 예제 (Class)

 class 단위의 export, import 예제

# test-Module.js

export class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }

    // Getter
    get area() {
        return this.calcArea();
    }

    // 메서드
    calcArea() {
        return this.height * this.width;
    }
}


# subMain.js

let temp = new ImportTest.Rectangle(10, 20);
console.log(temp.calcArea());
console.log(temp.area);


0 댓글