[Js] 모듈 내보내기/불러오기

ES6 이전

이전에는 require를 통해 모듈을 불러왔다.

예를 들어 fs 모듈을 불러오는 방식은 아래와 같았다.

const fs = require('fs');

// fs 사용

내가 직접 만든 모듈도 같은 방식이었다.
module.js는 아래와 같다.

exports.add = function (a, b) {
  return a + b;
}

exports.sub = function (a, b) {
  return a + b;
}

exports.mul = function (a, b) {
  return a * b;
}

exports.div = function (a, b) {
  return a / b;
}

이 module.js는 간단한 사칙연산을 하는 모듈이며 이 모듈을 사용하는 방법은 require를 통해서 불러와 사용할 수 있다.

const calc = require('./module');

console.log(calc.add(1, 2)); // 3
console.log(calc.sub(1, 2)); // -1
console.log(calc.mul(1, 2)); // 2
console.log(calc.div(1, 2)); // 0.5

위와 같이 calc라는 객체에 add,sub,mul,div가 모두 포함된 것을 알 수 있다.

index.js를 아래와 같이 require한 후 바로 비구조화 할당을 통해 사용할 수 도 있다.

const { add } = require('./module');

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

위의 module.js의 exports을 module.exports로 바꿀 수 있다.

const add = function (a, b) {
  return a + b;
}

const sub = function (a, b) {
  return a + b;
}

const mul = function (a, b) {
  return a * b;
}

const div = function (a, b) {
  return a / b;
}

module.exports = {
  add,
  sub,
  mul,
  div,
}

module.exports는 하나만 내보낼 수 있다. 고로 exports로 내보낸 것들을 객체에 묶어서 한번에 내보내는 것이다.

이것을 더 잘게 쪼개는 방법은 각각의 함수를 module.exports로 따로 쪼개는 것이다.

add.js를 만들어 오직 더하는 파일만을 만든다.

module.exports = function (a, b) {
  return a + b;
}

이후 index.js에서 아래와 같이 add.js를 불러서 바로 사용할 수 도 있다.

const add = require('./add');

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

ES6

ES6에서는 모듈을 내보내고 불러오는것이 모두 바뀌었다. import와 export default, export라는 키워드들을 사용한다.

ES6문법을 사용하기 위해서는 간단한 설정이 필요하다고 한다.

$ npm init
$ yarn init

npm 혹은 yarn으로 프로젝트 초기화를 해준다. 나는 yarn을 사용하기에 자신이 선호하는 패키지 매니저를 사용하면 된다.

babel-cli, babel-preset-env를 추가해주었다.

$ yarn add babel-cli babel-preset-env 

그리고는 root폴더 안에 .babelrc파일을 만들고 안에 아래의 소스를 넣어주었다.

{
  "presets": [
    "env"
  ]
}

그리고 실행 할때 일반 node가 아닌 babel-node로 실행하면 된다.
할때마다 치는게 불편한 사람은 package.json의 실행 명령을 만들어 주면 된다.

"scripts": {
    "start": "babel-node index.js"
  }

위와 같이 시작 옵션을 주면 된다.

이렇게 설정을 마치고 나면 import/export 문법을 사용할 수 있다.

아까 사칙연산 코드를 예시로 들자면 아래와 같이 바꿀 수 있다.

index.js에서 import를 통해 모듈을 불러온다.

import * as calc from './module';

console.log(calc.add(1, 2)); // 3
console.log(calc.sub(1, 2)); // -1
console.log(calc.mul(1, 2)); // 2
console.log(calc.div(1, 2)); // 0.5

moduel.js는 아래와 같은 방식으로 내보낼 수 있다.

export const add = function (a, b) {
  return a + b;
}

export const sub = function (a, b) {
  return a + b;
}

export const mul = function (a, b) {
  return a * b;
}

export const div = function (a, b) {
  return a / b;
}

그럼 index.js에서 * as를 사용하지 않으면 어떻게 될까?

import calc from './module'은 당연하게도 안된다.
위와 같이 사용하려면 단 하나만 내보내져야 되기 때문이다.

module.js에서 export default를 통해 module.exports를 대신 할 수 있다.

export default function (a, b) {
  return a + b;
}

위와 같이 내보낼 경우 단 하나만 내보내 지기 때문에 아래와 같이 불러올 수 있다.

import add from './module';

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

그럼 add만이 아닌 모두를 import calc from './module'로 러 오고 싶다면 어떻게 해야 될까?

아래와 같이 각각의 함수들을 하나로 내보내면 된다.

const add = function (a, b) {
  return a + b;
}

const sub = function (a, b) {
  return a + b;
}

const mul = function (a, b) {
  return a * b;
}

const div = function (a, b) {
  return a / b;
}

export default {
  add,
  sub,
  mul,
  div
}

그리고는 index.js에서 하나의 객체를 받아와서 사용 할 수 있다.

import calc from './module';

console.log(add(1, 2)); // 3
console.log(sub(1, 2)); // -1
console.log(mul(1, 2)); // 2
console.log(div(1, 2)); // 0.5

위와 같은 동작을 하는 코드는 아래와 같다.

import * as calc from './module';

console.log(calc.default.add(1, 2));
console.log(calc.default.sub(1, 2));
console.log(calc.default.mul(1, 2));
console.log(calc.default.div(1, 2));

이번 글에서는 항상 require만 쓰던 내가 문법이 헷갈려서 써보았다. 아직 외부 모듈을 import를 사용할지 import *을 사용할지 잘 모르겠다. 모듈의 내부의 구조를 통해서 사용하는지 잘 모르겠지만 내가 만든 모듈들을 불러오고 사용하는 것은 정리 된것 같다.