import/export

import/export 사용하려면
html 파일에

<script type="module">

</script>

적고 시작

export default / import

(library.js)

var a = 10;
export default a; //변수 a를 사용할수 있게 해줌

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

<script type="module">
  import 변수명내맘대루 from 'library.js';  // js파일로부터 변수 꺼내옴
  console.log(변수명내맘대루); //10 
</script>

JS 파일에서 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶으면

export default 변수명

변수를 가져다쓰고 싶다면

다른 파일에서 import 어쩌구 from '경로'
import시 변수명은 아무렇게나 작명이 가능

---

export 여러개 / import

(library.js)

var a = 10;
var b = 20;
export {a, b}; //export default와 달리 {} 붙여줘야하고
//export{a};
//export{b}; 이렇게 따로도 가능

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

<script type="module">
  import {a,b} from 'library.js'; //꺼내 쓸때도 {}붙이고 js와 같은 변수명으로 사용해야함
  console.log(a); // 10
</script>

export 라고 쓸땐

export {변수명1, 변수명2 ...} 이렇게

혹은 export var a = 10; => 얘는 변수를 바로 지정하고 쓰고싶을때 쓴다는데요

export 키워드로 내보낸 것들을 import 할땐

import {변수명1, 변수명2 ...} from '경로'

---

export와 export default 동시 사용할때

(library.js)

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

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

<script type="module">
  import 내맴, {a,b} from 'library.js'; // export default 한값은 무적권 맨 왼쪽에 와야함
  console.log(내맴); //30
</script>

export default 한건 맨 왼쪽에 써주고

그 다음부터 이제 {} 중괄호 안에 export 했던 변수들을 적으면됨

---

js파일에 있는 변수명 진짜 마음에 안들땐 어떡함?

(library.js)

var a = 10;
var c = 30;
export {a};
export default c;

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

<script type="module">
  import c, {a as 폭발} from 'library.js'; // 변수명 as 새변수명
  console.log(폭발); //10
</script>

{변수 as 새변수명} 하면됨

---

변수 1000개 넘는데 한번에 못가져옴? => * 쓰면 가능

(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 변수모음 from 'library.js';
  console.log(변수모음.a); // 뽑아쓸라면 *as 한 변수명 앞에 붙여야됨 - 여기선 변수모음.a
  console.log(c);
</script>

여기서 * 은 export{}했던 애들 걍 다 import해달라는 뜻

근데 그냥 쓰면 안되고 as로 이름 지어줘야함

import * as 내맘대루 from '경로'; 이렇게

근데 export default 한 값은 써도 안가져와짐 그래서 원래 알던대로 따로 앞에 추가하면 됨
import 디폴트한거, as 내맘대루 from '경로';