Module

정의 및 장점

프로그램/라이브러리에서 연관된 객체, 함수, 컴포넌트등을 함께 모아서 잘게 나눈 것

• 장점
  • 모듈 각자의 스코프를 가지므로 전역변수의 사용을 줄일 수 있다
  • 코드의 재사용성이 높아짐
  • 코드를 여러 모듈로 분리하여 깔끔하게 구획하고 조직화
  • 특정 모듈에 버그가 한정되므로 디버깅이 쉽다

기존방법

• IIFE
• AMD : 웹페이지 로딩을 차단하지 않고 비동기적으로 모듈을 임포트할 수 있게 설계. 대표적 라이브러리 RequireJS
• CommonJS : 노드JS에서 모듈을 구현하는 명세. 각 모듈을 개별 파일로 구현하며 비동기적으로 임포트한다
• UMD(만능 모듈 정의): 모듈 명세(IIFE, AMD, CommonJS)에 구애받지 않고 모듈을 프로그램에 임포트할 수 있게 해줌

ES6 모듈

export 문 : 변수, 함수, 클래스 등을 익스포트할 수 있음

• export문은 모듈 어디에서나 쓸 수 있음. 모듈 끝부분에만 써야 하는 것은 아님
• 모듈 내에서 export 문은 무제한 사용할 수 있다
• 모듈 구조는 정적이라 조건문에 사용할 수 없음
• 똑같은 변수명/별명을 계속 익스포트 할 수는 없고 동일한 변수를 다른 별명으로 여러번은 가능 모듈 코드는 strict mode로 실행

import 문

• 임포트할 변수명과 모듈 내 상대 경로로 이뤄짐
• import 변수 from "경로"
• 특징
  • import 문은 익스포트된 변수의 사본을 임포트하는 것이 아님. 모듈내에서 익스포트된 변수를 고치면 이 변수를 임포트한 프로그램에도 반영됨
  • 임포트한 변수는 읽기 전용
  • 모듈 구조는 정적이라 조건문에 사용할 수 없음
  • 성능최적화에 유리 : AMD, CommonJS의 임포트보다 빠르다.

예제

let LN2 = Math.LN2;
let N10 = Math.LN10;
 
function getLN2(){
    return LN2;
}
 
function getLN10() {
    return LN10;
}
 
export {getLN2, getLN10}

let cos = Math.cos;
let sin = Math.sin;
 
function getCos(value){
    return cos(value);
}
 
function getSin(value){
    return sin(value);
}
 
export {getCos, getSin}

import * as logarithm from 'math_modues/logarithm';
import * as trigonometry from 'math_modues/trigonometry'
 
export default {
    logarithm: logarithm,
    trigonometry: trigonometry
}
import math from 'math';
 
console.log(math.logarithm.getLN10(100));
 
console.log(math.trigonometry.getSin(3));