가라멜의 달달한 세상 탐방

출처 : https://poiemaweb.com/es6-module

Module | PoiemaWeb

이 포스팅의 위 출처의 게시글을 공부하며 필기 하듯이 써놓은 내용이므로,

정확한 내용은 위의 출처에서 보는 것이 좋다.

 

 

1. Introduction

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다.

 

일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한ㄷ다. 즉, 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 비로소 애플리케이션의 일원이 된다. 모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다.

 

자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적인 한계로 다른 언어에 비해 부족한 부분이 있는데, 그 대표적인 것이 모듈기능이 없는 것이다.

ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가하였다. 다만 현재 대부분의 브라우저가 ES6의 모듈을 지원하지 않고 있으므로 현재의 브라우저에서 ES6모듈을 사용하려면 SystemJS, RequireJS 등의 모듈 로더 또는 Webpack등의 모듈 번들러를 사용하여야 한다.

 

2. export

모듈은 독립적인 파일 스코프를 갖기 때문에 모듈 안에 선언한 모든 것들은 기본적으로 해당 모듈 내부에서만참조할 수 있다. 만약 모듈 안에 선언한 항목을 외부에 공개하여 다른 모듈들이 사용할 수 있게 하고 싶다면 export 해야 한다. 

모듈을 공개하려면 선언문 앞에 export 키워드를사용한다.

 

3. import

export 한 모듈을 로드하려면 export 한 이름으로 import 한다.