모던 자바스크립트 (모듈) 12-1. 모듈

모듈

: 개발하는 애플리케이션의 크기가 커졌을 때 파일을 여러 개로 분리해야하는 시점이 오는데,

  이때 분리된 파일 각각을 모듈이라고 함

: 스크립트의 크기가 커지고 기능이 복잡해지면서 모듈에 대한 문법이 생김

 

 

 

 

자바스크립트의 모듈 시스템

- AMD

: 가장 오래된 모듈 시스템 중 하나로 require.js 라이브러리를 통해 처음 개발 

 

- CommonJS

: NodeJS 서버를 위해 만들어진 모듈 시스템

 

- UMD

: AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐

 

=> 현재는 대부분의 주요 브라우저와 NodeJS가 모듈 시스템을 지원하면서

     모듈 시스템을 따로 사용하지는 않음

 

 

 

자바스크립트의 모듈

- export 지시자

: 변수나 함수 앞에 붙혀 외부 모듈에서 접근 가능하도록 만드는 지시자

 

- import 지시자

: 외부 모듈의 기능을 가져오는 지시자

 

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

// 📁 main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // 함수
sayHi('John'); // Hello, John!

 

 

 

 

모듈의 핵심기능

: 모듈은 항상 엄격모드로 실행 됨

 

- 모듈 레벨 스코프

: 외부에 공개하려는 모듈은 export 해야하고

: 내보내진 모듈을 사용하기 위해서는 import를 해야함

 

- 단 한번만 평가 됨

: 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한번만 실행 됨

: 실행 후 결과는 해당 모듈을 가져가려는 모든 모듈에 내보내짐

// 📁 alert.js
alert("모듈이 평가되었습니다!");

// 동일한 모듈을 여러 모듈에서 가져오기

// 📁 1.js
import `./alert.js`; // 얼럿창에 '모듈이 평가되었습니다!'가 출력됩니다.

// 📁 2.js
import `./alert.js`; // 아무 일도 발생하지 않습니다.

// 📁 admin.js
export let admin = {
  name: "John"
};

// 📁 1.js
import {admin} from './admin.js';
admin.name = "Pete";

// 📁 2.js
import {admin} from './admin.js';
alert(admin.name); // Pete

// 1.js와 2.js 모두 같은 객체를 가져오므로
// 1.js에서 객체에 가한 조작을 2.js에서도 확인할 수 있습니다.

 

 

 

 

import.meta

: 현재 모듈에 대한 정보를 제공하는 객체

 

※ 모듈 최상위 레벨의 this는 undefined임

 

 

 

빌드 툴

: 웹팩과 같은 툴을 이용해 번들링을 거쳐 묶어진 파일을 프로덕션 서버에 올리는 방식으로 배포

: 번들러를 사용하면 모듈 분해를 통제할 수 있음

 > 경로가 없는 모듈이나 CSS, HTML 포맷의 모듈을 사용할 수 있게 해줌

 

- 빌드툴의 역할

: HTML의 <script type="module">에 넣을 주요 모듈(진입점 역할을 하는 main 모듈)을 선택

: 주요 모듈에 의존하고 있는 모듈 분석을 시작으로 모듈 간 의존 관계 파악

: 모듈 전체를 한데 모아 하나의 큰 파일 생성

: 위 과정 중 변형 및 최적화도 수행

 > 도달 가능하지 않은 코드 삭제 

 > 쓰임처가 없는 모듈 삭제

 > console, debugger 같은 개발 관련 코드 삭제

 > 최신 자바스크립트 문법이 사용된 경우 바벨(Babel) 을 사용해 폴리필 수행

 > 공백 제거, 변수 이름 줄이기 등으로 산출물의 크기를 줄임

 

 

 

 

 

 

Refference

모듈 소개