[JavaScript 문법] 14일차: 모듈

모듈이란?

모듈은 코드의 일부를 독립적으로 분리하여 재사용 가능하게 만드는 방법입니다. 모듈을 사용하면 코드의 유지보수와 관리가 용이해집니다. ES6에서는 import와 export 키워드를 사용하여 모듈을 정의하고 사용할 수 있습니다.

모듈 정의

모듈은 파일 단위로 정의되며, export 키워드를 사용하여 모듈 외부로 내보낼 수 있습니다.

기본 내보내기 (default export)

기본 내보내기는 모듈 당 하나만 가질 수 있으며, export default 키워드를 사용합니다.

예제: math.js

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

예제: main.js

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

console.log(add(2, 3)); // 5

명명된 내보내기 (named export)

명명된 내보내기는 여러 개를 가질 수 있으며, export 키워드를 사용합니다.

 

예제: math.js

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

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

예제: main.js

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

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2

모든 내보내기 가져오기

import * as 구문을 사용하여 모든 명명된 내보내기를 한 번에 가져올 수 있습니다.

예제: main.js

// main.js
import * as math from './math.js';

console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

모듈 재내보내기

모듈을 재내보내기 위해 export * from 구문을 사용할 수 있습니다. 이를 통해 다른 모듈의 모든 내보내기를 다시 내보낼 수 있습니다.

 

예제: utils.js

// utils.js
export * from './math.js';

예제: main.js

// main.js
import { add, subtract } from './utils.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2

모듈의 상수와 객체 내보내기

상수와 객체도 모듈에서 내보낼 수 있습니다.

 

예제: constants.js

// constants.js
export const PI = 3.14159;

export const settings = {
  theme: 'dark',
  language: 'en'
};

예제: main.js

// main.js
import { PI, settings } from './constants.js';

console.log(PI); // 3.14159
console.log(settings.theme); // 'dark'
console.log(settings.language); // 'en'

모듈의 활용 예제

모듈을 사용하여 코드를 구조화하고, 서로 다른 기능을 가진 모듈을 분리하여 유지보수성과 재사용성을 높일 수 있습니다.

 

예제: utils/math.js

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

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

예제: utils/string.js

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

export function reverse(str) {
  return str.split('').reverse().join('');
}

예제: main.js

// main.js
import { add, subtract } from './utils/math.js';
import { capitalize, reverse } from './utils/string.js';

console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
console.log(capitalize('hello')); // 'Hello'
console.log(reverse('hello')); // 'olleh'

모듈 번들링

실제 프로젝트에서는 여러 모듈을 하나의 파일로 번들링하여 성능을 최적화할 수 있습니다. Webpack, Rollup, Parcel 등의 도구를 사용하여 모듈을 번들링할 수 있습니다.

Webpack 설정 예제

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

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

결론

모듈은 코드의 재사용성과 유지보수성을 높이는 데 중요한 역할을 합니다. 이번 글에서는 모듈의 기본 개념, 기본 내보내기와 명명된 내보내기, 모든 내보내기 가져오기, 모듈 재내보내기, 상수와 객체 내보내기, 모듈의 활용 예제, 그리고 모듈 번들링에 대해 배웠습니다. 다음 글에서는 this 키워드 이해하기에 대해 알아보겠습니다.

다음 글에서 만나요!