JavaScript 모듈이란 무엇인가? 개념부터 예제까지 쉽게 이해하기

모듈(Module)은 ES 2015(ES6)에서 도입된 기능으로, 하나의 큰 코드를 재사용 가능한 작은 단위로 나누어 관리할 수 있게 해줍니다. 모듈 안에는 클래스나 함수 등을 포함시킬 수 있으며, export와 import 키워드를 사용해 변수, 함수, 객체를 다른 파일로 내보내거나 가져올 수 있습니다.

JavaScript 모듈의 핵심 개념

모듈을 사용하면 코드의 응집도를 높이고 의존성을 명확하게 관리할 수 있습니다. 대표적인 특징은 다음과 같습니다.

코드 분리: 기능별로 파일을 나누어 유지보수가 쉬워집니다.
재사용성: 한 번 작성한 함수나 클래스를 여러 파일에서 불러와 사용할 수 있습니다.
네임스페이스 관리: 전역 변수 오염을 방지하고 충돌을 줄여줍니다.

참고 − 아래 예제를 실행하려면 로컬호스트(localhost) 서버 환경이 필요합니다. 파일을 직접 열면 CORS 정책 때문에 모듈이 정상적으로 동작하지 않을 수 있습니다.

JavaScript 모듈 예제 코드

다음은 JavaScript에서 모듈을 사용하는 방법을 보여주는 예제입니다.

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>Modules in JavaScript</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에서 스크립트를 불러올 때 type="module" 속성을 지정해야 해당 파일이 모듈로 인식됩니다.

script.js

import test from './sample.js';
document.querySelector('.Btn').addEventListener('click',()=>{
    test();
})

sample.js에서 내보낸(export) 함수를 import 키워드로 가져온 뒤, 버튼 클릭 이벤트가 발생하면 실행합니다.

sample.js

let resultEle = document.querySelector(".result");
export default function testImport(){
    resultEle.innerHTML = 'Module testImport has been imported';
}

export default를 사용하면 해당 모듈의 기본 출력(default export)을 지정할 수 있으며, 다른 파일에서 이름을 자유롭게 붙여 import할 수 있습니다.

실행 결과

위 코드를 로컬호스트 서버에서 실행한 후 ‘IMPORT’ 버튼을 클릭하면 다음과 같은 결과 화면을 확인할 수 있습니다.

JavaScript 모듈이란 무엇인가? 개념부터 예제까지 쉽게 이해하기

버튼을 누르는 순간 sample.js 모듈의 testImport 함수가 호출되어, 화면에 “Module testImport has been imported”라는 메시지가 표시됩니다. 이처럼 모듈을 활용하면 기능을 파일 단위로 깔끔하게 분리하고 필요한 시점에 불러와 사용할 수 있습니다.