Stack/JavaScript

[JS] 모듈

7ingout 2022. 6. 17. 15:35

분리된 파일

 

export 지시자

외부모듈에서 해당 변수나 함수에 접근할 수 있도록 함(모듈 내보내기)

 

import 지시자

외부모듈의 기능을 가져와서 사용할 수 있음(모듈 가져오기)

 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module">
        // import { sayHi, sayHi2 } from './sayHi.js';
        // * as <obj> -> 객체 형태로 원하는 것들은 불러옴
        import * as say from './sayHi.js';

        console.log(say);
        console.log(say.sayHi('green'));
        console.log(say.sayHi2('blue'));
    </script>
</head>
<body>

</body>
</html>

 

sayHi.js

export function sayHi(user) {
    return `안녕! ${user}`;
}
export function sayHi2(user) {
    return `랄랄라! ${user}`;
}
// export { sayHi, sayHi2 }; // 두함수를 내보냄