비실이의 개발 성장기

javascript ES6 모듈(Module) 본문

프론트엔드/javascript

javascript ES6 모듈(Module)

DubbingLee 2020. 6. 20. 15:03

# 모듈

  • 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 구문만 실행이 된다. 

 

 

 

 

 

# 참고문서

 

export

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다.

developer.mozilla.org

 

모듈 소개

 

ko.javascript.info

 

 

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

Comments