자바스크립트 모듈(Module)은 ES 2015(ES6)에서 처음 도입된 기능입니다. 모듈을 사용하면 하나의 거대한 코드 덩어리를 재사용 가능한 작은 단위로 나누어 관리할 수 있으며, 각 모듈 안에는 클래스나 함수 등을 포함시킬 수 있습니다.
모듈에서는 export 키워드를 사용해 변수, 함수, 객체를 외부로 내보내고, 다른 파일에서는 import 키워드를 통해 해당 요소들을 가져와 사용할 수 있습니다.
주의 사항
Note − 이 예제를 실행하려면 로컬호스트(Localhost) 서버 환경이 필요합니다. 파일을 직접 열어서 실행하면 CORS 정책 때문에 모듈이 정상적으로 동작하지 않을 수 있습니다.
다음은 자바스크립트 모듈을 활용한 예제 코드입니다.
예제
INDEX.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color:blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript Modules</h1>
<button class="Btn">IMPORT</button>
<div class="result"></div>
<h3>Click on the above button to import module</h3>
<script src="script.js" type="module"></script>
<script src="sample.js" type="module"></script>
</body>
</html>HTML 파일에서 핵심 부분은 <script> 태그에 type="module" 속성을 추가한 것입니다. 이 속성이 있어야 브라우저가 해당 스크립트를 모듈로 인식합니다.
script.js
import test from './sample.js';
document.querySelector('.Btn').addEventListener('click',()=>{
test();
})script.js 파일에서는 import 문을 사용해 sample.js에서 내보낸 기본(default) 함수를 가져옵니다. 그리고 버튼 클릭 이벤트가 발생할 때마다 가져온 함수를 실행합니다.
sample.js
let resultEle = document.querySelector(".result");
export default function testImport(){
resultEle.innerHTML = 'Module testImport has been imported';
}sample.js 파일에서는 export default를 사용해 testImport 함수를 내보냅니다. 이 함수가 호출되면 화면의 결과 영역에 모듈이 성공적으로 임포트되었다는 메시지를 출력합니다.
실행 결과
페이지를 처음 열었을 때의 초기 화면입니다.
위 화면에서 'IMPORT' 버튼을 클릭하면 아래와 같이 모듈이 임포트되었다는 결과가 표시됩니다.
정리
자바스크립트 모듈은 코드의 가독성과 유지보수성을 크게 향상시켜 주는 강력한 기능입니다. export와 import 키워드만 익히면 여러 파일에 걸쳐 코드를 체계적으로 구성할 수 있으므로, 규모가 커지는 프로젝트에서 반드시 활용하는 것이 좋습니다.