.js 파일 연결하기 (src) (export, import)

1.  script 태그에 src로 파일 위치 적어주는 방법

<script src = "library.js">

👉호환성이 좋다.

👉 기본적인 html, css, js 다룰때에는 많이 사용한다. 

 

 

 

2. script 태그에 type을 module 로 적어주는 방법

👉  es6 문법이 나오면서 생긴 방법이다. IE 에서는 안되며, 호환성이 떨어진다.  

👉 필요한 것들만 가져올 수 있다는 특징이 있다. js 파일의 모든걸 가져오는 것이 아니라 !!

👉   React 사용하거나 JS 파일을 나누거나 할때에는 사용하는걸 추천한다고함. 

 

이 방법은 export와 import를 사용하는데, 

html 파일에서는 import를, 

연결하려고 하는 js 파일에서는 export를 하면 된다. 

 

1) export default 

//html 파일
<script type = "module">
	//import 이름작명 from 'js파일 경로'
	import ccc from '/library.js'
</script>

 //library.js 파일
 
 let c = 30;
 export default c;

좀더 자세히 말하면 순서가 이렇다. 

1️⃣   js 파일에 변수 c를 선언하고 값을 할당한다. 

2️⃣   js 파일에서 변수 c를 export 해준다. html 파일에서 사용할 수 있도록!  (export default 사용.) 

3️⃣   html 파일에서 변수 c를 가져온다 . import 해준다.  이때 변수 이름은 마음대로 작성해도 된다. 

  ❓❓ export default 로 js 파일에서 내보냈기 때문에 가능하다.  export default 는 한번만 쓸 수 있기 때문에 값이 1개밖에 없다. 

 

 

 

 

2) export {}

//html 파일
<script type = "module">
	//import {가져올 변수이름} from 'js파일 경로'
	import {a, b} from '/library.js'
</script>

 //library.js 파일
 
 let a = 10;
 let b = 20;
 export {a, b}
 
 //이런 방법으로도 가능하다. export, 변수선언, 할당 동시에 하기
 export let d = 50;

 

1️⃣   js 파일에 변수 a, b를 선언하고 값을 할당 한다. 

2️⃣   js 파일에서 변수 a, b 를 중괄호로 묶어서 같이 export 해준다. html 파일에서 사용할 수 있도록!  (export {}사용.) 

3️⃣   html 파일에서 변수 a, b를 중괄호로 묶어서 가져온다. import 해준다.  이때 변수 이름은 똑같이 작성해야 한다. 

 

& 변수의 선언과 할당을 하면서도 동시에 export 할 수 있다규

 

3) export로 가져온 변수명 바꾸고 싶으면

//html 파일
<script type = "module">
	//import {가져올 변수이름 as 새로운이름 } from 'js파일 경로'
	import {a as AAA} from '/library.js'
</script>

 

 

4) export , export default 다 같이 한번에 가져오고 싶으면

//html 파일
<script type = "module">
	//import default변수이름 아무거나, {가져올 변수이름} from 'js파일 경로'
	import ThisIsC, {a, b} from '/library.js'
</script>

 export default 로 가져온 작명이 자유로운 변수를 제일 앞에 적고, 그 뒤에 중괄호로 다른 변수들 넣기

 

 

5) 모든걸 다 import 하고싶을때 *  을 사용하자. 

//html 파일
<script type = "module">
	//import *  as 가져오는애들 불러줄 이름 from 'js파일 경로'
	import * as all from '/library.js';
    // console.log(all)  //Module {Symbol(Symbol.toStringTag): 'Module'}
    // console.log(all.b, all.c)  //20 undefined 
</script>

 

 

❓❓ c는 왜 undefined가 나왔을까?? 

     👉  export default 로 불러왔기 때문이다.  export default로 넣어둔 데이터도 불러오려면 

     👉  👉 아래와 같이  import 뒤에  export default 로 넣어둔 데이터 이름을 쓰고, *을 해야한다. 

import c,* as all from '/library.js'