모듈의 개념
애플리케이션의 규모가 커질수록 언젠간 파일을 여러 개로 분리하는 시점이 오는데, 이때 분리된 파일 각각을 모듈(module)이라고 부릅니다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
초기에는 스크립트는 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 모듈 관련 표준 문법 없이 성장할 수 있었습니다. 즉, 새로운 문법을 만들 필요가 없었던 것이죠. 그런데 스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 다양한 시도를 합니다.
1. 모듈이란?
모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다.
모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.
export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다.(모듈 내보내기)
import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있습니다. (모듈 가져오기)
//sayHi.js
export function sayHi(user) {
alert('Hello, ${user}!');
}이제 import 지시자를 사용해 main.js에서 함수 sayHi를 사용할 수 있게 해보겠습니다.
import { sayHi } from './sayHi.js'
alert(sayHi); // 함수
sayHi('junyoung'); // Hello, junyoung!위 예시에서 import 지시자는 상대 경로를 이용해 모듈을 가져오고, sayHi.js에서 내보낸 함수 sayHi 함수를 호출 합니다.
이제 브라우저에서 모듈이 어떻게 동작하는지 예시를 이용해 알아보겠습니다.
모듈은 특수한 키워드나 기능과 함께 사용되므로
<!doctype html>
<script type="module">
import { sayHi } from './say.js';
document.body.innerHtml = sayHi('Junyoung');
</script>이제 브라우저가 자동으로 모듈을 가져오고 평가한 다음 이를 실행한 것을 확인할 수 있습니다.
2. 모듈의 핵심 기능
일반스크립트와 모듈의 차이는 아래와 같습니다.
엄격 모드로 실행됨
모듈은 항상 엄격 모드로 실행됩니다. 선언되지 않는 변수에 값을 할당하는 등의 코드는 에러를 발생시킵니다.
<script type="module">
a = 5; // 에러
</script>모듈 레벨 스코프
모듈은 자신만의 스코프가 있습니다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없습니다.
user.js와 hello.js를 가져오고 user.js에서 선언한 변수 user를 hello.js에서 사용하면 에러가 나는 것을 확인할 수 있습니다.
외부에 공개하려는 모듈은 export해야 하고, 내보내진 모듈을 가져와 사용하려면 import를 해줘야 합니다.
단 한 번만 평가됨
동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행됩니다. 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 집니다.
이런 작동방식은 중요한 결과를 초래합니다. 예시를 통해 이에 대해 알아봅시다.
alert 함수가 있는 모듈(alert.js)을 여러 모듈에서 가져오기로 해봅시다. alert 창은 단 한번만 나타납니다.
// alert.js
alert("모듈이 평가되었습니다!");
// 동일한 모듈을 여러 모듈에서 가져오기
// 1.js
import `./alert.js`; // alert 창에 '모듈이 평가되었습니다!'가 출력됩니다.
// 2.js
import `./alert.js`; // 아무 일도 발생하지 않습니다.실무에선 최상위 레벨 모듈을 대개 초기화나 내부 데이터 구조를 만들 때 사용합니다. 이것들을 내보내 재사용하는 것입니다.
