JavaScript 모듈 가져오기(import)와 내보내기(export) 사용법 완벽 정리

JavaScript에서 모듈(Module)을 가져오고 내보내는 방법은 코드의 재사용성과 유지보수성을 높이는 핵심 기능입니다. 이 글에서는 import와 export를 활용해 모듈을 주고받는 실전 예제를 단계별로 살펴보겠습니다.

사전 준비 사항

참고: ES 모듈은 파일 프로토콜(file://) 환경에서 CORS 정책 때문에 동작하지 않으므로, 이 예제를 실행하려면 반드시 로컬호스트(localhost) 서버를 구동해야 합니다. VS Code의 Live Server 확장 프로그램이나 npx serve 같은 간단한 도구를 활용하면 편리합니다.

예제 코드

1. index.html

먼저 HTML 문서를 작성합니다. 핵심은 <script> 태그에 type="module" 속성을 반드시 추가하는 것입니다.

<!DOCTYPE html>
<html lang="ko">
<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 모듈 가져오기 및 내보내기</h1>
<button class="Btn">IMPORT</button>
<div class="result"></div>
<h3>위 버튼을 클릭하면 모듈을 가져옵니다</h3>
<script src="script.js" type="module"></script>
<script src="sample.js" type="module"></script>
</body>
</html>

2. sample.js — 모듈 내보내기(export)

export default 키워드를 사용하면 해당 함수를 다른 파일에서 가져다 쓸 수 있습니다.

let resultEle = document.querySelector(".result");
export default function testImport(){
    resultEle.innerHTML = 'testImport 모듈이 성공적으로 가져와졌습니다';
}

3. script.js — 모듈 가져오기(import)

import 문으로 sample.js에서 내보낸 기본(default) 함수를 불러온 뒤, 버튼 클릭 이벤트에 연결합니다.

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

실행 결과

페이지를 열면 아래와 같은 초기 화면이 나타납니다.

JavaScript 모듈 가져오기(import)와 내보내기(export) 사용법 완벽 정리

'IMPORT' 버튼을 클릭하면, script.js가 sample.js의 모듈을 가져와 실행하고 결과 영역에 메시지가 출력됩니다.

JavaScript 모듈 가져오기(import)와 내보내기(export) 사용법 완벽 정리

핵심 포인트 정리

type="module" 속성이 있어야 import/export 문법을 사용할 수 있습니다.
export default는 파일당 하나만 지정할 수 있으며, 가져올 때 임의의 이름을 붙일 수 있습니다.
여러 개를 내보내려면 export { 함수명 } 형태의 이름 있는 내보내기(named export)를 사용하고, 가져올 때는 중괄호 { }로 받습니다.
ES 모듈은 반드시 HTTP 서버 환경에서 테스트해야 정상적으로 동작합니다.