import / export 모듈식 개발

script파일을 분리해서 사용할 때 보통은 html파일에서

<script src="library.js"></script>

이런 식으로, 사용한다.

하지만, ES6부턴 import / export를 사용할 수 있다. 예를 들면,

<script type="module">
        import a from 'library.js' //library.js에서 가져온 파일을 a라고 부르겠습니다.
</script>

이렇게, script태그에 type을 module로 작성하고, import 가져올거 from '경로' 를 적어주면 된다.

import의 a는 작명하는 부분이니까 이름은 아무렇게나 쓰면 된다.

 

근데 모든 내용을 가져오진 않고, 변수같은 것만 가져온다고 한다. 

 library.js에

var a = 10;
export default a;

이렇게 a라는 변수를 내보내는 export default 내보낼거 를 적어주면 변수 a를 내보낸다.

 

 

 

만약, 변수 여러개를 내보내고 싶으면

var a = 10;
var b = 20;
export default a;
export default b;

이렇게 쓰면 안된다. export default문법은 1회만 가능하므로

export {}를 사용하면 된다.

var a = 10;
var b = 20;
export {a, b};
//export var a = 10; 이것도 가능

그리고 사용할 땐,

import {a} from '/library.js';

이렇게 {}안에 이름을 정확하게 써주어야 한다. (즉, 변수이름을 똑같이 써야함)

추가로 export와 export default는 동시에 사용가능하다. 대신 맘대로 작명한건 export default에서 가져오고 

{}안에 정확히 변수명을 사용하면 export에서 가져온다.

만약,

var a = 10;
var b = 20;
var c = 30;
export {a,b};
export default c;

이 세개를 모두 import하려면

import c작명,{a,b} from '/library.js';

기본적으로 하는 import는 왼쪽에 쓰는게 error가 나지 않으므로, 작명한건 왼쪽에 써준다.

 

진짜 마지막으로 export를 import해올 때 변수명이 a라 

import {a} from '/library.js';

로 썼는데, 변수명이 너무 마음에 안들면, {변수 as 새변수명}으로 새로 지으면 된다.

import {a as 별명} from '/library.js';

이러면 별명을 출력하면 a가 출력된다.

그리고

import * as 별명 from '/library.js';

이렇게 하면, 모든걸 다 import 해오게 된다. (*은 모든걸 import하는데 보통 별명을 지음)

그래서 사용할 땐, 별명.a  별명.b 이렇게 사용하며 여기엔, export default는 포함되지 않는다. (즉, 따로 import해야함)

 

 

 

옛날 방식은 var 임폴트해온것들 = require('경로'); 이렇게 사용했었음