1. 모듈
애플리케이션을 구성하는 개별 요소로, 재사용 가능한 코드 조각을 말한다.
애플리케이션의 크기가 커지면 파일을 여러 개로 분리하는 경우가 생기는데, 이 때 각각의 파일을 모듈이라고 한다. 초기 자바스크립트는 복잡한 기능을 수행하지 않았기 때문에 스크립트 파일 크기가 작고 단순했지만 스크립트 크기가 커지고 기능도 복잡해지면서 모듈 문법의 필요성이 커졌다.
우선 모듈이 성립하기 위해서는 자신만의 파일 스코프(모듈 스코프)를 가져야 한다. 초기 자바스크립트는 다음과 같이 script 태그를 이용해 외부 자바스크립트 파일을 로드하는 아주 간단한 모듈 시스템을 제공했는데, 파일마다 독자적인 파일 스코프를 갖지 않았기 때문에 모든 모듈이 하나의 전역을 공유하는 문제가 발생했다. 모듈 스코프를 보장하지 않기 때문에 모듈 문법이라고 볼 수 없다.
<!DOCTYPE html>
<html>
<body>
<script src="module1.js"></script>
<script src="module2.js"></script>
</body>
</html>전역 스코프 공유로 인해 나중에 로드된 파일이 이전 파일의 컨텍스트를 오버라이딩하는 문제가 발생했고, 개발자는 각 모듈의 로드 순서를 정하는데 많은 시간을 쏟았다. 또한 애플리케이션이 복잡해질 수록 로드해야할 모듈의 수가 증가하면서 애플리케이션 자체를 로드하는 속도가 현저히 느려지는 문제가 발생했다.
2. 모듈 시스템
2008년 구글에서 V8 엔진을 공개한 이후 자바스크립트에서 모듈 시스템의 필요성은 더욱 높아졌다.
- 브라우저 밖에서 자바스크립트를 실행할 수 있게 되었고,
- 이에 따라 서버 사이드에서 자바스크립트를 사용하자는 의견이 대두되었기 때문이다.
그리고 CommonJS, AMD, UMD 모듈 시스템이 등장한다.
| 모듈 시스템 | 특징 |
|---|---|
| CommonJS | 서버 환경에서 주로 사용되며, 동기적으로 모듈을 로드한다. |
| AMD | 브라우저 환경에서 사용되며 비동기적으로 모듈을 로드한다. |
| UMD | CommonJS와 AMD의 호환성 문제를 해결하고자 개발되었다. |
UMD가 호환성 문제를 해결했지만 자바스크립트 언어 자체의 모듈 시스템은 여전히 부재했고 2015년 드디어 ES6 Module 자바스크립트 표준 모듈 시스템이 등장했다.
- 동기/비동기 지원
- 순환 참조 가능
- 정적 분석으로 트리 쉐이킹 가능
비교적 최근에 나온 자바스크립트 모듈 문법은 IE와 같은 일부 구형 브라우저에서는 지원되지 않는 문제가 발생했다. 이를 해결하고자 Babel과 같은 트랜스파일러(Transpiler)가 등장한다. 이로써 개발자는 브라우저 호환을 신경쓰지 않고 최신 문법을 이용해 개발할 수 있게 된다.
[트랜스파일러]
한 번 컴파일이 되면 구형 브라우저에서도 동작하는 자바스크립트 코드를 만들어주는 도구3. 태스크 러너
스코프가 구분되는 모듈 시스템이 필요한 이유는 결국 개발 과정에서 생산성을 높이고 성능이 좋은 애플리케이션을 만들고자함이다. 생산성과 성능을 잡기 위해 개발자는 개발 과정에서 린팅, 빌딩, 테스팅 등을 적극적으로 도입했고 이 모든 작업을 자동화할 수 있는 도구인 태스크 러너가 등장한다. 대표적으로 Grunt와 Gulp가 있다.
[태스크 러너의 역할]
1. 코드 컨벤션을 유지하기 위한 린팅
2. Sass나 TypeScript와 같이 전처리가 필요한 언어를 컴파일
3. 소스 코드를 축소
4. 하나의 파일로 번들4. 모듈 번들러
자바스크립트 모듈 간 종속 관계를 분석해 하나의 자바스크립트 파일로 만들어 주는 도구다.
번들러는 태스크 러너의 역할 중 하나인 번들을 보다 전문적으로 수행하기 위해 만들어졌다. 코드 스플리팅을 통해 단일 파일이 아닌 여러 개의 자바스크립트 파일로도 나눌 수 있다.
1️⃣ 애플리케이션을 구성하는 여러 파일을 단일 파일로 번들링한다.
- 브라우저는 한 번의 요청으로 모든 파일을 받을 수 있다. (애플리케이션 로딩 속도 개선)
2️⃣ 모듈 간의 의존 관계를 파악해 모듈 스코프를 보장한다. (스코프 오염 해결)
3️⃣ 트랜스파일러와 컴파일러 역할을 한다.
- 번들된 파일의 용량을 줄이기 위해 코드 공백을 줄이는 minify
- Babel 등을 이용해 ES6 코드를 하위 버전으로 변환
4️⃣ 사용되지 않는 코드를 번들링에 포함시키지 않는 트리 쉐이킹을 제공한다.
