JavaScript에서 모듈 가져오기(Import)와 내보내기(Export) 완벽 가이드

JavaScript에서 모듈을 가져오고 내보내는 방법은 코드를 체계적으로 관리하고 재사용성을 높이는 핵심 기능입니다. 이 글에서는 ES6 모듈 시스템을 활용하여 import와 export를 실제 예제와 함께 살펴보겠습니다.

참고: 아래 예제를 실행하기 위해서는 반드시 localhost 서버를 실행해야 합니다. 브라우저의 보안 정책상 file:// 프로토콜로는 ES6 모듈이 동작하지 않기 때문입니다.

예제 코드

1. 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;
    }
</style>
</head>
<body>
<h1>JavaScript Importing and Exporting 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>

2. script.js

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

3. sample.js

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

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

JavaScript에서 모듈 가져오기(Import)와 내보내기(Export) 완벽 가이드

'IMPORT' 버튼을 클릭하면 모듈이 성공적으로 불러와지며 결과가 화면에 표시됩니다.

JavaScript에서 모듈 가져오기(Import)와 내보내기(Export) 완벽 가이드

코드 설명

export default: sample.js 파일에서 testImport 함수를 기본(default) 내보내기로 설정합니다. 한 파일당 하나의 default export만 존재할 수 있습니다.
import: script.js에서는 import test from './sample.js' 구문으로 해당 함수를 불러옵니다. default export의 경우 이름은 자유롭게 지정할 수 있으므로 test라는 이름을 사용했습니다.
type="module": HTML의 script 태그에 type="module" 속성을 추가해야 ES6 모듈 문법이 인식됩니다.

이처럼 JavaScript의 모듈 시스템을 사용하면 코드를 여러 파일로 분리하여 관리할 수 있으며, 필요한 기능만 선택적으로 불러와 사용할 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다.