애플리케이션의 기능들이 추가되고 규모가 커짐에 따라 코드양이 많아지고 복잡해진다. 코드의 복잡성이 올라가면서 자연스럽게 유지보수가 어려워져 필연적으로 분리를 필요로 하게 된다. 코드를 관심사나 기능별로 파일을 분리하고 캡슐화하여 복잡성을 줄이는 패턴이 Module Pattern이다.
💡 모듈이란? 독립되어 있는 하나의 소프트웨어 또는 하드웨어 단위를 지칭 - 텀즈(모듈)
모듈 패턴의 가치는 캡슐화로부터 나오기 때문에 캡슐화에 대해 알아야 한다. 캡슐화는 복잡한 시스템을 단순화 하는 방법이다. 프로그램은 필연적으로 객체간 의존성이 나타나게 되고 이 의존관계가 복잡하게 얽히면 기능 추가나 수정이 어려워진다. 이러한 복잡성을 줄이기 위해 구상계층의 특징들은 뽑은 추상계층을 통해 통신하는 방식으로 그 복잡성을 줄이는 것이 캡슐화이다. ATM기에서 송금을 진행한다고 하자. 돈을 맡기려는 나는 송금하기 버튼을 누르고 비밀번호를 입력하면 다른 누군가에게 송금을 할 수 있다. 이것이 캡슐화의 예이다. 송금을 위해서는 은행 간 전상망에서 여러가지 인증을 포함한 과정들을 진행해야 한다. 하지만 나에게는 송금하기 라는 기능만 보여주고 나머지 과정들은 보이지 않는다. 즉, 나머지 기능들은 캡슐화하고 외부와 소통하고 싶은 부분만 보여주는 방식으로 외부와 소통방식을 단순화한 것이다.
모듈패턴은 복잡한 코드를 단순하게 만들어 다른이와 커뮤니케이션하는 것을 쉽게 한다. 또한, 중복을 최소화할 수 있기 때문에 프로그램의 수정 비용을 낮추는데 그 의미가 있다.
ES6이전에 자바스크립트에서는 클로저와 같은 방식으로 모듈을 구현하였다. 하지만 ES6에서는 export와 import구문이 등장하면서 쉽게 모듈화를 진행할 수 있게 되었다.
// math.js
export default function add(x, y) {
return x + y;
}
export function multiply(x) {
return x * 2;
}
export function subtract(x, y) {
return x - y;
}
export function square(x) {
return x * x;
}
// main.js
import addValue, { multiply as multi, subtract, square } from "./math.js";
addValue(7, 8);
multi(8, 9);
subtract(10, 3);
square(3);
위처럼 export를 통해서 export한 값은 {}를 통해 받을 수 있고 import하는 값의 이름을 변경하고 싶다면 as문을 이용하여 변경할 수 있다. 또한, export default로 export한 경우 {}없이 직접 import할 수 있고 이름 또한 자유롭게 변경 가능하다.
참고