일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- web server vs was
- 자료구조 queue
- 자료구조 정렬
- 자료구조
- react event bind
- react
- typescript parcel tilde
- javascript eventloop
- javascript module
- DOM API
- redux 특징
- parcel
- first class citizen
- 순차리스트
- client side rendering
- body-parser
- Call stack
- server side rendering
- Browser API
- redux 사용 이유
- 일급 객체
- express request body
- parcel resolver error
- task queue
- Event Loop
- request body undefined
- 선형리스트
- javascript first class citizen
- centos7 설치
- es6 module
Archives
- Today
- Total
비실이의 개발 성장기
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 default 를 통한 기본 내보내기는 한개만 지정할 수 있습니다.
- 다양한 import / export 방식은 본문 하단링크 'export - MDN web docs' 를 참고하세요.
# 모듈 스크립트와 일반 스크립트 차이점
-
모듈은 항상 '엄격모드' 로 실행됩니다.
-
그러므로 모듈의 최상위 레벨에서 this 는 undefined 가 됩니다.
-
-
모듈은 자기자신만의 스코프를 가집니다.
-
모듈에서 선언한 변수나 함수를 export 하지 않으면 다른 모듈이나 일반 스크립트에서 접근할 수 없습니다.
-
html 인라인 스크립트에서도 동일하게 적용됩니다.
-
-
동일한 모듈을 여러번 import 했을 경우, 최초 import 구문만 실행되고 나머지 구문은 무시됩니다.
# 참고문서
# 잘못된 내용은 댓글 달아주세요.
'프론트엔드 > javascript' 카테고리의 다른 글
javascript 이벤트 루프 / 태스크 큐 / 콜 스택 알아보기 (1157) | 2020.07.04 |
---|---|
호이스팅(Hoisting) 정리 (1177) | 2019.03.03 |
실행 컨텍스트 (Execution context) 정리 (1120) | 2019.03.03 |
일급 객체 (First-class citizen) (1098) | 2018.11.06 |
[javascript] 모듈 사용방식과 번들러 사용 이유 (1179) | 2018.05.26 |
Comments