자바스크립트 모듈화

Module

module객체를 통해 각각의 기능이나 js파일들을 쉽게 모듈화가 가능하다.

export

코드를 외부에 내보내고 싶다면 export문을 사용한다. 함수, 변수, 클래스 등을 내보낼 수 있다.

//📁module/util.js
const constants = {
	message : 'simple message';
}

const requestUrl = '/xyz-url';

const private = {
	privateKey : '1234'
}

export {constants, requestUrl}; //배열로도 export가 가능하다. (1~2개 모듈은 보통 객체형식으로 많이 사용)

각각의 모듈 대상에 export 예약어를 붙여 내보낼 수도 있다.

export function constants = {
	message : 'simple message';
}

import

import를 통해 상대 경로에 위치한 모듈 파일을 가져올 수 있다.

//📁main.js
import * as util from './module/util.js'; //util.js에 export된 내용들을 util이라는 변수로 사용
import { constants } from './module/util.js'; //util.js에 export된 내용 중 constants만 사용

export default

export default를 사용하면 중괄호를 생략할 수 있다.
특히 클래스를 불러올 때 유용하게 사용된다.(보통 자바스크립트 파일 한개당 한개의 클래스만 작성하기 때문이다.)

export

//📁module/Calculator.js
//간단한 계산기 클래스
export default class Calculator {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  add() {
    return this.a + this.b;
  }
  //..code
}

import

import Calculator from './module/Calculator.js';
let cal = new Calculator(1, 2);
console.log(cal.add()); //3

Node에서의 모듈화

node.js에서는export 대신 module.exports import 대신 require을 사용해서 모듈을 불러올 수 있다.
주의사항은 단일 파일에서 module.exports는 한번만 수행할 수 있다.

//간단한 로그 찍어주는 함수 (📁modules/module.js)
function logger(type, message) {
  switch (type) {
    case 'log':
      console.log('[👻 LOGGER]' + message);
      break;
    case 'error':
      console.log('[⛔️ ERROR]' + message);
      break;
    case 'warn':
      console.log('[🚸 WARN]' + message);
      break;
    default:
      console.error('[⛔️ LOGGER] 지원하지 않는 타입');
      break;
  }
}
//상수 객체
const constants = {
  URL: '/xyz.com',
  FILEPATH: '/cloud.com'
};

//exports
module.exports = {
  logger,
  constants
};

//import예제 (간단한 로그 찍어주는 함수 (📁main.js)
const { logger, constants } = require('./module/module');

logger('log', 'LOGGING!!');
logger('warn', constants.FILEPATH);

예제
위에서 만들었던 계산기 클래스를 모듈화

//📁module/Calculator.js
//간단한 계산기 클래스
class Calculator {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  add() {
    return this.a + this.b;
  }
  //..code
}

module.exports = Calculator;

require

const Calculator = require('./module/Calculator');
let cal = new Calculator(1, 2);

console.log(cal.add());

import-export 사용

기존 import-export 문법도 사용 가능하다. 방법은 2가지 정도인데 파일 확장자를 mjs로 만들거나, node 프로젝트 생성 시 package.json에서 type을 module속성을 넣으면된다고 한다. 하지만 완전히 같은 문법은 아니기때문에 node에서 사용해왔던 exports-require를 사용하는것이 좋다.

브라우저에서의 모듈화

스크립트 type 속성에 module을 추가하면된다.

<script type="module" src="main.js"></script>

참고자료

- 자바스크립트 코딩의 기술 - 가져오기와 내보내기로 기능을 분리하라 (조 모건 저)
- Node.js 교과서 - 모듈만들기 (조현영 저)
- stackabuse - How to use module.exports in Node.js