모듈 내보내기 및 가져오기

 

노드 모듈 시스템은 CommonJS 모듈 시스템과 ES 모듈시스템이 있다.

그리고 보통 하나의 모듈 시스템으로 개발한다.

 

여러 패키지 설명글을 보다 보면 모듈을 가져오는

예제 코딩을 볼 수 있다.

 

이때 CommonJS 방식으로 설명하는 곳이 있는가 하면

ES 방식으로 설명하는 곳도 있다.

 

이런 모듈 시스템 차이를 모르고 맞지 않는 방법으로

모듈을 내보내거나 가져올려고 하면 당연히 에러나 발생한다.

 

CommonJS 모듈 시스템 내보내기 및 가져오기

 

환경설정

환경 설정에서 모듈 시스템을 따로 설정하지 않았다면 디폴트는 CommonJS 시스템이다.

 

내보내기 (modusl.exports)

CommonJS 방식에서 모듈은 module.exports = 변수나 함수 방식으로 내보낸다.

// cj_testFnc.js
const testFnc = () => {
  console.log(`testFnc 호출`);
};

module.exports = testFnc;

 

내보내야 하는 대상이 여러개면  객체로 처리하면 된다.

// cj_testFnc.js

const testFnc0 = () => {
  console.log(`testFnc0 호출`);
};

const testFnc1 = () => {
    console.log(`testFnc1 호출`);
  };

module.exports = {testFnc0, testFnc1};

 

가져오기 (require)

모듈은 require(파일 경로) 로 가져올 수 있다.

// cj_app.js
const testFnc = require("./cj_testFnc");

testFnc();

 

가져오는 대상이 여러개라면 구조 분해 할당 해준다.

const { testFnc0, testFnc1 } = require("./cj_testFnc");

testFnc0();
testFnc1();

 

아니면 객체로 받아서 처리 할 수도 있다.

const testObj = require("./cj_testFnc");

testObj.testFnc0();
testObj.testFnc1();

 

ES 모듈 시스템 내보내기 및 가져오기

 

환경설정

package.json 파일이 없다며 루트에 생성 해서 다음과 같이 타입을 설정한다.

이 환경 설정이 되어 있지 않다면 ES 모듈 시스템을 사용할 수 없다.

{
  "type": "module"
}

 

내보내기 (export)

ES 방식은 export 명령어를 사용하여 내보내게 된다.

보통 변수나 함수앞에 export를 붙여준다.

// es_testFnc.js
// 변수나 함수 앞에 export

export const testFnc = () => {
  console.log(`testFnc 호출`);
};

 

단일 대상인 경우에는 export default 변수 or 함수로 내보낼 수도 있다.

// es_testFnc.js
// 내보내야 하는 대상이 하나인 경우

const testFnc = () => {
  console.log(`testFnc 호출`);
};

export default testFnc;

 

그리고 대상이 여러개 라면 export {대상, 대상,... }와 같이 객체로 내보낸다. 

// es_testFnc.js
// 내보내야 하는 대상이 여러개라면 객체로 내보낸다.

const testFnc0 = () => {
  console.log(`testFnc0 호출`);
};

const testFnc1 = () => {
  console.log(`testFnc1 호출`);
};

export {testFnc0, testFnc1}

 

제일 처음 설명한 방법으로도 여러개를 내보낼 수 있다.

// es_testFnc.js

export const testFnc0 = () => {
  console.log(`testFnc0 호출`);
};

export const testFnc1 = () => {
  console.log(`testFnc1 호출`);
};

 

가져오기 (import)

ES 모듈은 import 변수명 또는 함수명 from 모듈파일 으로 가져온다.

// es_app.js

import { testFnc } from "./es_testFnc.js";

testFnc();

 

가져올 때 import ~as로 이름을 바꿔 사용할 수도 있다.

// es_app.js

import { testFnc as rename } from "./es_testFnc.js";

rename();

 

 

모듈 파일 하나에 가져오는 대상이 여러개라면 다음과 같이 작성한다.

// es_app.js

import { testFnc0, testFnc1 } from "./es_testFnc.js";

testFnc0();
testFnc1();

 

아니면 import * as 네임스페이스를 지정하여 한번에 가져올 수도 있다.

// es_app.js

import * as MyModual from "./es_testFnc.js";

MyModual.testFnc0();
MyModual.testFnc1();