모듈 패턴

 

JS의 모듈 패턴은 코드를 구조화하기 위해 사용된다.

즉, JS로 캡슐화를 구현하는 것이다.

 

따라서 모듈 패턴은 최소 노출의 원칙(POLE)을 따라 가시성을 제어하고, 정보(데이터, 상태)와 동작(함수,메서드)을 한데 묶는다.

이를 위해 JS의 특징인 렉시컬 스코프 메커니즘을 이용한다.

 

모듈은 아니지만 비슷한 데이터 묶음으로,

네임스페이스(데이터 없이 관련한 무상태 함수를 묶어놓은 것)와,

데이터 구조(데이터와 동작을 묶지만, 가시성 제한을 하지않음)가 있다.

 

먼저, 모듈 패턴을 구현하기 위해서는 위에서 설명한대로 간단히 렉시컬 스코프 메커니즘을 이용하면 된다.

//모듈 팩토리 함수
function defineStateModule(){
    var state = 0;
    var publicAPI = {
    	getState,
        setState
    };
    return publicAPI;
    
    function getState(){
    	return state;
    }
    function setState(newState){
    	state = newState;
    }
}

var stateModule = defineStateModule();
stateModule.getState(); // 0

stateModule.setState(2);
stateModule.getState(); // 2

 

JS에서 사용되는 모듈 패턴은 클래식 모듈, CommonJS, ES모듈의 형태로 나뉜다.

먼저, 클래식 모듈은 위에서 설명한 것 같이, 직접 모듈패턴을 구현하는 것을 말한다. (팩토리 함수, 정보/동작 묶음, 가시성 제어)

 

CommonJS 모듈은 Node.js에서 사용하는 방법으로, 파일 기반이기 때문에 모듈을 만들 때 별도의 파일을 정의해야 한다.

/*state.js*/
module.exports.getState = getState;
module.exports.setState = setState;

var state = 0;

function getState(){
    return state;
}
function setState(newState){
    state = newState;
}

/*use.js*/
var stateModule = require("/path/to/state.js");
stateModule.getState(); // 0

stateModule.setState(2);
stateModule.getState(); // 2

 

ES 모듈은 CommonJS와 유사한 파일기반 모듈이지만, import/export 문법이 다르고, 기본적으로 엄격 모드로 실행된다는 차이가 있다.

export 시 default로 내보내는 방법과, named export를 하는 방법이 있다.

리액트 개발 시 흔히 사용하는 방법이다.

/*state.js*/
var state = 0;

export function getState(){
    return state;
}
export function setState(newState){
    state = newState;
}

/*use.js*/
import {getState, setState} from "/path/to/state.js";

getState(); // 0

setState(2);
getState(); // 2

 

 

+ 사용 예) emscripten(C/C++ -> WASM 빌드 툴)의 Modularize 옵션을 켜고 빌드 시, Module 패턴을 이용하여 인터페이스를 제공한다.

 

emscripten으로 빌드 시 Modularize 옵션을 사용하면, 아래와 같이 Module 이라는 객체를 제공하는데,
해당 객체의 구조를 보면

아래와 같이 클래식 모듈 형태로 Module 객체에 외부로 공개할 각종 데이터/함수를 넣고, 이를 return 하는 것을 볼 수 있다.

.

.

(중략)

.

.