모듈만들기
const fck1 = function(){
alert("메롱1");
}
const fck2 = function(){
alert("메롱 규상");
}
const fck3 = function(){
alert("성배 메롱");
}
const set = {fck1 , fck2 , fck3};
export default set;
함수를 만들고 객체에 추가
import하기 -> 경로 확실히 잡아준다
<!DOCTYPE html>
<meta charset="UTF-8">
<!-- 브라우저에서 모듈 사용-->
<script type="module" defer>
// defer -> 실행을 늦춘다!(인터프리터 언어의 보완점 , 완벽하진 않다)
"use strict"; // 엄격모드 사용 권장, 하지만 default값임
// 모듈은 한번만 사용가능!
import inho from "./inhomod.js";
// set을 inho로 받아온다 , 필요한것만 사용가능!
console.log("체크 : " , inho);
// inho.fck1();
// inho.fck2();
// inho.fck3();
var aaa = "인호는 예비군";
</script>
<script>
alert(aaa);
alert("이러면 사용 불가");
</script>
<script type="module">
alert(aaa);
alert("이것도 사용 불가");
alert("밑처럼 전역변수 선언시에는 사용 가능");
</script>
<script>
// 전역변수 module에서 가져가 써도 가능!
var aaa ="이건?";
</script>
필요한 것을 객체에 담아서 전달 -> export시 원하는 것만 사용 가능
모듈은 엄격모드가 default값이다(기본 적용됨)
defer는 완벽하지는 않다
import * as MyModule from ".../xxx.js";
MyModule.myFunc1();
MyModule.myFunc2();
// 모듈 통째로 가져오기
export * from "../xxx.js"
exporrt {All} from "../xxx.js"
// 가져온걸 합쳐서 내보내기
//import 함수는 Promise 리턴
import("../xxxx.js")
.then((MyModule) => {
});
// 동적모듈 로딩
//await를 가진 모듈을 import하는 모듈속의 모듈들은
//await가 끝날때 까정 기다린당
const colors = fetch("../json리턴url")
.then((response) => response.json());
export default await colors;
// await 사용
