javascript ES6 모듈(Module)

# 모듈

• ES6 에서 처음으로 모듈에 대한 표준이 도입되었습니다.

• ES5 까지 javascript 에는 모듈에 대한 표준이 없었습니다.

• 모듈 표준이 없었을 당시에는 AMD, CommonJS, UMD 방식의 모듈시스템을 사용했습니다.

 

 

 

# 모듈 생성

• js 파일이 곧 모듈이 됩니다.

• 모듈에서 다른 모듈을 가져와 사용할 수 있고, 반대로 내보낼 수 있습니다. (import / export)

• 생성한 js 모듈을 브라우저에서도 모듈로 인식하도록 script 태그에 type="module" 을 지정합니다.

  • 브라우저가 모듈로 인식해야 import / export 를 사용할 수 있습니다.

<script type="module" src="./utils.js"></script>

 

 

 

 

# 모듈 import / export

• 모듈에 선언한 변수나 함수를 다른 모듈에 제공하기 위해 export 를 사용합니다.

• export 된 모듈을 가져와 사용하기 위해 import 를 사용합니다. 

export / import 사용 방식

 

• export default 를 통한 기본 내보내기는 한개만 지정할 수 있습니다.

기본 내보내기(export default) 를 여러개 사용하면 에러가 발생한다.

 

• 다양한 import / export 방식은 본문 하단링크 'export - MDN web docs' 를 참고하세요.  

 

 

 

# 모듈 스크립트와 일반 스크립트 차이점

• 모듈은 항상 '엄격모드' 로 실행됩니다.

  • 그러므로 모듈의 최상위 레벨에서 this 는 undefined 가 됩니다.

• 모듈은 자기자신만의 스코프를 가집니다.

  • 모듈에서 선언한 변수나 함수를 export 하지 않으면 다른 모듈이나 일반 스크립트에서 접근할 수 없습니다.

  • html 인라인 스크립트에서도 동일하게 적용됩니다.

foo 모듈에서 bar 모듈에 있는 getBar 함수를 호출했으나 스코프가 다르므로 에러가 발생

 

html 인라인 모듈 스크립트에서도 모듈마다 서로 독립된 스코프를 가진다는 것을 알 수 있다. 

 

• 동일한 모듈을 여러번 import 했을 경우, 최초 import 구문만 실행되고 나머지 구문은 무시됩니다.

동일한 모듈에 대해 import 구문을 여러번 사용해도 최초 import 구문만 실행이 된다. 

 

 

 

 

 

# 참고문서

• 모듈 소개 - JSInfo
• export - MDN web docs

export

모듈 소개

 

 

# 잘못된 내용은 댓글 달아주세요.