ES 2015(ES 6)에서 새롭게 추가된 모듈(module) import, export에 대하여 알아봅니다.


ES 6에서의 큰 변화 중 하나가 바로 Module 방식의 export, import가 추가된 사항입니다. 사실 이 전까지는 실질적인 모듈이 지원되지는 않았습니다. ES 6부터 export, import를 사용하는 방법이 가능한데 이 중 export는 모듈을 추가, 등록하는 방법이고 import는 추가된 모듈을 사용할 수 있게 해줍니다. 그럼 먼저 export 부터 알아봅니다.
# ES6 export 알아보기export는 자바스크립트의 데이터를 다른 스크립트에서 모듈 방식으로 불러와 사용할 수 있도록 해줍니다. 이때 내보낼 수 있는 데이터 타입은 원시값, 함수, 클래스, 객체 등을 사용할 수 있습니다.(클래스 역시 ES 6에 추가 됨) 그럼 간단한 코드를 작성해보겠습니다.
export let test = 123;
export function doSomething() { ... };
export { myName: 'Tom', doSomething: function() { ... } };

이처럼 export를 하는 경우 크게 두 가지 방식으로 나눌 수 있는데 이름을 사용하는 방식 그리고 사용하지 않는 방식으로 구분할 수 있습니다. 아래의 두 코드가 어떻게 쓰였는지 봐주세요.

@ test.js
export let test = 123;

@ test2.js
export default let test = 123;

큰 차이는 없으나 이름을 사용하는 경우인 위의 방식에서는 여러개의 값들을 하나의 모듈에서 export 할 수 있으나 아래와 같이 default를 사용하는 경우 하나의 모듈에서 하나의 export만 가능합니다. 이유는 export default와 같이 이름을 사용하지 않는 경우 import할 때 아무 이름이나 붙여서 사용할 수 있기 때문입니다. import는 뒤에서 자세히 다루겠습니다.



# ES 6 import 알아보기다음은 import에 대하여 알아봅니다. import가 하는 일은 위의 코드처럼 export한 모듈을 불러와 사용할 수 있도록 해줍니다. import는 export 보다 간단하며 아래와 같이 사용할 수 있습니다.

import 모듈이름 from '파일이름'


여기서 파일위치는 현재 위치를 기준으로 해당 모듈 파일의 위치를 입력하면 됩니다. 그리고 모듈 이름은 export된 이름이 되겠습니다. 위에 잠깐 언급했지만 만약 export default로 된 경우 아무 이름으나 등록해 사용할 수 있으니 참고하세요. 그럼 실제로 import를 수행하는 간단한 예제를 만들어보겠습니다.


! import 예제보기먼저 export된 모듈이 필요하므로 하나 만듭니다.
@ userLib.js
const myName = 'Tom';

export myName;

이처럼 내보낼 값을 미리 선언하여 많이 사용됩니다. 그럼 다음은 이제 import해서 콘솔에 출력하겠습니다.
import myName from './userLib.js'

console.log(myName);

이처럼 간단하게 export, import를 사용할 수 있습니다.


참고로 모듈을 만들고 추가하거나 가져오는 방법은 ES 6의 export, import 방법 이외에도 nodejs의 require() 등 다른 방법도 있습니다.



# 자바스크립트 모듈을 실행 관련
ES 6에서 모듈을 사용할 경우 import 되는 파일을 mjs로 사용할 수 있습니다. 물론 js 파일도 상관없이 가능하지만 가급적 하나로 통일하는 것이 좋겠습니다.

또한 <script>를 사용할 때 추가적으로 어트리뷰트에 type="module" 사용해야 합니다.
<script type="module" src="./components/lib/test.js"></script>

또한 모듈을 사용할 경우 웹서버 환경에서 동작해야 CORS 에러가 발생하지 않습니다. 반드시 웹서버 환경에서 사용해야합니다.