[JavaScript] JS파일 분리해서 쓰기 (모듈)

 

 

모듈이란

js파일 하나에 들어있는 내용이 많아서 분리하게 될 때, 여러 개로 분리한 각각의 파일을 모듈이라고 부른다.

 

대부분의 브라우저에서 지원되지만, 인터넷 익스플로러에서는 지원되지 않으니 주의. 그리고 모듈은 로컬에서 동작하지 않는다. 로컬 실행 시 라이브 서버 등을 이용할 것. 

 

자바스크립트에서는 일반적인 스크립트 파일과, 불러오기가 가능한 모듈 파일의 타입을 달리 하고 있다.

//스크립트 파일
<script type="script" src="main.js"></script>
//모듈 파일
<script type="module" src="hello.js"></script>

모듈 파일은 export 를 사용해 파일 내부의 함수를 외부로 내보낸다.

//hello.js
export function hello(name){
    console.log(`hello, world! I'm ${name}!`);
}

모듈 파일을 불러올 때는 import 를 사용한다. 불러오는 함수는 중괄호 안에 묶는다. 

//main.js
import {hello} from './hello.js'; //모듈의 함수 불러오기

hello('Lily'); // Hello, world! I'm Lily! 콘솔에 출력

 

일반 스크립트 파일과의 차이점

- 항상 엄격 모드(use strict)로 실행됨.

- 모듈은 스코프가 별개로, 모듈 내부에서 정의한 변수나 함수를 다른 스크립트에서 접근할 수 없음. export, import를 이용해야한다. 

- 같은 모듈이 여러 곳에서 사용되어도, 모듈은 최초 호출 시 단 한번만 실행됨.

- 브라우저 환경에서 일반 스크립트보다 항상 지연 실행됨. 따라서 모듈 스크립트는 HTML문서가 완전히 만들어진 이후에 실행됨.

---

참고 자료

MDN Docs https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules

코어 자바스크립트 https://ko.javascript.info/modules-intro