3-13.모듈(Module)

2023. 3. 30. 09:52Javascript/자바스크립트 제대로 배워볼래?

3-13.모듈(Module).html

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <!-- 방법 1.    3-13.module.js 파일에, 앞에 export 없을때 정상적으로 작동 -->
    <!-- <script src="/script/3-13.module.js"></script>
    <script>
        log("log로 메시지 출력");
        error("error로 메시지 출력");
    </script> -->

    <!-- 방법 2.      export 추가 후 import 사용  -->
    <!-- js 파일에서 모두 들고오기보다, 원하는것만 import해서 쓰면 훨씬 덜 무겁고 좋다, 에러도 덜함 -->
    <script type="module">
        import {log, error, PI} from "/script/3-13.module.js";
        log(PI);
        log("log로 메시지 출력");
        error("error로 메시지 출력");
    </script>
    <script src="script/3-13.ref.js" type="module "></script>
</body>
</html>

/script/3-13.module.js

export function log(message) {
    console.log(message);
}

export function error(message){
    console.error(message);
}

export const PI = 3.14;

/script/3-13.ref.js 

import {log} from "/script/3-13.module.js";

log("REF에서 출력하는 메세지");

'Javascript > 자바스크립트 제대로 배워볼래?' 카테고리의 다른 글

3-15.Error - try_catch_finally  (0) 2023.03.30
3-14.클래스(Class)  (0) 2023.03.30
3-12.Async_Await  (0) 2023.03.30
3-11.Promise  (0) 2023.03.30
3-10.Array Destructuring  (0) 2023.03.30