2021. 10. 11. 15:30
   ,

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

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

 

 

0. 서론

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

이 방식의 문제는

 

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

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

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

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

 

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

 

 

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

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

 

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

 

 

1. 'export'로 모듈 만들기

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

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

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

참고 : MDN - export

 

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

 

 

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

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

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

1
2
3
4
5
6
7
8
9
10
export { Test01 };
 
function Test01()
{
}
 
Test01.prototype.Msg = function ()
{
    alert("Test01");
};
cs

 

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export
{
    Test03 as Test03,
    Test04 as Test04
};
 
 
function Test03()
{
}
 
Test03.prototype.Msg = function ()
{
    alert("Test03");
};
 
 
function Test04()
{
}
 
Test04.prototype.Msg = function ()
{
    alert("Test04");
};
 
cs

 

 

2) 바로 내보내기

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

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

1
2
3
4
5
6
7
8
export function Test02()
{
}
 
Test02.prototype.Msg = function ()
{
    alert("Test02");
};
cs

 

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

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

참고 : MDN - import

 

1) 기본 불러오기

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

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

cs

 

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

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

 

2) 이름 변경하기

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

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

 

3) 'json' 파일 불러오기

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

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

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

 

 

3. HTML에서 불러오기

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

1
2
3
4
5
6
<script type="module">
    import { TestStart } from "/TestStart.js?v=100";
 
    //전역 스코프에 개체 저장
    window.app = new TestStart();
</script>
cs

 

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

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

 

 

마무리

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

 

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

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

 

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

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

댓글 작성

이름
패스워드
홈페이지
비밀글