[JavaScript] Chapter 23. 모듈

모듈

• 하나의 파일
• 클래스 또는 함수들로 구성
• 스크립트 한 개

모듈의 필요성

• 개발 규모가 커지면서 모듈 시스템으로 구성

 

모듈 종류

1. AMD
2. CommonJS
3. UMD
4. ES6

 

모듈 사용방법

• export (내보내기)
  • 변수나 함수 앞에 사용

// [exportTest.js]
export function exportTest(test) {
    alert('{test}');
}

• import (가져오기)
  • 경로 지정 하지 않으면 오류 발생

// [import.js]
import {exportTest} from "./exportTest.js";
exportTest("John");

 

모듈 특징

• 엄격 모드 (use strict) 로 실행
• 모듈 레벨 스코프 범위
• 동일한 모듈 여러 번 사용해도 한 번만 실행
• *엄격 모드
  • 일반적인 JS에서 허용되는 실수를 제한
  • 까다롭게 문법 검사하는 모드

 

모듈 특징 - 엄격 모드

<script type="module">
  a = 5;  // 에러
</script>

 

---

 

CommonJS

• 공통 JS 모듈
• Node.js 환경의 모듈 시스템
• module.exports와 require 이용
• 동기적으로 불러옴
• Bank-End 용으로 개발

 

commonJS 사용방법

• export (내보내기)
  • 변수나 내보내고자 하는 객체 지정

module.exports = "test";
module.exports = { myAge : 30, myName : "홍길원" }

• require (가져오기)
  • 반환 값 module.exports 객체

const req = require("./exportTest.js");

 

commonJS 실습

// [export.js]
module.exports = { myAge : 30, myName : "홍길원" }

// [import.js]
const req = require("./export.js");
console.log(req.myName);  // "홍길원"

 

---

 

AMD

• Asynchronous Module Definition
• 비동기적 모듈 선언
• Require.js
• Front-End 용으로 개발됨
• define과 require 사용

 

AMD 사용방법

• define (내보내기)

define(['./require.js'], function(req) {
  function sum(num1, num2) {
    return num1 + num2;
  }
    
  return { sum:sum }
});

• require (가져오기)

require(['./amdCalc.js'], function(fn) {
  console.log(fn.sum(10,20));
});

 

---

 

UMD

• Universal Module Definition
• 여러 모듈 시스템 동작 가능
• AMD와 CommonJS를 통합하기 위한 것
• AMD의 define 사용
• CommonJS의 module.exports 사용

function(root, factory) {
  // AMD
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  }
  // CommonJS
  else if (typeof module === 'object' && module.exports) {
    module.exports,
    module.exports = factory();
  }
  else {
    root.returnExports = factory();
  }
};

 

---

 

ES6

• 코드 유지관리 쉬움
• 클린 코드
• 필요한 것만 가져올 수 있음

 

모듈 사용방법

• export (내보내기)
  1. 기본 내보내기
     • export
  2. 단일 객체 내보내기
     • export default
     • 하나의 모듈에서 하나의 객체만 보냄
     • 중요하거나 필수 대상을 내보낼 때, 사용

// [sum.js]
export function sum(num1, num2) {
  return num1 + num2;
}


// [info.js]
const num1 = 20;
const num2 = 10;

export default {
  num1,
  num2
}

• import (가져오기)
  • 경로 지정하지 않으면 오류 발생

// 1) 명시
import {sum} from "./exportTest.js";

// 2) default 명시, 나머지
import default, * asName from "./exportTest.js";

// 3) default 명시, 각각 명시
import default, {sum} from "./exportTest.js";

// 4) 전체
import * from "./exportTest.js";