Node.js 모듈 시스템에 대해서

Node 에서는 함수의 종류별 또는 기능별로 별도 파일에 작성해서 필요한 기능을 불러와 사용할 수 있도록 만들었졌다.

---

Node 는 NPM 을 이용해서 필요한 패키지를 설치할 수 있다.
이러한 패키지는 필요한 기능을 모듈별로 만들어서 관리한다.

 

그럼 어떻게 작성하고 불러올 수 있을까 ?

기본형식

다음과 같은 함수를 만들었고 파일명을 math.js 로 저장했다. 

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

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

$ node math.js

>>3
잘 실행된다.
 

불러오기

어떻게 불러올 수 있을까? 다음과 같다. 기본형식이다.
 
작성법
module.exports = 함수명();
 
불러오기
require(파일명);
 

// math.js

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

 

// main.js

const add = require('math.js');
console.log(add(1,2));

 
함수가 여러개인 경우

module.exports = {
 add: (a,b) => a + b;
 substract: (a,b) => a - b;
}

 

const math = require('math.js');

console.log(math.add(1,2));
console.log(math.substract(2,1));

 

위의 방식은 Node.js 에서 사용하는 기본 방식으로 CommonJS (CJS) 라고 부른다.

 
Node 의 사용이 늘면서 요구 사항이 높아지기 시작했다.
 
JavaScript 문법을 사용해 서버 프로그램을 작성하기 위해서 만들어진 Node.js 가 클라이언트 웹브라우저에서도 동작하길 원하게 되었다.
특히 동기적 방식의 CommonJS 아닌 비동기 방식을 원하게 되었다.
 
웹브라우저에서는 require() 방식으로는 동작하지 않기 때문에 새로운 문법이 필요하게 되었고 ES6 에서 결정되었다.
 
ES6에서 import, export 단어를 사용하기로 최종 합의되었다.
 

Node 14 부터는 ES6 의 import, export 를  기본 기능으로 정식 지원하게 되었다.

 
그럼 기존 코드와 신규 코드를 어떻게 통합해야 할까 ?
 
기존 CommonJS 파일 확장자에 .cjs 로 변경한다. 

// math.cjs

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

 

// main.js

import math from './math.cjs';

console.log(math.add(1,2));

 
main.js 파일이 ES6 가 적용된 파일인지를 식별하기 위해서 main.mjs 로 변경하면 좀더 알아보기 쉽다.
 

파일별 확장자 사용 규칙:

• CommonJS → .cjs
• ESM → .mjs

이렇게 확장자를 다르게 사용하면 헷갈리지 않고 관리할 수 있음.
 
한번에 ES6 방식으로 처리하기 
> npm init

// package.json
{
  "type": "module"
}

 
위처럼 작성하면 확장자가 .js 라도 ESM이 사용가능 하다.
이렇게 하지 않으면, ES6 가 적용된 파일은 main.mjs 로 확장자를 변경해야 동작한다.
 

ESM이 생긴 이유 정리

CommonJS(과거)	ES Modules(현재)
require() 사용	import/export 사용
동기적 로딩(느림)	비동기적 로딩(빠름)
브라우저에서 사용 불가	브라우저에서 사용 가능
정적 분석 어려움	정적 분석 가능(최적화 쉬움)
트리 셰이킹 불가	트리 셰이킹 가능

ESM은 CommonJS의 단점을 해결하고, 브라우저와 서버에서 일관된 방식으로 사용하기 위해 만들어짐!