모듈
- 웹 앱플리케이션을 구성하는 기능들을 분할한 단위.
- 공통으로 사용되는 코드나 자주 사용되는 코드를 별도의 파일로 만들어서 재사용 할 수 있다.
- 필요한 로직만을 로드해서 필요한 로직을 빠르게 찾아 쓸 수 있다.
ex)
// index.html
<body>
<script type="module">
import common_function from './source/common.js';
document.querySelector("#root").innerHTML = common_function + " " + "use it";
</script>
</body>
// common.js 모듈이 common_function을 export.
// index.html에서 common_function으로 import해서 사용.번들러
-
애플리케이션에 필요한 모든 파일들을 모듈 단위로 나누어서 최소한의 파일(번들) 묶음으로 만든다.
변수가 중복되거나 많은 양의 파일을 전송하거나 또는 긴 스크립트를 로드할때 오랜 시간이 걸리는 문제를 위하여 번들러를 사용한다. -
여러 파일을 최적화하여 하나의 파일로 묶어 주기 때문에 전송하고 받는 파일의 크기를 줄여준다. 이는 네트워크 병목현상을 해결해준다.
-
모듈 단위 코딩이 가능하기 때문에 유지보수가 편하고 코드의 가독성이 향상 된다.
-
번들러에는 대표적으로 webpack, parcel, browserify, rollup 등이 있다.
많은 서드파티를 필요하는 복잡한 어플리케이션은 webpack.
최소한의 서드파티로 라이브러리를 만들고 싶을 경우 Rollup.
복잡한 설정없이 간단한 어플리케이션을 만들고 싶을 경우 Parcel. -
다양한 서드파티 기능을 이용할 수 있는데, Webpack의 Babel-loader를 이용하여 모던 자바스크립트나 SASS등을 사용할 수 있다.
웹팩
-
웹팩은 JS 모듈 번들러로써 여러개로 나뉘어 있는 파일들을 하나의 js 코드로 압축하고 최적화하는 라이브러리. Entry, Output, Loaders, Plugins, Mode로 구성되어 있다.
-
Entry는 웹팩이 빌드할 파일의 시작 위치.
-
Output은 웹팩으로 생성되는 번들을 내보낼 위치와 파일의 이름을 지정.
-
Loaders는 js파일이 아닌 파일들도 유효한 모듈로 변환.
-
Plugins는 번들 결과물 처리, 번들된 js를 난독화 또는 특정 텍스트를 추출.
-
Mode는 웹팩 사용 모드 - development(빠른빌드), production(최적화 빌드), none(아무기능없이 빌드) 으로 설정 가능.
바벨
- 바벨은 자바스크립트 코드를 브라우저에 맞게 예전 버전으로 변환 해주는 트랜스 컴파일러이다.
- ES6의 최신 기능을 지원하지 않는 브라우저를 위해 ES6(구기능)으로 변환 시켜주는 역할.
- 다양한 웹 브라우저에 맞춰 다운그레이드하여 universal한 코드로 변환 시켜주는 역할.
