[Javascript] 모듈이란?

1. 모듈의 일반적 의미

---

모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미한다.

일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다.

 

이러한 모듈은 자신만의 파일 스코프를 가져 캡슐화 되어있기 때문에 재사용하기 위해서

export와 import를 사용한다.

 

export(공개)를 하면 다른 모듈에서 사용가능하고 공개된 모듈은 import를 통해 재사용할 수 있다.

 

즉... 모듈이란 개념이 도입되어 각 기능별로 파일을 따로 만들어서 

이것들을 내가 원하는대로 재사용하기 편해졌다는 것...

 

 

2. 자바스크립트와 모듈

---

자바스크립트는 기본적으로 파일 스코프와 import, export를 지원하지 않았다.

script 태그를 이용해 외부 js 파일을 로드할 수는 있지만 파일마다 독립적인 파일 스코프를 갖진 않는다.

즉, 여러 개의 js 파일로 분리해도 하나의 js 파일 내에 있는 것처럼 동작하는 것이다.

 

이 문제를 해결하기 위해 CommonJS와 AMD(Asynchronous Module Definition)를 구현한 모듈 로더 라이브러리가 나왔고 자바스크립트 런타인 환경인 Node.js는 모듈 시스템의 표준인 CommonJS를 채택했고 현재는 js 환경에서 파일별로 독립적인 파일 스코프를 갖는다.

 

 

3. CommonJS

---

많은 프로젝트에서 ES6 모듈 시스템을 더 널리 사용하고 있는 추세이다.

하지만 import 키워드를 사용할 수 없는 상황(babel과 같은 ES6 코드 변환 도구를 사용할 수 없을 때)에서는

require 키워드를 사용해야하기 때문에 사용 방법을 알고 있으면 좋다.

 

require - 불러오기

const moment = require("moment");

CommonJS에서는 다른 파일의 코드를 불러올 때 require 키워드를 사용하여

다른 변수를 할당하듯이 모듈을 불러온다.

 

exports/module.exports - 내보내기

CommonJS 방식으로 모듈을 내보낼 때는 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 한다.

특히 exports와 module.exports 변수를 상황에 맞게 잘 사용해야 한다.

 

여러 개의 객체를 내보낼 경우, exports 변수 속성으로 할당.

딱 하나의 객체를 내보낼 경우, module.exports 변수 자체에 할당.

 

CommonJS 모듈 내보내기/불러오기

 

4. ES6 모듈(ESM)

---

ES6로 넘어오면서 자바스크립트 자체에서 ES6 Module이라는 이름으로 모듈화 지원을 시작했다.

 

<script type="module" src="app.mjs"></script>

ESM의 사용법은

• script 태그에 type="module" 어트리뷰트를 추가
• 파일 확장자는 mjs를 사용.(일반 js 파일이 아닌 ESM임을 명확히 하기위해)

 

[Javascript] ES6 모듈(ESM)

 

 

 

 

 

 

참고 감사합니다.

모던 자바스크립트 Deep Dive - YES24

 

자바스크립트 CommonJS 모듈 내보내기/불러오기 (require)