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

자바스크립트를 서버에서 사용할 수 있는 큰 이유 중 하나가 모듈화가 가능하기 때문이다.

 

그리고 이런 자바스크립트의 모듈화 명세를 만든 대표적인 그룹 중 하나로 Common.js가 있고 Common.js의 명세가 현재 node의 표준이 되어있다.

 

node의 표준이 바로 require, module.exports()이다.

 

그런데 ES6로 넘어오면서 자바스크립트 자체에서 ES6 Module이라는 이름으로 모듈화를 지원하기 시작했고 그것이 import와 export이다.

 

 

1. Common.js 기반 모듈 내보내기/불러오기

  1-1. 복수 객체 내보내기/불러오기

  : 복수 객체를 내보낼 경우에는 exports 변수의 속성으로 할당한다.

  : 모듈을 가져올 때는 require()을 사용한다.

 

//index.js
const calc = require("./calc");
console.log(calc.add(1,2)); //3
console.log(calc.sub(2,1)); //1

//calc.js
const add = (a,b) => a+b;
const sub = (a,b) => a-b;

exports.add = add;
exports.sub = sub;

 

  1-2. 단일 객체 내보내기/불러오기

  : 단일 객체만을 내보낼 경우에는 module.exports 변수 자체에 할당한다.  : 모듈을 가져올 때는 require()을 사용한다.

 

//index.js
const calc = require("./calc"); //calc.js에서 내보낸 객체를 require 키워드를 통해 변수에 할당
console.log(calc.add(1,2)); //3
console.log(calc.sub(2,1)); //1

//calc.js
const obj = {}; //내보낼 객체
obj.add = (a,b) => a+b;
obj.sub = (a,b) => a-b;
module.exports = obj; //내보낼 객체인 obj를 module.exports 변수에 할당

 

 

2. ES6 기반 모듈 내보내기/불러오기

  2-1. 복수 객체 내보내기/불러오기

  : 복수 객체를 내보낼 경우에는 export 키워드를 사용해 명시적으로 선언해 준다.

  : 모듈을 가져올 때는 import 키워드를 사용한다.

 

//index.js
import * as calc from "./calc.js"; //복수 객체를 하나의 별칭으로 지정해 접근 가능
import { sub } from "./calc.js"; //필요한 객체만 선택하여 사용 가능

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

//calc.js
export const add = (a,b) => a+b; //선언과 동시에 내보낼 수 있다

const sub = (a,b) => a-b;
export {sub}; //선언 후 별도로 내보낼 수도 있다

  * import시 반드시 확장자를 포함하여 경로를 명시해줘야 한다.

   그렇지 않으면 "ERR_MODULE_NOT_FOUND" 에러가 발생한다.

 

 

  2-2. 단일 객체 내보내기/불러오기

  : 단일 객체를 내보낼 경우에는 export default 키워드를 사용해 명시적으로 선언해 준다.

  : 모듈을 가져올 때는 import 키워드를 사용한다.

//index.js
import calc from "./calc.js"; //하나의 객체만 불러오기 때문에 아무 이름이나 지정해주고 해당 객체를 통해 속성에 접근
console.log(calc.add(1,2));
console.log(calc.sub(2,1));

//calc.js
//이름이 필요없기 때문에 별도로 변수 할당 없이 바로 객체를 내보낼 수 있다.
export default{
    add(a,b){ return a+b; },
    sub(a,b){ return a-b; }
};

 

 

 

참고

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

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

: https://velog.io/@leobit/CommonJS