모듈(Module)

JavaScript/Basic

모듈(Module)

yunajoe 2022. 12. 31. 13:45

모듈이 되는 파일은 그 파일만의 '독립적'인 스코프를 가져야 한다

모듈 파일 내부에서 선언한 변수나 함수는 그 파일 안에서만! 사용을 해야 한다

각각의 모듈 파일들이 다른 모듈과는 스코프를 공유할 수 없도록 해야한다

<!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>
</head>
<body>   
  <script src="printer.js"></script>   
  <script src="index.js"></script>
</body>
</html>

// printer.js
const title = 'Printer모듈입니다'; 

function print(value){
    console.log(value);
}

// index.js

// printer.js에 있는 print(value)
print(title);  

// 이러한 형태의 모듈은 문제가 된다 
// printer.js에 있는 같은 이름의 함수를 여기에다가 적는다면?! printer.js의 함수가 지워진다
function print(value) {
    console.log('index모듈에있는 print함수입니다')
}

다른모듈파일에서 사용할 수 없게 하려면?!

- script type="module"을 붙인다.

- 내보내고 싶은 변수나 함수에 export를 붙여주고 사용하고 싶은 변수나 함수에 import를 붙여주면 된다

<!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>
</head>
<body>   
  <script type="module" src="index.js"></script>
</body>
</html>

// printer.js

export const title = 'Printer모듈입니다';  
export function print(value){
    console.log(value);
}

// index.js
import { title, print } from './printer.js';  
print(title);