[JavaScript] 파일 모듈화(module)

🟨 JavaScript

[JavaScript] 파일 모듈화(module)

10000COW 2022. 12. 24. 10:47

728x90

파일 모듈화

모듈(module)을 사용하면 JavaScript 파일별로 각각 캡슐화가 가능하다.

두 개의 JavaScript 파일을 만들어서 모듈화를 해보자.

우선, 아래와 같이 HTML 파일에 counter.js 파일과 main.js 파일을 <script> 태그로 연결해보자.

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

counter.js 파일에는 변수 count가 있고, 함수 increase와 getCount가 있다.

변수 count는 다른 파일에서 접근하지 못하게 하고, increase와 getCount는 사용할 수 있게하려면

export를 앞에 붙여주면 다른 파일에서 import가 가능하다.

(export default는 모듈에서 딱 하나만 export할 때 사용할 수 있다.)

counter.js

let count = 0;
export function increase() {
  count++;
  console.log(count);
}
export function getCount() {
  return count;
}

main.js는 import를 활용해 counter.js로 부터 increase 함수와 getCount 함수를 받아올 수 있다.

(count는 export되지 않았으므로 불가)

import * 을 사용하면 counter.js 파일이 export하는 모든 것을 받아오고,

이런 식으로 원하는 것만 받아올 수도 있다.

import { increase} from './counter.js';

import { increase, getCount } from './counter.js';

main.js

import * as counter from './counter.js';

counter.increase();
counter.increase();
counter.increase();
console.log(counter.getCount());

728x90

저작자표시