정보처리기사를 공부하며 모듈(Module)에 대해 정의 정도만 기억하고 있었다.
"하나의 기능이 하나의 파일로 구성된 형태"
최근 '2020 프로그래머스 Dev-Matching' 문제를 풀며 모듈에 대해 다뤄볼 기회가 생겼다.
평소에 사용하고 있던 코드가 모듈로 작동하고 있었다는 것을 알고 매우 놀랐다.
모듈(Module)
하나의 기능이 하나의 파일로 구성된 형태
자바스크립트 프로젝트의 규모가 커지면서 파일을 여러 개로 분리해야 하는 상황이 생겼다.
이때 분리된 파일들을 각각 모듈(Module)이라고 부른다.
모듈은 class와 function 두 가지 형태로 작성 가능하다.
과거에도 AMD, CommonJS 등 자바스크립트 모듈 시스템이 존재했다.
이는 표준은 아니며 ES6에서 처음으로 모듈에 대한 표준이 도입되었다.
import / export
모듈은 import와 export를 사용하여 가져오기, 내보내기가 가능하다.
function형태
// index.js
import Foo from 'foo.js';
let FooComponent = Foo();
console.log(FooComponent); // 'hello module'// foo.js
export default function Foo() {
return 'hello module'
}class형태
// index.js
import Foo from 'foo.js';
let FooComponent = new Foo();
console.log(FooComponent.render()); // 'hello module'// foo.js
export default class Foo {
render() {
return 'hello module!'
}
}export로 모듈을 내보내면 import로 가져와서 사용할 수 있다.
function과 class 형태 두 가지로 작성할 수 있는데, 개인적으로는 function 형태를 선호한다.
class 형태에서 construtor()과 render() 함수의 개념을 이해하기 어려웠기 때문이다...!!!
일반 스크립트와 모듈의 차이
엄격 모드(Strict Module)로 동작
"use strict"
myNum = 10; // 실수를 오류로!엄격 모드는 이전의 실수로 판단해서 넘어갔던 작업을 오류로 만든다.
위의 예제처럼, 엄격 모드는 선언되지 않은 변수에 값을 할당하면 오류가 발생한다.
모듈 스코프
표준화된 ES6 모듈 기능을 사용하지 않으면 '전역 스코프'로서 동작한다.
<html>
<body>
<script src="foo.js"></script>
<script src="bar.js"></script>
</body>
</html>// foo.js
let result = 'foo';
console.log(window.result); // 'foo'// bar.js
let result = 'bar'
console.log(window.result); // 'bar'
두 개의 파일은 하나의 전역을 공유한다.
foo.js에서 선언한 result와 bar.js에서 선언한 result가 겹치면서 window 객체에 값이 재할당된다.
ES6 모듈은 독자적인 '모듈 스코프'를 갖는다.
<html>
<body>
<script type="module" src="foo.js"></script>
<script type="module" src="bar.js"></script>
</body>
</html>// foo.js
let result = 'foo';
console.log(window.result); // undefined// bar.js
let result = 'bar'
console.log(window.result); // undefined
브라우저 환경에서 자바스크립트 모듈을 사용하기 위해 type="module"을 사용한다.
위의 result가 전역 변수였다면, 아래의 result는 전역 변수로서 동작하지 않는다.
독립적으로 작동하기 때문이다.
따라서 각 모듈에 접근하기 위해서는 import와 export를 사용한다.
한 번의 실행
동일한 모듈이 여러 곳에서 사용되어도 한 번만 실행된다.
아래의 예제에서 foo.js가 두번 호출되지만, 한 번만 실행되는 것으로 생각하면 된다.
<html>
<body>
<script src="foo.js"></script>
<script src="foo.js"></script>
</body>
</html>마무리하며
모듈은 하나의 기능을 수행하는 하나의 파일이다.
ES6가 도입되면서 자바스크립트 모듈은 표준화되었으며, 클라이언트 사이드에서도 type="module" 속성을 통해 사용할 수 있게 되었다.
모듈은 자신만의 스코프를 가지며, 모듈 간에 export/import를 통해 기능을 공유할 수 있다.
