JavaScript
모듈(Module)
Summer.dev
2023. 9. 1. 16:37
요약
모듈이란 특정 기능을 갖는 작은 코드 단위이며 이러한 코드를 파일로 나누어서 관리하는 것을 모듈화라고 합니다.
모듈 번들러란 여러개의 어플리케이션을 구성하는 JS,CSS, 이미지 등의 파일을 하나의 파일로 합쳐주는 도구 입니다.
설명
👩🏻💻 왜 모듈을 하나로 합칠까요?
<html>
<script src ="module1.js" /> <!-- var age = 1 -->
<script src ="module1.js" /> <!-- var age = 20 -->
<script src ="module1.js" /> <!-- console.log(age) // 20-->
</html>
자바스크립트를 여러개의 파일로 분리해서 script 태그로 로드해도
결국 하나의 자바스크립트 파일처럼 동작합니다.
분리된 파일간의 스코프 구분이 없어 로드 순서를 정하는데 많은 시간을 소모했습니다.
그래서 등장한 CommonJS와 AMD 하지만..
- commonJS 코드 예시
// 다른 모듈에서 함수 가져오기
const math = require('./math.js');
// 가져온 함수 사용하기
const sum = math.add(5, 3);
console.log(sum);
const difference = math.subtract(10, 4);
console.log(difference);
CommonJS로 인해 각 파일간 스코프가 분리가 되었지만 여전히 문제는 존재했습니다.
CommonJS는 브라우저 외의 환경(Node.js)에서 동작하기 위해 만들어진 모듈 시스템이었습니다.
비동기 모듈 로드에 대해서는 고려되지 않았기 때문에 사용자와 빠르게 소통해야하는 브라우저 특성상 사용하기 어려웠습니다.
이를 해결하기위해 AMD(Asynchronous Module Definition)가 등장하였지만,
규격이 다른 두가지 방식의 불편함으로 인해 언어자체에 모듈 시스템을 도입하게 되었습니다.
JS표준 모듈 시스템 ESM(ES6 Module)의 탄생 그러나..
<script type="module" src="main.js"/>
- script 태그에 type="module" 요소를 추가하면 해당 자바스크립트 파일은 모듈로서 동작합니다.
// util.js
export function greet(name) {
console.log(`Hello, ${name}!`); // Hello Alice!
}
// main.js
import { greet } from './utils.js';
greet('Alice');
- export import 키워드를 이용해 함수,변수 등을 다른 모듈에서 사용할 수 있게 합니다.
그러나.. 각각의 모듈(JS 파일)을 개별 네트워크 통신을 통해 가져와야 했고
→ 통신 횟수가 증가하여
→ 초기 로딩 속도가 저하되었습니다.
그럼 모듈을 하나로 합치자! ⇒ 번들러(bundler)탄생✨
현대 대부분의 모듈 번들러는 개발 서버를 지원하며 아래와 같은 이점이 있습니다.
- 코드 변경 사항을 새로고침 없이 바로 반영시켜주는 기술 HMR(Hot Module Replacement)
- 바벨과 같은 트랜스 파일러를 연결해서 번들링과정에서 실행
- minify - 코드를 같은 기능을 하는 더 작은 용량의 코드로 변환
- Tree Shaking - 코드 번들링과정에서 사용하지 않는 코드들을 제거해서 최적화
webpack은 현재 가장 널리 사용되는 모듈 번들러 중의 하나입니다.