모던 JS Deep dive #48 | 모듈

📌 모듈

모듈은 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다.

즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재하며, 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다.

export된 모듈의 자산은 다른 모듈에서 재사용할 수 있고, 모듈 사용자는 모듈이 export한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있다. 이를 import라 한다.

📌 JS와 모듈

JS는 태생적으로 모듈 시스템을 지원하지 않았다. 다시 말해, 파일 스코프, import, export를 지원하지 않았다. script 태그로 로드해도 분리된 자바스크립트 파일들은 결국 하나의 파일 내에 있는 것처럼 동작한다. 이런 상황에서 제안된 것이 CommonJS와 AMD고, JS 런타임 환경인 Node JS는 모듈 시스템의 사실상 표준인 CommonJS를 채택했다.

📌 ES6모듈(ESM)

이러한 상황에서 ES6에서 클라이언트 사이드 JS에서도 동작하는 모듈 기능을 추가했다. ESM의 사용법은 script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다. ESM임을 명확하게 하기 위해 mjs를 사용할 것을 권장한다.

📌 import/export & require/exports

require / exports 는 NodeJS에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스타일과 비슷하다고 볼 수 있다.

import / export 는 ESM 방식으로 Java나 Python 언어 방식과 비슷하다.

/* CommonJS  */
const name = require("./module.js");
/* ES6 */
import name from "./module.js";

위 처럼 import 와 require 는 확연히 다르기 때문에 둘을 구분하는데 있어 무리가 없다.

하지만, export 와 exports 는 단수냐 복수냐의 차이 때문에 많은 초보 개발자들이 혼동해 한다.

/* CommonJS  */
const name = "고양이";
module.exports = name;
/* ES6 */
const name = "고양이";
export default name;

CommonJS와 ES6라는 모듈 시스템에서는 exports 객체라는 개념이 존재하는데, exports는 모듈로부터 내보내지는 데이터들을 담고 있는 하나의 객체이다.

ES6의 export default 구문이, CommonJS의 module.exports 구문 동작을 대체하기 위한 문법이고, export구문은 exports.변수 를 대체하기 위한 문법이라 보면 된다.

[Node.js 에서 import 키워드 사용 방법]

비록 정식적으로 노드의 CommonJS를 대체할수는 없지만, 자바스크립트 노드 프로젝트에서 import 키워드를 사용하도록 지정 설정을 할 수 있는 방법 또한 존재한다.

과거에는 import, export를 인식시키기 위해 따로 .mjs라는 확장자를 사용해 모듈 키워드를 구분하는 방법을 사용했었다.

예를들어 app.js 대신에 app.mjs 로 소스 파일을 만드는 식으로 말이다.

하지만 이제는 package.json을 통해서 간편하게 설정할 수 있어서 확장자를 바꾸지 않아도 import, export를 쓸 수 있게 되었다.

🔗 참고자료

[NODE] 📚 require vs import 문법 비교 (CommonJS vs ES6)