모듈이 뭘까? 자바스크립트 모듈만의 특징이 있을까?
프로그래밍에서 모듈이란 프로그램을 구성하는 구성요소의 일부입니다.
개발하는 애플리케이션의 크기가 커지면 확장성과 유지보수 측면에서 파일을 여러 개로 분리하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈'이라고 부르고, 보통 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
이렇게 파일을 모듈화 하여 관리하면 다음과 같은 장점이 있습니다.
- 프로그램의 효율적인 관리 및 성능 향상
- 전체적인 소프트웨어 이해의 용이성 증대 및 복잡성 감소
- 소프트웨어 디버깅, 테스트, 통합, 수정 시 용이성 제공
- 기능의 분리가 가능하고 인터페이스가 단순
- 오류의 파급효과를 최소화
- 모듈의 재사용 가능으로 개발과 유지보수가 용이
👉 자바스크립트에서의 모듈!
초기 스크립트는 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 모듈 관련 표준 문법 없이 성장할 수 있었습니다.
하지만 스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 다양한 시도를 하게 됩니다.
이는 AMD, CommonJS, UMD와 같은 모듈 시스템의 등장 배경이 됩니다.
- AMD: 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발됨
- CommonJS: Node.js 서버를 위해 만들어진 모듈 시스템
- UMD: AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 등장
위 모듈 시스템들의 개념은 여기 제로초님 블로그에 자세히 설명되어 있습니다!
모듈 시스템은 2015년에 표준으로 등재되었습니다. 이 이후로 관련 문법은 진화를 거듭해 이제는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있습니다.
자바스크립트에서 모듈은 특수한 지시자 export와 import를 통해 불러옵니다.
- export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다(모듈 내보내기)
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}- import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있습니다(모듈 가져오기)
// 📁 main.js
import {sayHi} from './sayHi.js';
alert(sayHi); // 함수
sayHi('John'); // Hello, John!- 브라우저에서 import/export 지시자를 사용하려면
<script type="module">같은 속성이 필요합니다.
👉 모듈의 핵심 기능
-
'엄격모드'로 실행 됨
: 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킵니다. -
모듈 레벨 스코프
: 모듈은 자신만의 스코프가 있습니다. 따라서 모듈 내부에 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없습니다.
(여기서 모듈은 파일 하나이고, 스크립트 하나는 모듈 하나입니다. 즉, 다른 스크립트에서 import를 하지않고는 외부 스크립트(모듈)를 사용할 수 없다는 소리입니다.) -
단 한 번만 평가됨
: 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행됩니다. 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 집니다.
(따라서 import로 모듈을 가져온 스크립트 A.js에서 모듈 호출 후 해당 모듈의 변수를 변경하면 그 모듈을 사용하는 스크립트 B.js에서도 변경된 값이 적용됩니다.)
-
import.meta
: import.meta 객체는 현재 모듈에 대한 정보를 제공해줍니다. (ex) 스크립트 url 정보 등) -
'this’는 undefined
: 일반 스크립트의 this는 전역 객체인 것과 달리 모듈 최상위 레벨의 this는 undefined입니다. -
실제 애플리케이션을 출시할 때는 성능 개선 등의 이점 때문에 웹팩과 같은 번들러를 사용하여 모듈을 한 데 묶어(번들링) 프로덕션 서버에 올리는 방식을 사용합니다.
Refs
