자바스크립트 코드가 길어지면 다른 파일로 쪼개는게 좋은 관습이라 합니다.
다른 파일로 쪼개 놓고 그걸 첨부 하는 방법을 알아보자


IE에선 안됨
프론트엔드에서 <script src=''> 씁시다.

요약

   library.js

    var a = 10
    var b = 20
    var c = function(){...}
    export {a,b}
    export default c

    ----------------------------
    (index.html)

    <script type="module">
        import 디폴트한것작명, {a as 작명가능,b} from 'library.js';

        //아니면
        import default한것 작명, * as 작명 from 'library.js';

        { 변수명 as 새롭게 지을 변수명, 변수명 as ... }
        * as 작명

        //default 한것과 여러 export 한것을 같이 쓰고 싶으면
        //default한 것이 맨 왼쪽에 써져야 함!!
    </script>

ES6 import / export를 쓰면 내가 원하는 것만 선택적으로 골라서
변수, 함수,class만 다른 파일로 슈슝✨ 보낼 수 있다.

방법을 이제 부터 알아보자

<script type="module">

</script>

▲HTML 파일 안에서 ES6 import 문법을 쓰시려면 저렇게 script 태그 안에 type을 module로 설정해주쇼

export default / import를 쓰면

다른 파일에 있는 변수 등을 가져다쓸 수 있습니다.
변수 함수 class 전부 가능하다.

<library.js>
  
var a = 10;
export default a;
  
--------------
  
<script type="module">
  import a from 'library.js';
  console.log(a); // 10(대박...)
</script>

JS 파일에서는 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶으면
export default 변수명 이라고 주문을 외치면 된다.

그리고 그 변수를 가져다쓰고 싶다면, 다른 파일에서 import 어쩌구 from '경로' 해주면 된다.

(import시 어쩌구라는 변수명은 아무렇게나 작명이 가능 - default 경우임!!!)

여러개 export 해보자

JS파일에서 변수를 여러개 만들고 그걸 다 내보내고싶으면
export 라는 키워드를 여러번 쓰면 되겠다.

<library.js>

var a = 10;
var b = 20;
export {a, b};

--------------

<script type="module">
  import {a,b} from 'library.js';
  console.log(a,b); // 10,20 출력 
</script>

근데 export를 사용 할 땐,
export {변수명1, 변수명2 ...} 이렇게 담아주어야 한다.

작성한 변수명 그대로 export 해야 한다.

export var a = 10;
export var b = 20;
이렇게도 가능하다.

export 키워드로 내보낸 것들을 import 하실 땐
import {변수명1, 변수명2 ...} from '경로' 이렇게 정확하게 import 할 때도 export한 변수명 그대로 기입해야 함!

export와 default export를 동시에 사용하면?

되긴 할텐대, 정리를 어떻게 해야 할까??

<library.js>

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

------------------------
(index.html)

<script type="module">
  import c, {a,b} from 'library.js';
  //default 이외의 export는 { } 감싸서 오른쪽에 적자
  
</script>

default 한 것은 맨 왼쪽에 써줘야 한다.!!!!!🎃

변수명이 맘에 안들면 as로 새롭게

<library.js>

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

------------------------
(index.html)

<script type="module">
  import c, {a as purple} from 'library.js';
  console.log(purple)// 10
</script>

import 한 것이 많으면 *기호를 사용

export { } 했던 변수들이 100개면
import 할 때 100개 변수다 써야하냐;;

그렇기 싫으면 object로 export 한번에 담아서

import 할 때 *을 이용해보자

<library.js>

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

------------------------
(index.html)

<script type="module">
  
  import c, * as variable from 'library.js';
  console.log(variable.a) // 10
  console.log(variable.b) // 20
</script>

• 이라는 기호는 export { } 했던 애들을 그냥 다 import 해주세요~ 라는 뜻