자바스크립트의 모듈 시스템

Module

Module
기능을 가진, 분리된 각각의 파일

재사용할 코드를 모듈로 만들어서 관리하는 것이 좋다.

Module System
모듈에서 특정 부분을 내보내거나 가져다 쓸 수 있도록 구현된 시스템

모듈 시스템의 종류

자바스크립트와 함께 사용할 수 있는 다양한 모듈 시스템이 있다.

AMD

• Asynchronous Module Definition 비동기적 모듈 선언

• AMD API 명세를 구현한 스크립트 중 가장 유명한 것은 RequireJS (define 사용)

• Front End 용으로 사용

• 이름 그대로 모듈을 비동기적으로 불러옴

CJS

• CommonJS

• Node.js 의 모듈시스템으로 채택

• Back End 용으로 사용

UMD

• Universal Module Definition

• AMD, CJS 등 다양한 모듈시스템을 동작할 수 있게 만드는 디자인패턴 (모듈시스템이 아닌 디자인패턴)

ESM

• ECMAScript Module

• 표준 자바스크립트 모듈시스템

• ES6부터 적용됨

• Front End, Back End 모두 사용할 수 있도록 통일한 표준 모듈시스템 (CommonJS는 노드에서 채택했을 뿐 표준은 아니다)

CommonJS와 ESM의 차이

개인적으로 ESM이 더 편하지만 ES6 이전에서는 CommonJS를 사용해야 하므로 둘의 차이점을 잘 알아두는 것이 좋다.

CommonJS

⚡ 모듈 가져오기 - require

const { 가져올 것 } = require ( ' 파일 상대경로 ' ) ;

• 변수 가져오기

const { a, b } = require('./test');

• 함수 가져오기

const { test } = require('./test');

파일 경로 적을 때 js(파일확장자)는 빼도 된다.

⚡ 모듈 내보내기 - exports

module.exports = { 내보낼 변수, 함수, 템플렛 등의 이름 } ;

• 변수 내보내기

const a = 1;
const b = 2;

module.exports = {
    a,
    b
};

• 함수 내보내기

function test(){
    console.log("test");
}

module.exports = {test};

그 외 템플릿도 가능하고 다양하게 사용할 수 있는듯 하다.

ESM

⚡ 모듈 가져오기 - import

import React from 'react';

# import 자세한 사용법

⚡ 모듈 내보내기 - export

export class App { ... };
export const test = { ... };

# export 자세한 사용법

+ named export(유명 내보내기)와 default export(기본 내보내기)

export 할 때 위와 같이 이름만 작성하면 named export 이며, 아래와 같이 default 를 붙이면 default export 이다.

export default class App {
  // ...
}

default export는 import 하는 파일에서 원하는 이름으로 지어서 쓸 수 있다.
named export는 export할 때 정해진 이름을 사용해야 한다.