25. JavaScript 모듈 이해하기: 개념, 사용법 | 웹 개발 기초

입체파 스타일, dall-e

 

완벽 가이드: JavaScript 모듈 사용법과 모범 사례

JavaScript 모듈의 기본 개념부터 고급 사용법까지, 모듈을 활용한 성능 최적화와 실제 프로젝트 사례를 통해 JavaScript 개발의 효율성을 높이는 방법을 알아보세요.

 

01. JavaScript 모듈의 기본 개념

1) 모듈의 개념과 역사

JavaScript 모듈은 코드를 작은 단위로 분리하여 재사용성을 높이고 유지보수성을 향상시키는 방법입니다. 모듈은 하나의 독립된 파일로, 각각의 모듈은 특정 기능을 캡슐화하여 외부에 노출하지 않고, 필요한 부분만 공개합니다. 이렇게 하면 코드의 중복을 줄이고, 코드베이스를 관리하기 쉬워집니다.

 

JavaScript 모듈의 역사는 브라우저 환경과 서버 환경에서 각각 다르게 발전해 왔습니다. 초기에는 브라우저에서 모듈 시스템이 표준화되지 않았기 때문에, 개발자들은 다양한 라이브러리와 도구를 사용하여 모듈화를 구현했습니다. 대표적인 예로, AMD(Asynchronous Module Definition)와 CommonJS가 있습니다.

 

Node.js는 CommonJS 모듈 시스템을 채택하여, 서버 사이드 JavaScript 환경에서 모듈 사용을 표준화했습니다. CommonJS는 `require`와 `module.exports` 구문을 사용하여 모듈을 가져오고 내보내는 방식입니다.

 

ES6(ECMAScript 2015)에서 공식적으로 모듈 시스템이 표준화되면서, 브라우저에서도 `import`와 `export` 구문을 사용하여 모듈을 사용할 수 있게 되었습니다. 이는 JavaScript 개발자들이 서버와 클라이언트 모두에서 일관된 방식으로 모듈을 사용하게 해주었습니다.

2) Node.js와 브라우저에서의 모듈 사용

Node.js와 브라우저에서 JavaScript 모듈을 사용하는 방법은 약간 다릅니다. 각각의 환경에서 모듈을 사용하는 방법을 살펴보겠습니다.

Node.js에서의 모듈 사용

Node.js에서는 CommonJS 모듈 시스템을 사용합니다. 모듈을 가져오기 위해 `require` 구문을 사용하고, 모듈을 내보내기 위해 `module.exports`를 사용합니다.

// math.js (모듈 파일)
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = {
    add,
    subtract
};

// app.js (모듈을 사용하는 파일)
const math = require('./math');

console.log(math.add(5, 3));       // 출력: 8
console.log(math.subtract(5, 3));  // 출력: 2
            

브라우저에서의 모듈 사용

브라우저에서는 ES6 모듈 시스템을 사용합니다. 모듈을 가져오기 위해 `import` 구문을 사용하고, 모듈을 내보내기 위해 `export` 구문을 사용합니다.

// math.js (모듈 파일)
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// app.js (모듈을 사용하는 파일)
import { add, subtract } from './math.js';

console.log(add(5, 3));       // 출력: 8
console.log(subtract(5, 3));  // 출력: 2
            

이렇게 Node.js와 브라우저 모두에서 모듈을 사용하여 코드를 재사용하고, 코드베이스를 효율적으로 관리할 수 있습니다.

 

02. 모듈의 구성 요소

1) import와 export 구문 설명

export 구문

`export` 구문은 모듈 내부에서 외부로 내보낼 기능이나 객체를 지정합니다. `export`에는 named exports와 default export 두 가지 방식이 있습니다.

Named Exports

여러 개의 값을 내보낼 수 있습니다. 각 값을 내보낼 때 `export` 키워드를 사용합니다.

// utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

export const pi = 3.14159;
            

Default Export

모듈에서 하나의 값만을 기본값으로 내보낼 수 있습니다. `export default` 키워드를 사용합니다.

// math.js
export default function add(a, b) {
    return a + b;
}
            

import 구문

`import` 구문은 다른 모듈에서 내보낸 값을 가져올 때 사용합니다.

Named Imports

중괄호 `{}` 안에 필요한 값을 지정하여 가져옵니다.

// app.js
import { greet, pi } from './utils.js';

console.log(greet('Alice'));  // 출력: Hello, Alice!
console.log(pi);              // 출력: 3.14159
            

Default Import

모듈의 기본값을 가져올 때 사용합니다.

// app.js
import add from './math.js';

console.log(add(5, 3));  // 출력: 8
            

2) 기본 예제

다음은 `export`와 `import`를 사용한 간단한 예제입니다.

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

export function subtract(a, b) {
    return a - b;
}

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

// app.js
import multiply, { add, subtract } from './math.js';

console.log(add(5, 3));        // 출력: 8
console.log(subtract(5, 3));   // 출력: 2
console.log(multiply(5, 3));   // 출력: 15
            

이렇게 모듈을 사용하면 코드의 재사용성을 높이고, 각 기능을 독립적으로 관리할 수 있어 코드베이스의 유지보수성을 크게 향상시킬 수 있습니다.

 

03. 고급 모듈 사용법

1) 동적 모듈 로딩

동적 모듈 로딩은 코드 실행 시점에 필요한 모듈을 동적으로 불러오는 방법입니다. 이는 초기 로딩 시간을 줄이고, 특정 상황에서만 필요한 모듈을 불러와 성능을 최적화할 수 있습니다. JavaScript에서는 `import()` 함수를 사용하여 동적으로 모듈을 로딩할 수 있습니다.

// app.js
async function loadModule() {
    try {
        const { add } = await import('./math.js');
        console.log(add(5, 3));  // 출력: 8
    } catch (error) {
        console.error('Failed to load module', error);
    }
}

loadModule();
            

`import()` 함수는 프로미스를 반환하므로, `async`/`await` 구문을 사용하여 비동기적으로 모듈을 로딩할 수 있습니다. 이는 특정 조건이 만족되었을 때만 모듈을 로딩하거나, 사용자 인터랙션에 따라 모듈을 로딩하는 데 유용합니다.

2) 모듈 집계

모듈 집계(모듈 재수출)는 여러 모듈에서 내보낸 기능을 하나의 모듈에서 다시 내보내어, 여러 모듈을 한 번에 가져올 수 있게 하는 방법입니다. 이를 통해 코드의 가독성을 높이고, 모듈 관리를 용이하게 할 수 있습니다.

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

export function subtract(a, b) {
    return a - b;
}

// string.js
export function toUpperCase(str) {
    return str.toUpperCase();
}

export function toLowerCase(str) {
    return str.toLowerCase();
}

// index.js (모듈 집계)
export * from './math.js';
export * from './string.js';

// app.js
import { add, subtract, toUpperCase, toLowerCase } from './index.js';

console.log(add(5, 3));                // 출력: 8
console.log(toUpperCase('hello'));    // 출력: HELLO
            

위 예시에서 `index.js` 파일은 `math.js`와 `string.js`에서 내보낸 모든 기능을 다시 내보내어, `app.js`에서는 하나의 파일에서 모든 기능을 가져올 수 있게 합니다.

3) top-level await의 사용

`top-level await`은 모듈의 최상위 레벨에서 `await` 키워드를 사용할 수 있게 하는 기능입니다. 이를 통해 모듈 로딩 시 비동기 작업을 간단하게 처리할 수 있습니다.

// data.js
export const data = await fetchData();

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    return response.json();
}

// app.js
import { data } from './data.js';

console.log(data);  // 비동기로 가져온 데이터 출력
            

`top-level await`을 사용하면 모듈 내부에서 비동기 작업을 간단하게 처리할 수 있어, 복잡한 비동기 코드 작성이 필요 없습니다.

 

04. 모듈과 클래스

1) 클래스와 모듈의 통합

JavaScript 모듈은 클래스를 정의하고 내보내는 데도 유용합니다. 이를 통해 객체 지향 프로그래밍 패러다임을 따르면서 모듈화를 구현할 수 있습니다. 모듈을 사용하여 클래스를 내보내면, 다른 모듈에서 해당 클래스를 쉽게 가져와 사용할 수 있습니다.

// person.js
export class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}
            

2) 클래스 예제

클래스를 모듈과 함께 사용하는 예제는 다음과 같습니다.

// person.js
export class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}
            

// app.js
import { Person } from './person.js';

const john = new Person('John', 30);
console.log(john.greet());  // 출력: Hello, my name is John and I am 30 years old.

const jane = new Person('Jane', 25);
console.log(jane.greet());  // 출력: Hello, my name is Jane and I am 25 years old.
            

이 예제에서 `person.js` 파일은 `Person` 클래스를 정의하고 내보냅니다. `app.js` 파일은 이 클래스를 가져와 인스턴스를 생성하고, 클래스를 사용하여 다양한 객체를 만들 수 있습니다. 이를 통해 클래스와 모듈을 결합하여 객체 지향적인 코드를 작성할 수 있습니다.

 

이렇게 JavaScript 모듈과 클래스를 사용하면 코드의 구조를 체계적으로 관리하고, 재사용성과 유지보수성을 높일 수 있습니다.

 

05. 프로젝트에서의 모듈 활용 사례

1) 실제 프로젝트에서 모듈 활용 방법

JavaScript 모듈을 실제 프로젝트에서 효과적으로 활용하면 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다. 다음은 다양한 실제 프로젝트에서 모듈을 활용하는 방법입니다.

A. 기능별 모듈화

프로젝트의 기능을 기준으로 모듈을 나누는 방법입니다. 예를 들어, 사용자 인증, 데이터 처리, UI 구성 요소 등을 각각 별도의 모듈로 관리할 수 있습니다.

// auth.js (인증 관련 모듈)
export function login(username, password) {
    // 로그인 로직
}

export function logout() {
    // 로그아웃 로직
}

// data.js (데이터 처리 관련 모듈)
export function fetchData(apiEndpoint) {
    return fetch(apiEndpoint).then(response => response.json());
}

// ui.js (UI 구성 요소 관련 모듈)
export function createButton(label) {
    const button = document.createElement('button');
    button.textContent = label;
    return button;
}
            

이렇게 기능별로 모듈을 나누면, 각 모듈이 독립적으로 작동하여 코드의 재사용성이 높아지고, 필요에 따라 모듈을 쉽게 교체하거나 확장할 수 있습니다.

B. 레이어별 모듈화

애플리케이션을 여러 레이어로 분리하여 모듈화하는 방법입니다. 예를 들어, 데이터 액세스 레이어, 비즈니스 로직 레이어, 프레젠테이션 레이어 등을 별도의 모듈로 관리할 수 있습니다.

// dataAccess.js (데이터 액세스 레이어)
export function getUserData(userId) {
    return fetch(`/api/users/${userId}`).then(response => response.json());
}

// businessLogic.js (비즈니스 로직 레이어)
import { getUserData } from './dataAccess.js';

export async function getUserProfile(userId) {
    const userData = await getUserData(userId);
    // 비즈니스 로직 처리
    return userData;
}

// presentation.js (프레젠테이션 레이어)
import { getUserProfile } from './businessLogic.js';

export async function displayUserProfile(userId) {
    const userProfile = await getUserProfile(userId);
    // UI 업데이트 로직
    document.getElementById('profile').textContent = JSON.stringify(userProfile);
}
            

레이어별로 모듈을 나누면 각 레이어가 독립적으로 변경될 수 있어, 코드 변경이 다른 부분에 미치는 영향을 최소화할 수 있습니다.

2) 성능 최적화와 모듈 사용

모듈을 사용하면 성능 최적화에도 큰 도움이 됩니다. 다음은 모듈을 사용하여 성능을 최적화하는 방법입니다.

A. 코드 스플리팅(Code Splitting)

코드 스플리팅은 애플리케이션을 여러 개의 작은 번들로 나누어, 필요한 시점에만 로드되도록 하는 기술입니다. 이를 통해 초기 로딩 시간을 줄이고, 애플리케이션의 반응 속도를 향상시킬 수 있습니다.

// main.js
import('./auth.js').then(auth => {
    auth.login('username', 'password');
});
            

위 예시에서 `auth.js` 모듈은 `main.js`가 실행된 후에 동적으로 로드됩니다. 이를 통해 초기 로딩 시간을 줄이고, 필요할 때만 모듈을 로드할 수 있습니다.

B. 트리 셰이킹(Tree Shaking)

트리 셰이킹은 사용되지 않는 코드를 제거하여 번들 크기를 줄이는 기술입니다. 모듈 시스템을 사용하면, 번들러가 어떤 코드가 사용되지 않는지 쉽게 식별할 수 있어 불필요한 코드를 제거할 수 있습니다.

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

export function subtract(a, b) {
    return a - b;
}

// app.js
import { add } from './utils.js';

console.log(add(5, 3));  // subtract 함수는 사용되지 않으므로 제거됩니다.
            

번들러(예: Webpack, Rollup)는 `subtract` 함수가 사용되지 않는다는 것을 인식하고, 최종 번들에서 제거합니다. 이를 통해 번들 크기를 줄이고 로딩 시간을 단축할 수 있습니다.

C. 캐싱 전략

모듈화된 코드 구조는 캐싱 전략을 적용하는 데도 유리합니다. 변경되지 않는 모듈은 캐시에 저장하여, 불필요한 네트워크 요청을 줄이고 로딩 속도를 향상시킬 수 있습니다.

// service-worker.js
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/main.js',
                '/auth.js',
                '/data.js',
            ]);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});
            

서비스 워커를 사용하여 모듈 파일을 캐시에 저장하면, 이후 요청 시 캐시에서 파일을 불러와 네트워크 부하를 줄일 수 있습니다.

 

이렇게 모듈을 활용하면 코드 구조를 체계적으로 관리하고, 성능 최적화와 유지보수성을 동시에 높일 수 있습니다. 실제 프로젝트에서 모듈을 효과적으로 활용하여, 더 나은 성능과 확장성을 가진 애플리케이션을 개발할 수 있습니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.06.26 - [Study] - 00. HTML 개요 및 기본 태그 학습: 웹 개발의 기초

00. HTML 개요 및 기본 태그 학습: 웹 개발의 기초

2024.07.01 - [Study] - 04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

2024.07.05 - [Study] - 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)