[2023-09-21] TIL - 모듈

모듈

 

모듈이 등장한 이유

- 일반적으로 웹사이트는 여러개의 자바스크립트로 이루어짐 - 자바스크립트 파일들을 별개의 프로그램으로 취급

- 문제는 웹사이트가 거대해짐에 따라 스크립트 파일도 증가한다.

- 예전 자바스크립트는 파일간의 통신을 위해 전역 스코프에 존재하는 변수와 함수를 사용해야했다.

- 즉시 실행함수 등을 통해 전역 스코프가 오염되는 것을 막을 수 있었지만 스크립트 파일 간 의존도를 확인하기 힘들고, 실행순서를 제어해야한다는 한계점이 있었다.

-> 이러한 불편한 점을 해결하기 위해 모듈이 등장했다.

 

 

모듈과 컴포넌트의 차이

- 모듈은 설계시점에 의미있는 요소

- 컴포넌트는 런타임 시점에 의미있는 요소

 

모듈 사용방법

export function hello(name){
	alert("Hello, ${name}");
}

<script type="module">
	import { hello } from "./hello.ts"
    hello("Jhon");
<script>

 

모듈의 특징

1. 항상 use strict로 실행된다.

 - 항상 엄격모드로 실행된다.

<script>
	let a = 5;
    let b = 10;
    c = a + b;
    alert(c);
<script>

- 위 경우 정상적으로 동작

<script type="module">
	let a = 5;
    let b = 10;
    c = a + b;
    alert(c);
<script>

- 위 경우 엄격모드이므로 허용되지않음

 

2. 모듈 레벨 스코프가 있다.

<script>
	let a = 5;
    let b = 10;
    c = a + b;
    alert(c);
<script>

<script>
    alert(c);
<script>

- 위 경우 전역스코프에 선언되어 다른 스코프에서 참조 가능

<script type="module">
	let a = 5;
    let b = 10;
    c = a + b;
    alert(c);
<script>

<script type="module">
    alert(c);
<script>

- import 하지않는 한 서로 참조 불가능

 

3. 단 한 번만 평가된다.

<script type="module">
	import { hello } from "./hello.ts"
<script>

<script type="module">
	import { hello } from "./hello.ts"
<script>

- 위 코드와 같은 경우 실행이 두 번되는 것이 아닌 한 번만 하게 된다.

 

4. 지연 실행된다.

- 스크립트의 defer속성 없이도 자동으로 지연 실행이 되어 모든 DOM이 만들어진 후에 실행된다.