Articles
JavaScript 소개
JavaScript의 모듈

JavaScript의 모듈

이 글은 JavaScript의 모듈에 대해 설명합니다.

YouTube Video

JavaScript의 모듈

JavaScript의 모듈은 코드를 정리하고 재사용 가능한 컴포넌트로 나누는 방법입니다. 모듈을 사용하면 코드의 가독성과 유지보수성이 향상되며, 동일한 기능을 다른 프로젝트에서 재사용할 수 있습니다. 여기에서는 모듈의 개념부터 구체적인 사용 예까지 다양한 모듈 시스템에 대해 설명합니다.

JavaScript 모듈의 개념

JavaScript에는 원래 모듈 시스템이 없었습니다. 그러나 애플리케이션이 커지면서 코드를 재사용하기 위해 더 작은 단위로 나누는 모듈화가 중요해졌습니다. 모듈은 다른 코드와 독립적으로 관리될 수 있는 특정 기능을 가진 코드 조각으로, 여러 파일로 나눌 수 있습니다.

주요 모듈 유형

JavaScript에는 여러 가지 모듈 시스템이 있습니다. 가장 일반적인 것은 ES 모듈(ESM)과 CommonJS입니다.

  • ES Modules는 ECMAScript 2015(ES6)에서 도입된 모듈 시스템으로, import와 export 키워드를 사용하여 모듈을 정의합니다. 이 시스템은 클라이언트 측(브라우저)과 서버 측(Node.js) 모두에서 널리 사용됩니다.

  • CommonJS는 주로 Node.js에서 사용되는 모듈 시스템입니다. 모듈은 require와 module.exports를 사용하여 파일을 가져오고 내보내는 방식으로 정의됩니다.

ES 모듈(ESM)의 세부 내용

ES 모듈은 JavaScript의 표준 모듈 시스템으로, 모듈 간 기능을 쉽게 교환할 수 있도록 합니다. 브라우저와 Node.js에서 이 시스템은 모듈을 정의하고 가져오는 데 사용됩니다.

export와 import

export는 모듈의 기능을 외부에 노출하는 키워드입니다. import는 다른 모듈에서 정의된 기능을 가져오는 데 사용됩니다.

예제: 모듈 내보내기

ES Modules에서 모듈은 다음과 같이 내보낼 수 있습니다.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

이 math.mjs 모듈에서는 add와 subtract 함수가 내보내집니다. 이 함수들은 다른 모듈에서 가져올 수 있습니다.

여기서 .mjs는 ES Modules 형식의 자바스크립트 파일임을 명확하게 나타내는 확장자입니다. Node.js에서는 파일 확장자로 CommonJS인지 ES Modules인지 구분합니다. 하지만 package.json에 type: "module"이 지정되어 있으면 .js 확장자를 가진 파일도 기본적으로 ES Modules로 처리됩니다.

예제: 모듈 가져오기

ES Modules에서 모듈은 다음과 같이 가져올 수 있습니다.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

이와 같이 import를 사용하여 다른 파일에 정의된 함수를 쉽게 활용할 수 있습니다.

기본 내보내기와 이름 내보내기

모듈을 내보내는 방법에는 두 가지가 있습니다. 하나는 이름 내보내기이고, 다른 하나는 기본 내보내기입니다.

  • 이름 내보내기는 모듈에서 여러 함수나 변수를 내보낼 때 사용됩니다. 여러 개를 내보낼 수 있으며, 가져올 때 지정된 이름으로 받을 수 있습니다.
1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}
1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15
  • 기본 내보내기는 모듈에서 하나의 함수나 클래스를 내보낼 때 사용됩니다. 가져올 때는 임의의 이름으로 받을 수 있습니다.
1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}
1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

기본 내보내기는 하나만 가능하지만, 이름 내보내기는 여러 요소를 동시에 내보낼 수 있습니다.

클라이언트 사이드(브라우저)에서의 사용 예시입니다.

예제: 모듈 내보내기

ES Modules에서 모듈은 다음과 같이 내보낼 수 있습니다.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

이 utils.js 모듈에서는 sum과 multiply 함수가 내보내집니다.

예제: 모듈 가져오기

클라이언트 사이드에서 모듈은 다음과 같이 가져올 수 있습니다.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>
  • <script> 태그의 type 속성을 module로 설정하면, HTML 내에서 import와 export와 같은 ES 모듈 문법을 사용할 수 있습니다..
  • import 구문은 외부 utils.js를 불러와 결과를 표시합니다.

CommonJS의 세부 사항

CommonJS는 주로 Node.js에서 사용되는 모듈 시스템입니다. 모듈은 module.exports와 require를 사용하여 내보내고 가져옵니다.

require와 module.exports

CommonJS에서는 module.exports를 사용하여 모듈을 내보냅니다. 또한, require는 다른 파일에서 모듈을 활용하는 데 사용됩니다.

예제: 모듈 내보내기

CommonJS에서 모듈은 다음과 같이 내보낼 수 있습니다.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};
예제: 모듈 가져오기

CommonJS에서 모듈은 다음과 같이 가져올 수 있습니다.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

Node.js에서는 CommonJS가 기본 모듈 시스템으로 사용되지만, ES 모듈도 지원됩니다.

동적 가져오기

JavaScript에서는 import()를 사용하여 동적으로 모듈을 가져올 수 있습니다. 이 방법은 비동기 처리를 활용하여 필요한 경우 모듈을 로드합니다.

동적 임포트는 다음과 같이 할 수 있습니다.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

동적 가져오기는 애플리케이션 성능을 향상시키는 방법 중 하나입니다. 초기 로드시 모든 모듈을 로드하는 대신 필요한 경우에만 로드할 수 있어 페이지 표시 속도를 개선합니다.

모듈의 장점

  • 코드 재사용성

    • 모듈화된 코드는 다른 프로젝트에서도 재사용할 수 있습니다. 공통적으로 사용되는 기능을 모듈로 만들어 여러 애플리케이션에서 사용하면 개발 효율성이 크게 향상됩니다.

  • 유지보수성 향상

    • 코드를 모듈로 분리하면 특정 기능이나 부분을 더 쉽게 수정할 수 있습니다. 코드를 작은 단위로 관리하면 버그를 찾고 수정하는 것이 더 쉬워집니다.

  • 네임스페이스 충돌 방지

    • 글로벌 범위에 많은 변수와 함수를 정의하면 이름 충돌이 발생할 수 있지만, 모듈화를 통해 이를 방지하고 더 깔끔한 코드베이스를 유지할 수 있습니다.

  • 의존성 관리

    • 모듈을 사용하면 애플리케이션의 의존성을 명확하게 관리할 수 있습니다. 어떤 모듈이 다른 모듈에 의존하는지 명확해지며 코드 구조를 더 쉽게 이해할 수 있습니다.

요약

JavaScript의 모듈 시스템은 코드를 정리하고 재사용 가능한 구성 요소로 나누는 강력한 도구입니다. ES 모듈과 CommonJS의 차이를 이해하고 프로젝트에 적합한 모듈 시스템을 선택함으로써 코드 가독성과 유지보수성을 개선할 수 있습니다. 또한, 동적 임포트를 활용하여 애플리케이션 성능을 최적화할 수 있습니다.

모듈 시스템을 활용하여 더 확장 가능하고 효율적인 JavaScript 애플리케이션을 만들어봅시다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

자바스크립트 클래스의 추가 기능자바스크립트의 오류 처리