93. 자바스크립트 모듈화 설계 (Modular Design)

모듈화 설계 (Modular Design)

자바스크립트에서 모듈화 설계는 코드를 체계적으로 관리하고 재사용성을 높이는 핵심 개념이다. 독립적인 기능을 가진 코드 단위를 만들어 다른 코드와의 결합도를 줄이고 응집도를 높인다. 이를 통해 코드의 유지보수성과 확장성이 향상된다.

모듈화의 기본 원리

모듈은 특정 기능을 독립적으로 수행하는 코드의 집합이다. 함수, 클래스, 변수 등을 포함하며, 다른 모듈과 최소한의 상호작용만을 유지한다. 이를 통해 코드의 책임이 명확해지고, 수정이나 확장이 필요할 때 영향을 최소화할 수 있다.

모듈화의 핵심 목표는 다음과 같다:

• 코드의 재사용성 향상
• 유지보수 부담 감소
• 개발 과정에서 협업 효율성 증대
• 복잡성 관리

간단한 계산 모듈을 예로 들어본다:

// calc.js
function add(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

module.exports = { add, multiply };

// app.js
const calc = require('./calc');
console.log(calc.add(2, 3));      // 5
console.log(calc.multiply(2, 3)); // 6

위 코드는 계산 기능을 모듈로 분리하여 별도 파일에서 관리한다. 다른 파일에서 필요할 때 불러와 사용할 수 있다.

자바스크립트의 모듈 시스템

자바스크립트는 다양한 모듈 시스템을 제공한다. 대표적으로 ES6 모듈, CommonJS, AMD가 있다.

ES6 모듈

ES6 모듈은 import와 export 키워드를 사용한다. 브라우저와 Node.js에서 모두 지원되며, 정적 분석이 가능하다는 특징이 있다.

// utils.js
export function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

export const maxLength = 100;

// main.js
import { capitalize, maxLength } from './utils.js';

console.log(capitalize('hello')); // Hello
console.log(maxLength);          // 100

기본 내보내기를 사용할 수도 있다:

// logger.js
export default function log(message) {
    console.log('[LOG] ' + message);
}

// app.js
import log from './logger.js';
log('Application started'); // [LOG] Application started

CommonJS

CommonJS는 Node.js에서 기본적으로 사용된다. require와 module.exports를 통해 모듈을 정의하고 불러온다.

// data.js
const items = ['apple', 'banana'];
function addItem(item) {
    items.push(item);
    return items;
}

module.exports = { items, addItem };

// index.js
const { items, addItem } = require('./data');
console.log(items);           // ['apple', 'banana']
console.log(addItem('orange')); // ['apple', 'banana', 'orange']

AMD (Asynchronous Module Definition)

AMD는 비동기 모듈 로딩을 지원한다. 주로 브라우저 환경에서 RequireJS와 함께 사용된다.

// math.js
define([], function() {
    return {
        add: function(a, b) { return a + b; },
        subtract: function(a, b) { return a - b; }
    };
});

// main.js
require(['math'], function(math) {
    console.log(math.add(5, 3));      // 8
    console.log(math.subtract(5, 3)); // 2
});

모듈화의 이점

모듈화는 여러 측면에서 유리하다:

• 가독성 향상: 코드를 기능별로 분리하면 구조가 명확해진다.
• 테스트 용이성: 개별 모듈을 독립적으로 검증할 수 있다.
• 협업 효율성: 팀원이 각 모듈을 분담하여 작업할 수 있다.
• 시간 절약: 기존 모듈을 재활용하여 개발 속도를 높인다.

예를 들어, 데이터 유효성 검사 모듈을 만들어 여러 곳에서 활용한다:

// validate.js
function isEmail(str) {
    const regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    return regex.test(str);
}

function isNotEmpty(str) {
    return str.trim().length > 0;
}

export { isEmail, isNotEmpty };

// form.js
import { isEmail, isNotEmpty } from './validate.js';

const email = 'user@domain.com';
const name = 'John';

console.log(isEmail(email));    // true
console.log(isNotEmpty(name)); // true

모듈 설계 시 고려 사항

모듈화를 적용할 때는 몇 가지 주의할 점이 있다:

• 의존성 관리: 모듈 간 의존성이 복잡해지면 관리가 어렵다. 명확한 인터페이스를 유지한다.
• 순환 의존성 방지: 모듈 A가 B를, B가 A를 의존하면 문제가 발생한다.
• 모듈 크기 조절: 너무 작거나 크면 효율이 떨어진다.

순환 의존성을 피하는 방법을 살펴본다:

// 잘못된 예: 순환 의존성
// a.js
import { bFunc } from './b.js';
export function aFunc() { bFunc(); }

// b.js
import { aFunc } from './a.js';
export function bFunc() { aFunc(); }

// 해결: 공통 모듈 분리
// common.js
export function sharedFunc() { console.log('Shared'); }

// a.js
import { sharedFunc } from './common.js';
export function aFunc() { sharedFunc(); }

// b.js
import { sharedFunc } from './common.js';
export function bFunc() { sharedFunc(); }

대규모 애플리케이션에서의 모듈 관리

대규모 프로젝트에서는 모듈 관리가 중요하다. 다음 방법을 활용한다:

• 기능별 그룹화: 관련 모듈을 디렉토리로 묶는다.
• 패키지 매니저 사용: npm이나 yarn으로 외부 의존성을 관리한다.
• 번들러 활용: Webpack, Rollup으로 모듈을 통합한다.

디렉토리 구조 예시:

/src
  /utils
    string.js
    math.js
  /components
    header.js
    footer.js
  index.js

Webpack 설정 예시:

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    }
};

심화: 동적 모듈 로딩

ES6에서는 import()를 통해 모듈을 동적으로 로드한다. 필요할 때만 로드하여 성능을 최적화한다.

// dynamic.js
export function heavyTask() {
    console.log('Heavy task running');
}

// app.js
<button id="loadBtn">Load Modulebutton>
<script>
    document.getElementById('loadBtn').addEventListener('click', async () => {
        const { heavyTask } = await import('./dynamic.js');
        heavyTask();
    });
script>

심화: 모듈 패턴과 클로저

모듈 패턴은 즉시 실행 함수(IIFE)와 클로저를 활용한다. 비공개 변수를 관리할 수 있다.

const counterModule = (function() {
    let count = 0;
    return {
        increment: function() { count++; return count; },
        getCount: function() { return count; }
    };
})();

console.log(counterModule.increment()); // 1
console.log(counterModule.getCount());  // 1

심화: 타입스크립트와 모듈

타입스크립트는 모듈에 타입을 추가하여 안정성을 높인다.

// user.ts
interface User {
    id: number;
    name: string;
}

export function createUser(id: number, name: string): User {
    return { id, name };
}

// app.ts
import { createUser } from './user';
const user = createUser(1, 'Alice');
console.log(user); // { id: 1, name: 'Alice' }

성능 최적화와 모듈화

모듈화는 성능에도 영향을 미친다:

• 지연 로딩: 동적 임포트를 사용한다.
• 트리 쉐이킹: 사용하지 않는 코드를 제거한다.

트리 쉐이킹 예시:

// utils.js
export function used() { console.log('Used'); }
export function unused() { console.log('Unused'); }

// app.js
import { used } from './utils.js';
used(); // unused는 번들에서 제외됨

마무리

모듈화 설계는 자바스크립트에서 코드의 질을 높이고 복잡성을 관리하는 필수 요소이다. ES6 모듈, CommonJS, AMD 등 다양한 시스템을 상황에 맞게 활용한다. 동적 로딩, 타입스크립트, 번들러 등을 조합하면 대규모 애플리케이션에서도 효율적으로 모듈을 관리할 수 있다. 모듈화를 통해 코드의 가독성과 재사용성을 극대화한다.