[JS] 모듈(Module)이란? 그리고 모듈 시스템을 알아보자

🔎 모듈이란?

자바스크립트에서 모듈이란 일반적으로 '파일' 각각을 말한다.

기존에는 모듈이라는 개념이 없었지만, 점점 자바스크립트 세계가 커지면서 모듈을 불러오고 내보낼 수 있도록 하였다.
ECMAScript 2015(=ES 6)에서 공식적으로 모듈 시스템이 도입되었다.
각 모듈은 독립적으로 자체 스코프를 가진다. 모듈 내에서 선언한 변수, 함수 등을 해당 모듈 내에서만 사용 가능하다.
이에 따라 모듈 간에 공유하기 위해서는 export, import 구문을 사용할 수 있다.
필요한 모듈만 로드하여 사용 가능하며, 모듈화를 통해 코드를 작고 큰 단위로 나누어 관리할 수 있다.
 

💡 모듈 시스템

공식적으로 ESM이 도입되기 전까지는 AMD, CommonJS, UMD가 사용되었다.

 

- AMD

Asynchronous Module Definition
이름에서도 나타나듯이, 웹 브라우저에서 비동기적으로 모듈을 정의하기 위해 설계되었다.
 
사용법)
`define` 함수를 통해 모듈을 정의하고
`require` 함수를 통해 모듈을 비동기적으로 로드하여 사용한다.
 

- CommonJS

Node.js의 모듈 시스템으로 채택되었다.
 
파일 시스템에서 모듈을 즉시 로드할 수 있는 서버 사이드 환경에 적합하게 설계되었다.
여기서 말하는 파일 시스템이란, 스크립트가 실행되는 서버의 파일 시스템에 직접적으로 접근 가능하다는 것을 말한다. 서버에 저장된 파일을 읽고 쓰는 등의 작업이 가능하다.
 
또한 CommonJS는 동기적으로 모듈을 로딩한다.
호출한 모듈을 파일 시스템에서 찾아서 로드가 완료될 때까지 기다린 후에, 로딩된 모듈을 사용할 수 있다.
웹 브라우저 환경에서는 네트워크를 통해 모듈을 로드하기 때문에 비동기 로딩이 중요하지만, 
서버 사이드 환경에서는 파일 시스템에 직접적으로 접근할 수 있기에 로딩 시간이 짧다.
이에 따라 동기적 로딩이라고 해서 서버 사이드에서는 성능에 비효율적이지 않다.
 
참고로, 웹 브라우저에는 보안상의 이유로 파일 시스템에 직접 접근이 불가능하다. 접근이 가능하다면 악의적으로 웹 사이트가 사용자의 파일을 읽고 수정하며, 개인 정보를 탈취할 수 있기 때문이다.
 
사용법)
`module.exports` 로 모듈을 내보내고
`require` 함수로 모듈을 로드한다.
 

// math.js
fuction sum(a, b) {
	return a + b; 
}

module.exports = {
	sum: sum
}

// note.js
const math = require('./math');
console.log(math.sum(1, 2));

 

 

- UMD

Universal Module Definition
클라이언트 측과 서버 양쪽에서 사용될 수 있는 범용성을 제공한다.
조건에 따라 AMD 또는 CommonJS 방식으로 모듈 시스템을 선택할 수 있다.
 

- ESM (ES6 Modules)

ECMAScript 2015 (ES6)에서 도입된 자바스크립트의 공식 모듈 시스템이다.
웹 브라우저와 Node.js 환경에서 모두 사용 가능하다.
공식 모듈 시스템인 만큼, 조금 더 자세하게 알아보자!
 

특징

1. 정적 구조
정적 구조를 가지고 있기에 컴파일 타임에 모듈 구조의 분석이 가능하다.

트리 쉐이킹 등의 코드 최적화를 해낼 수 있다는 것이다.
파일 최상위에서 모듈을 호출한다
 
2. 비동기 로딩
위에서 작성했듯, 웹 애플리케이션에서는 네트워크를 통한 로딩을 진행하기 때문에 성능을 위해서는 빠른 속도가 중요하다.
ESM은 모듈을 비동기적으로 로드할 수 있다.
 
사용법)
export로 모듈을 내보내고
import로 모듈을 불러온다

또는

script 태그의 속성에 type="module"를 추가해 주면, 이 파일은 모듈로써 동작한다.

<script type="module" src="hello.js"></script>

 

---

cf)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules

JavaScript modules - JavaScript | MDN