MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

• html과 연동하는 여러개의 js 파일을 사용하고, 해당 파일들을 모듈화하여 각 파일에서 고유한 캡슐화를 시키는 방법

  • counter.js, main.js, index.html 문서를 만들기
  1. html 문서에서 아래와 같이 문서를 연동

  <script src="counter.js"></script>
  <script src="main.js"></script>
  

  2. html에서 아래와 같이 모듈화

  <script type='module' src="counter.js"></script>
  <script type='module' src="main.js"></script>
  

• 하나의 js 문서에서 function을 생성하고 다른 js 문서에서 인자 값을 지정해주는 방법

  1. counter.js에서 function을 지정하고 ‘export’를 입력
  • expprt default의 경우, 모듈에서 단 한개만 지정할 수 있음

  let count = 0;
  export function increase(){ // expprt default의 경우, 모듈에서 단 한개만 지정할 수 있음
      count++
      console.log(count);
  }
  export function getCount(){
      return count;
  }
  

  2. main.js 에서 counter.js의 functions을 import 하여 사용
  • 함수명을 바꿔 불러오는 경우 : import {increase as increase1} from './counter.js';
  • 모든 함수를 불러오는 경우 : import {increase, getCount} from './counter.js'
  • 모든 함수의 인자명과 함께 불러오는 경우: import * as counter from './counter.js';

  //import {increase as increase1} from './counter.js';
  //import {increase, getCount} from './counter.js' // 변수도 바로 가져올 수 있으나 비권장
  import * as counter from './counter.js';
  
  counter.increase();
  counter.increase();
  counter.increase();
  console.log(counter.getCount());