[JS] 모듈(module, import, export)

WEB개발/JS

[JS] 모듈(module, import, export)

wooyeon06 2023. 10. 25. 14:40

: 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다.

모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다(모듈 내보내기).
```
export let mlet = "mlet";

export function mfnc1() {
	console.log("modulc function 1..");0
}
```

import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있습니다(모듈 가져오기).

import * as mObj from './module.js';
//import _mlet as mlet from './module.js';

window.onload = function() {
	console.log("load.. module : " + mObj.mlet);
};


//외부라이브러리 호출가능
$(function() {
	console.log("jquery~");
});

//이벤트가능
$("#btnA").on("click", function() {
	alert("click button a");
});

//외부에서 접근가능한 전역변수설정
window.globalVarable = "global value";

특징

1. 모듈은 항상 엄격 모드(use strict)로 실행됩니다. 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킵니다.

2. 모듈은 자신만의 스코프가 있습니다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없습니다.

브라우저 환경에서도 <script type="module">을 사용해 모듈을 만들면 독립적인 스코프가 만들어집니다.

3. 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행됩니다. 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 집니다.

실무에선 최상위 레벨 모듈을 대개 초기화나 내부에서 쓰이는 데이터 구조를 만들고 이를 내보내 재사용하고 싶을 때 사용합니다.

4. this

모듈 최상위 레벨의 this는 undefined입니다.

모듈이 아닌 일반 스크립트의 this는 전역 객체인 것과 대조됩니다.

<script>
  alert(this); // window
</script>

<script type="module">
  alert(this); // undefined
</script>

5. 모듈 스크립트는 항상 지연 실행됩니다. 외부 스크립트, 인라인 스크립트와 관계없이 마치 defer 속성을 붙인 것처럼 실행됩니다

따라서 모듈 스크립트는 아래와 같은 특징을 보입니다.

외부 모듈 스크립트 <script type="module" src="...">를 다운로드할 때 브라우저의 HTML 처리가 멈추지 않습니다. 브라우저는 외부 모듈 스크립트와 기타 리소스를 병렬적으로 불러옵니다.
모듈 스크립트는 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML 문서가 완전히 만들어진 이후에 실행됩니다. 모듈의 크기가 아주 작아서 HTML보다 빨리 불러온 경우에도 말이죠.
스크립트의 상대적 순서가 유지됩니다. 문서상 위쪽의 스크립트부터 차례로 실행됩니다.

모듈이 아닌 일반 스크립트에서 async 속성은 외부 스크립트를 불러올 때만 유효합니다. async 속성이 붙은 스크립트는 로딩이 끝나면 다른 스크립트나 HTML 문서가 처리되길 기다리지 않고 바로 실행됩니다.

반면, 모듈 스크립트에선 async 속성을 인라인 스크립트에도 적용할 수 있습니다.

<!-- 필요한 모듈(analytics.js)의 로드가 끝나면 -->
<!-- 문서나 다른 <script>가 로드되길 기다리지 않고 바로 실행됩니다.-->
<script async type="module">
  import {counter} from './analytics.js';

  counter.count();
</script>

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-import-export-%EC%A0%95%EB%A6%AC

https://ko.javascript.info/modules-intro