JavaScript ES6 모듈

JavaScript

JavaScript ES6 모듈

kohi ☕ 2022. 10. 29. 16:09

🧐 모듈이란?

프로그래밍에서 모듈이란 프로그램을 구성하는 구성 요소의 일부이다.

프로그램의 크기가 커지면 확장성과 유지 보수 측면에서 파일을 여러 개로 분리하는 시점이 오는데, 이때 분리된 파일 각각을 ‘모듈’ 이라 부르고, 보통 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.

프로그램을 잘게 쪼개어 모듈화하는 이유는 다음과 같다.

프로그램의 효율적인 관리 및 성능 향상
전체적인 소프트웨어 이해의 용이성 증대 및 복잡성 감소
소프트웨어 디버깅, 테스트, 통합, 수정 시 용이
기능의 분리가 가능하고 인터페이스가 단순
오류의 파급 효과를 최소화
모듈 재사용으로 개발과 유지 보수 용이

🧐 모듈의 종류

자바스크립트는 CommonJS, AMD, UMD, ESM과 같은 모듈 시스템을 사용할 수 있는데, 각 모듈 시스템에는 다음과 같은 특징이 있다.

CommonJS
- 서버 사이드에서 사용하며, 동기적으로 작동
- require 문법 사용
AMD
- 서버 사이드와 클라이언트 사이드에서 사용할 수 있지만 클라이언트 사이드에서 주로 사용되며, 비동기적으로 작동
- define - require 문법 사용
UMD
- CommonJS와 AMD를 모두 사용하기 위한 구현 패턴
ESM
- 언어 자체에 표준으로 탑재된 모듈 시스템
- export - import 문법 사용

example CommonJS

math.js ⇒

exports function sum(a, b) { return a + b; }

app.js ⇒

const math = require("./math.js") 
math.sum(1, 2) // 3

exports 키워드로 모듈을 만들고 require() 함수로 불러들이는 방식이다. 모듈화는 아래와 같이 세 부분으로 이루어진다.

스코프(Scope): 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
정의(Definition): 모듈 정의는 exports 객체를 이용한다.
사용(Usage): 모듈 사용은 require 함수를 이용한다.

example AMD

html ⇒

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Document</title>
</head>
<body>
  <!-- data-main="require가 로드된 후 실행될 파일" src="requireJS에서 비동기로 사용할 파일" -->
  <script data-main="index.js" src="require.js"></script>
</body>
</html>

index.js ⇒

require.config({
  // 기본 경로
  baseUrl: '/',
  // 모듈에 해당하는 경로
  paths: {
    searchModule: 'searchModule',
    loaderModule: 'loaderModule',
}});

// 첫번째 인자에 해당하는 모듈이 로드되었을 경우 a로 받아서 getWord() 함수를 호출하는 콜백함수 실행
// 의존성 모듈을 지정해주는 것
require(['searchModule'], (searchModule) => {
	searchModule.getWord();
});

searchModule.js ⇒

define(() => {
  return {
  	getWord: () => 'word'
  }
});

example UMD

(function (root, factory) {

    // AMD
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);

    // CommonJS
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();

    // Browser
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();

}}(typeof self !== 'undefined' ? self : this, function () {
    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

🧐 ESM

ESM은 ES6부터 지원하고 있는 표준 모듈 시스템이다. ES6 이전까지는 브라우저 환경에서 사용할 수 있는 표준 모듈 시스템이 없었기 때문에, 필요한 파일을 만들어서 같이 배포하고, <script src=”script.js”>의 형태로 파일을 직접 불러오는 방법을 사용했다.

export

export는 기본적으로 named export와 default export의 두 가지 방식과 export와 from을 조합해서 사용하는 방식이 있다.

named export

named export는 선언된 변수명을 그대로 export하는 방식이다. named export는 모듈 내에 여러 개의 export가 존재할 수 있고, 변수를 선언함과 동시에 내보내기를 하거나, 먼저 정의된 변수를 모아서 내보내고, 먼저 정의된 함수를 별칭으로 바꿔서 내보낼 수도 있다.

export let name1;
export const name2;
export var name3;
export function name4 () {/*...*/}
export class MyClass {/*...*/}

const var1;
let var2;
var var3;
export { var1, var2, var3 }

let var4;
export { var4 as var5 }

default export

default export는 모듈에서 하나만 존재할 수 있고, named export와 같이 변수를 직접 내보낼 수는 없다. default export를 default export {const, let, var} 처럼 변수를 직접 내보내는 방식으로 사용하면 에러가 발생한다.

export default expression;
export default function () { /*...*/ }
export default function myFunction() { /*...*/ }
export default class { /*...*/ }
export default class MyClass { /*...*/ }
export default function* () { /*...*/ }

const myModule = { /*...*/ }
const var1 = () => {}
export { myModule as default, var1 }

export default function () { /*...*/ }
export default MyClass () { /*...*/ }
Uncaught SyntaxError: Identifier '*default*' has already been declared

export default를 두 번 사용하는 경우도 에러가 발생한다. default라는 식별자를 export 문이 내부적으로 사용하기 때문이다.

export from

export from은 import와 export를 한 번에 처리할 수 있는 문법이다. 주로 패키지의 다른 모듈들을 한 번에 모아서 일관된 형태로 내보내거나 관리하고 싶은 경우에 사용한다.

export from 구문을 사용하면 import와 export를 한 번에 처리할 수 있는 장점이 있지만, 다export-from을 처리하는 파일 스코프에서는 식별자가 바인딩되지 않기 때문에 메서드나 변수에 직접 접근하면 에러가 발생한다. 에러 발생 이유는 해당 메서드가 스코프 내에 존재하지 않기 때문.

다음과 같이 index.js math.js logger.js config.js 모듈을 포함하는 src/utils 패키지가 있다고 가정했을 때,

export function add (a, b) { /*...*/ }
export function subtract (a, b) { /*...*/ }
export function multiply (a, b) { /*...*/ }
export function divide (a, b) { /*...*/ }

export default {
  print() { /*...*/ }
}

export const DB_HOST = 'localhost';
export const DB_USER = 'scott';
export const DB_PASSWORD = 'tiger';

src/utils 패키지에 있는 src/utils/index.js에서는 export-from 문법을 다음처럼 활용할 수 있고, src/utils/index.js에서 export된 모듈은 src/index.js에서 import 명령어로 불러와서 사용할 수 있다.

// math 모듈에서 일부만 import 한 뒤 다시 export
export { add, subtract } from './math';
// config 모듈의 (export가 가능한) 모든 변수를 export
export * from './config';
// logger 모듈의 default export를 Logger라는 이름으로 export
export { default as Logger } from './logger';

// 디렉토리를 import하면 기본적으로 index.js 파일을 탐색함
import * as utils from './utils';
// utils라는 별칭으로 import한 메소드, 변수 사용
utils.add(1, 2) // 3
utils.DB_HOST // 'localhost'
utils.Logger.print('TEST') // 'TEST'

import

import는 다른 파일에서 모듈을 불러오는 명령어이다. as 명령어를 이용해서 별칭으로 불러오거나, *를 사용해서 named export의 모든 변수와 메서드를 불러올 수 있다.

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";

🧐 Module Type

🧐 Webpack

웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.

모듈 번들러는 다음과 같은 장점이 있다.

여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용 감소
최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환

웹팩은 entry로 설졍된 시작점에서 의존성을 가진 모든 파일을 압축하여 output 지점에 하나의 자바스크립트 파일을 만들어 준다. 이때, 자바스크립트가 아닌 파일은 loaders를 이용하여 자바스크립트에서 이용 가능한 모듈로 만들어 주며, plugins를 이용하여 번들된 자바스크립트를 난독화하거나 특정 텍스트를 추출하는 역할을 한다. mode는 웹팩의 사용 목적에 따라 설정을 지정하는 역할을 한다.

🧐 Reference

https://medium.com/@woody_dev/js-webpack-1-웹팩이란-무엇인가-f29ebca31da4

https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html

https://www.daleseo.com/js-module-import/

https://velog.io/@syoung125/개념공부-1.-Javascript

https://www.zerocho.com/category/JavaScript/post/5b67e7847bbbd3001b43fd73

https://www.youdad.kr/js-module-system/

https://okayoon.tistory.com/entry/아티클-프로젝트-059-모듈-시스템-CommonJS-AMD-UMD-ES6