참고
Module
NOTE
ES2015 모듈은 기본적으로 JavaScript 코드를 담고 있는 파일.
•
project의 규모가 커지면서 코드를 여러 파일과 폴더로 나누어 작성하고 파일간에 효율적으로 불러올 수 있도록 해주는 시스템이 필요로 해졌다
<script type="module" src="app.js"></script>
JavaScript
복사
export default person; // default export
export const data=10; // named export
import person from './person.js';
import {data} from './utility.js';
import {data as d} from './utility.js'; //별칭 지정
imoprt * as bundled from './utility.js'; //여러 모듈 가져오기
JavaScript
복사
구형 브라우저의 경우 module을 지원하지 않는다•
webpack, parcel 모듈 번들러를 통해 변환과정을 거쳐 사용한다.
module - scope
NOTE
•
type=”module”의 기본적인 this는 window가 아니라 undefined이다.
•
단 import되는 위치에따라서 this의 값이 달라질 수 있다
scope 코드
module - import & export
•
type=”module”의 데이터를 쓰기위해선 import, export를 설정해야한다.
import & export 코드
import & export 코드2 (한번에 export)
import & export 코드3 (별칭)
•
[참고]
module - default
•
export default를 사용하면
'해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있습니다.
import & export 코드 (기본값 넘기기 default)
module - 컴포넌트 등록(Vue.js)
NOTE
•
components 디렉토리를 만들어서 모듈화된 파일을 한번에 등록함
component 코드