JavaScript CommonJS, ES6 모듈 시스템

* 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다.

---

본 글에서 다룰 내용

• 모듈
• CommonJS
• ES6

---

모듈?

 

모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로 아래와 같은 것들을 위해 사용합니다.

• 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있습니다.
• 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있습니다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결됩니다.
• 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있습니다.

이런 장점들을 살리기 위해 모듈 개념이 필요했고, 자바스크립트에선 모듈을 개발하기 위한 여러가지 시도들이 있었습니다. CommonJS와 ES6 각각의 특징과 사용법을 알아봅시다.

---

CommonJS?

 

• 자바스크립트를 서버사이드 및 데스크탑 어플리케이션에서 지원하기 위해 만든 그룹
• 그룹을 만들었을 때, 범용적인 언어로 만들기 위해서는 모듈화의 개념이 필요했고, 이 그룹만의 모듈 방식을 정의하게 되었는데 그것이 바로 CommonJS 방식의 모듈화다
• 다른 모듈을 사용할 때는 require을 사용한다
• 모듈을 해당 스코프 밖으로 보낼 때에는 module.exports를 사용한다
• Node.js에서 현재 CommonJS를 사용하고 있다

HelloWorld를 출력하는 함수를 가진 파일을 a.js라고 하고 그 함수를 가져와서 사용하는 파일을 b.js라고 하자.

아래의 코드를 보면서 이해해보자.

 

a.js

const printHelloWorld = () => {
  console.log('Hello Wolrd');
};

module.exports = {
  printHelloWorld
};

b.js

const func = require('./a.js'); // 같은 디렉토리에 있다고 가정
func.printHelloWorld();

여기서 module.exports의 module은 현재 모듈에 대한 정보를 갖고 있는 객체이다.

이는 예약어이며 그 안에 id, path, parent 등의 속성이 있고 exports 객체를 가지고 있다.

 

exports vs module.exports

 

module.exports 외에도 exports를 사용하기도 하는데 이 관계에 대해서 명확히 이해하고 있어야 한다.

• module.exports는 빈 객체를 참조한다
• exports는 module.exports를 참조한다
• require는 항상 module.exports를 리턴받는다

왜 module.exports와 exports 2가지로 설정해놓았을까?

 

exports에 어떤 값을 할당하거나 새로운 객체를 할당했다고 하더라도 결국 require는 module.exports를 리턴받기 때문에 잠재적인 버그를 피할 수가 있다.

---

ES6?

 

• import와 export 구문을 사용하는 방식
• 모든 브라우저가 지원하는것이 아니기 때문에 Babel의 @babel/plugin-transform-modules-commonjs를 통해 변환시켜서 사용한다

모듈 A, B가 있고 각각을 export로 내보내는 방식과 그에 따라 어떻게 import로 불러오는지 살펴보자.

아래의 예시 코드를 참조해서 알아보자.

 

moduleA.js

const A = () => {};
export default A;

moduleB.js

export const B = () => {};

index.js

import A from 'moduleA';
import { B } from 'moduleB';

 

default의 유무에 따라 export를 사용하는 방식을 알아보자.

 

named export

• 모듈 내에서 여러번 사용할 수 있다
• import로 불러올 때 {}로 묶어서 불러와야한다
• 별칭을 as로 주어서 다른 이름으로 사용할수도 있다
• * 와일드 카드를 사용하여 한번에 불러오거나 내보낼 수 있다

default export

• 모듈 내에서 한번만 사용할 수 있다
• import에서 내보낸 이름 그대로 바로 사용할 수 있다

---

참고 문헌 및 사이트

 

Must-Know-About-Frontend Github - https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/module.md

JavaScript Module System - https://velog.io/@doondoony/JavaScript-Module-System#-es6-modulesesm

 

긴 글 읽어주셔서 감사합니다😀