10장-모듈형-자바스크립트-디자인-패턴

모듈형이란 서로 의존성이 낮은 기능들이 모듈로써 저장된 형태를 나타냅니다. 느슨한 결합은 의존성을 제거하여 유지보수를 용이하게 만들어줍니다.

10.1 스크립토 로더에 대한 참고사항

AMD와 CommonJS와 같은 모듈형 자바스크립트를 이해하기 위해서는 스크립트 로더에 대한 설명이 필수적입니다.

스크립트 로더를 사용해야 모듈형 자바스크립트를 구현할 수 있습니다.

10.2 AMD

AMD는 웹 브라우저에서 자바스크립트 모듈을 효율적으로 관리하기 위한 방법입니다.

비동기 로딩
- 페이지 로딩을 방해하지 않고 필요한 모듈을 나중에 불러올 수 있습니다
- 사용자가 실제로 필요로 할 때만 모듈을 로드할 수 있어 성능이 향상됩니다
모듈 정의 방법
define( "모듈이름", // 선택사항: 모듈의 고유 이름 ["의존성1", "의존성2"], // 선택사항: 이 모듈이 필요로 하는 다른 모듈들 function(의존성1, 의존성2) { // 실제 모듈 코드 // 여기에 모듈의 기능을 구현 return { // 외부에서 사용할 수 있는 기능들 }; } );
실제 사용 예시
// math.js define(["calculator"], function(calculator) { return { add: function(a, b) { return calculator.add(a, b); }, subtract: function(a, b) { return calculator.subtract(a, b); } }; });
장점
- 모듈 간의 의존성을 명확하게 표현할 수 있습니다
- 코드를 더 작은 단위로 나눌 수 있어 유지보수가 쉬워집니다
- 필요한 모듈만 로드할 수 있어 초기 로딩 시간을 줄일 수 있습니다
require 사용법
require(["math"], function(math) { console.log(math.add(5, 3)); // 8 });

이렇게 모듈화된 코드는 다음과 같은 특징을 가집니다.

더 체계적으로 관리할 수 있습니다
다른 개발자들과 협업하기 쉬워집니다
코드 재사용이 용이해집니다
테스트하기 쉬워집니다

10.3 CommonJS

CommonJS는 Node.js의 기본 모듈 시스템으로, 서버 사이드에서 주로 사용됩니다.

기본적인 모듈 내보내기/가져오기

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = {
    add,
    subtract
};

// main.js
const math = require('./math');
console.log(math.add(5, 3));      // 8
console.log(math.subtract(5, 3)); // 2

다양한 내보내기 방식

// 방법 1: 객체로 내보내기
module.exports = {
    name: 'math',
    version: '1.0.0',
    add: (a, b) => a + b
};

// 방법 2: 개별적으로 내보내기
exports.add = (a, b) => a + b;
exports.subtract = (a, b) => a - b;

// 방법 3: 클래스 내보내기
class Calculator {
    add(a, b) { return a + b; }
    subtract(a, b) { return a - b; }
}
module.exports = Calculator;

다양한 가져오기 방식

// 전체 모듈 가져오기
const math = require('./math');

// 구조 분해 할당으로 가져오기
const { add, subtract } = require('./math');

// 클래스 가져오기
const Calculator = require('./math');
const calc = new Calculator();

실제 프로젝트 예시

// db.js
const mysql = require('mysql');

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password'
});

module.exports = connection;

// userService.js
const db = require('./db');

class UserService {
    async getUser(id) {
        return new Promise((resolve, reject) => {
            db.query('SELECT * FROM users WHERE id = ?', [id], (err, results) => {
                if (err) reject(err);
                resolve(results[0]);
            });
        });
    }
}

module.exports = new UserService();

// app.js
const userService = require('./userService');

async function main() {
    try {
        const user = await userService.getUser(1);
        console.log(user);
    } catch (error) {
        console.error(error);
    }
}

CommonJS의 특징

동기적으로 모듈을 로드합니다
require()는 캐시되어 한 번만 실행됩니다
순환 참조를 지원합니다
Node.js 환경에서 기본적으로 지원됩니다

ES Modules와의 차이점

// CommonJS
const express = require('express');
module.exports = router;

// ES Modules
import express from 'express';
export default router;

CommonJS는 여전히 Node.js 생태계에서 널리 사용되고 있습니다.

하지만 최신 프로젝트에서는 점점 ES Modules로 전환되는 추세입니다.

Last modified: 03 April 2025