프로그래밍/웹관련

[Javascript] Import/Export 사용하기(ES6)

당근천국 2021. 10. 11. 15:30

ES6(ECMAScript6)에서 생긴 기능 중에 Import/Export라는 기능이 생겼습니다.

개념은 다른 언어들의 using(C#), import(Java) 등등을 구현한 것입니다.

 

 

0. 서론

html에서 자바스크립트(Javascript) 파일을 전역 스코프(scope) 불러와 사용하는 것이 기존 방식입니다.

이 방식의 문제는

 

1) 각자 참조하고 있는 파일이 무엇인지 확인하는 것이 어렵다.

2) 한 번에 스크립트를 모두 메모리에 올리다 보니 첫 로딩이 길다.

3) 전역 스코프에 올리다 보니 외부 라이브러리를 사용할 때 변수명이 겹쳐서 문제가 발생하는 경우가 있기도 하다.

(이건 라이브러리 설계를 잘하면 회피 할 수 있습니다.)

 

이러한 문제들이 있습니다.

 

 

그래서 다른 언어들 처럼 참조를 명시하도록 하면 직관적으로 참조한 파일을 알 수 있고,

시스템적으로는 필요할때 모듈을 로드하므로서 첫 로딩을 비교적 빠르게 진행할 수 있게 됩니다.

 

그리고 모듈의 스코프를 지정하여 전역에 로드하여 발생하던 문제를 해결하였습니다.

 

 

주의 사항

Import/Export는 웹서버가 있어야 동작합니다.

Import할때 파일을 서버에 요청하는데 이 동작을 웹서버 없이 하게되면 권한 에러가 나기 때문입니다.

 

 

1. 'export'로 모듈 만들기

'export'로 외부에서 접근할 수 있도록 공개해야 합니다.

'export'를 사용하는 방법은 다양한데 여기서는 몇 가지만 다룹니다.

자세한 내용은 MDN을 참고해 주세요.

참고 : MDN - export

 

참고로 함수나 클래스 말고 변수 같은 것들도 같은 방법으로 내보낼수 있습니다.

 

 

1) 상단에 내보낼 개체를 지정하는 방법

이 방법은 상단에 내보낼 내용을 정리하는 방식입니다.

어떤 것들이 외부로 노출되어 있는지 한눈에 볼 수 있으니 유지보수에 유리합니다.

export { Test01 };

function Test01()
{
}

Test01.prototype.Msg = function ()
{
    alert("Test01");
};

 

원한다면 내보내는 이름을 지정할 수 있습니다.

한 번에 여러 개를 내보낼 수 있습니다.

export
{
    Test03 as Test03,
    Test04 as Test04
};


function Test03()
{
}

Test03.prototype.Msg = function ()
{
    alert("Test03");
};


function Test04()
{
}

Test04.prototype.Msg = function ()
{
    alert("Test04");
};

 

 

2) 바로 내보내기

선언과 동시에 내보내려면 함수나 클래스, 변수 등의 앞에 'export' 붙여줍니다.

이렇게 하면 별도로 내보낼 필요 없이 외부로 노출됩니다.

export function Test02()
{
}

Test02.prototype.Msg = function ()
{
    alert("Test02");
};

 

 

2. 'Import'로 모듈 불러오기

'import'를 사용하여 위에서 만든 모듈을 불러올 수 있습니다.

참고 : MDN - import

 

1) 기본 불러오기

불러올 모듈의 이름과 파일 경로를 지정하여 불러올 수 있습니다.

import { Test01 } from "/Test01.js";

 

한 번에 여러 개를 불러오는 것도 가능합니다.

import { Test03, Test04 } from "/Test0304.js";

 

2) 이름 변경하기

불러온 모듈의 이름을 바꿀 수 있습니다.

import { Test02 as Test02 } from "/Test02.js";

 

3) 'json' 파일 불러오기

'json'파일도 모듈처럼 불러와 사용할 수 있습니다.

* 이것은 '2021-10-06' 기준으로 블링크(Blink) 엔진을 사용한 브라우저에서만 사용할 수 있는 기능입니다.

import jsondata from "/TestJson.json" assert { type: "json" };

 

 

3. HTML에서 불러오기

위에서 만든 파일을 HTML에서 불러오기 위해선 타입(type)을 모듈(module)로 설정하면 됩니다.

<script type="module">
    import { TestStart } from "/TestStart.js?v=100";

    //전역 스코프에 개체 저장
    window.app = new TestStart();
</script>

 

이때 조심해야 할 것이 이렇게 불러온 모듈은 이 지역의 스코프로 저장되므로 다른 스코프(예>  '<script></script>')에서 접근할 수 없습니다.

다른 스코프에서 접근하려면 적역 스코프인 'window'에 저장해야 합니다.

 

 

마무리

테스트용 프로젝트  : github - HtmlJavascriptSamples/JsImportExport/

이 프로젝트는 ASP.NET의 타입스크립트(typescript) 자동 빌드 기능을 이용하기 위해 ASP.NET로 되어 있습니다.

npm에서 테스트하기 위해선 'wwwroot' 폴더의 내용을 복사하여 테스트하시면 됩니다.

 

 

이전부터 필요했던 기능이라 'CommonJS'나 'RequireJS', 'Webpack'같은 다양한 구현체가 있습니다.

ES6를 지원하지 않는 브라우저들이 걱정된다면 이러한 라이브러리를 가져다 써야 합니다.

 

요즘은 몇몇 브라우저를 제외하면 사실상 ES6을 잘 지원하니 걱정은 안 하는데....

json 파일 불러오기와 같은 파일 불러오는 기능의 표준이 지정돼 파이어폭스 같은 브라우저도 이 기능을 지원했으면 하네요.

저작자표시