[ TERMS 13 ] 모듈 / 웹팩
1. 모듈(Module) / 웹팩(Webpack)의 정의
> 모듈
한 파일에 들어가는 코드의 줄 수가 많아지면 가독성을 위해 복잡한 코드들을 여러 파일로 분리시켜야 한다. 이렇게 나눠진 여러 파일 각각을 '모듈'이라 부른다. 모듈은 그 자체로 완전히 독립적인 기능을 하기도 하고, 필요할 때 다른 본체에 합류하여 그 기능을 수행한다.
> 웹팩
최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 모듈 번들러는 웹 앱을 구성하는 자원( HTML, CSS, 자바스크립트, Images)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다.
2. 모듈 / 웹팩은 어디서 접하게 될까?
모듈 : 함수 파일들을 내보내고(export) 그 파일을 다른 곳에서 받아오는(import) 일을 하는 것웹팩 : 작성한 코드들을 빌드하는 과정에서 사용
3. 모듈 / 웹팩 알아보기
> 모듈
- 좋은 모듈 만들기
좋은 모듈화를 위해서는 각자 주어진 기능만을 독립적으로 수행하고 다른 모듈과의 연관성이 적어야 한다. (즉 독립성이 높아야 한다)
Why? 독립성이 높으면 해당 모듈을 수정하더라도 다른 모듈에 끼치는 영향이 적고, 오류를 쉽게 발견하고 해결 가능함
So 모듈의 독립성을 높이려면 모듈 간 상호 의존도라고 할 수 있는 결합도를 낮추고 해당 모듈이 독립적으로 기능을 수행할 수 있도록 응집도를 높여야 한다.
- 모듈 사용하기
모듈에는 특수한 지시자인 'export'와 'import'가 있다. 모듈에서는 export 지시자를 사용해서 변수 혹은 함수를 다른 곳에서 사용할 수 있게 해줘야 하고, 모듈을 사용하는 쪽에서는 import를 사용해서 모듈에 있는 변수 혹은 함수를 삽입해서 사용할 수 있다.
// export 지시자를 통해서 helloUser.js 내부의 함수 hello를 외부로 내보낸 것
// helloUser.js
export function hello(user) {
alert('Hello, ${user}!')
}// import 지시자를 통해서 main.js에서 함수 hello를 사용할 수 있게 하는 코드
// main.js
import { hello } from "./helloUser.js";
alert(hello); // 함수
hello("peter"); // Hello, peter!위 두 예시에서 import 지시자는 상대 경로(./helloUser) 기준으로 모듈을 가져와 helloUser에서 내보낸 함수 hello를 상응하는 변수에 할당한 것이다.
> 웹팩
- 장점
- 이전에는 css, js 파일 등이 여러 개일 경우 각 파일의 수만큼 서버에 요청하여 웹 자원들을 얻어와야 했지만, 웹팩을 사용하면 존속성이 있는 파일들을 그룹화하여 하나의 파일로 묶어서 요청하거나 응답을 받기 때문에 로딩에 대한 네트워크 비용(서버 요청 횟수)을 줄일 수 있다.
- 웹팩의 주요 구성 요소 중 하나인 로더(Loader)는 웹팩과 바벨(Babel)을 연동시키는 일을 한다. 로더의 역할로 바벨을 편하게 사용할 수 있고, 덕분에 ES6 형식의 자바스크립트 파일을 ES5로 자동 변환하여 구 브라우저에서 쉽게 사용가능하다. 또한 로더는 html, css, font 등의 파일을 자바스크립트로 변환하여 모듈로서의 역할을 하게 한다. 이 파일들을 변형하는 이유는 웹팩이 자바스크립트 모듈밖에 인식하지 못하기 때문이다.
- 옵션
웹팩은 단순히 번들링(bundling = 존속성이 있는 파일들을 그룹화하여 하나의 파일로 패키징하는 과정)만 하는 것이 아니다. 웹팩은 번들링 수행 전에 필요한 사전 설정 작업들도 제공한다. (사전 설정은 설정파일에서 옵션을 통해 설정 가능하다.)
// webpack.config.js
const path = require("path");
module.exports = {
entry : "./src/index.js",
output : {
filenname : "main.js",
path : path.resolve(__dirname, "dist"),
},
mode : "production",
optimiization : { minimizer : [] },
};- path : 경로 관련 기능들을 제공해 주는 Node.JS 기본 모듈
- entry : 웹팩이 파일을 읽어 들이기 시작하는 부분
- output : output안에 pathsms outpuit으로 나올 파일이 저장될 경로
- mode : 웹팩4에서 추가된 기능. "development"면 개발용, "production"이면 배포용
- optimization : 최적화와 관련된 각종 설정을 할 수 있다.
- minimizer : 빈 배열을 입력하면 코드 압축을 하지 않는다.
4. 모듈 / 웹팩을 사용하는 이유
> 모듈
인터넷 초기에 비하여 스크립트의 크기가 커지고 파일을 분리해야 하는 시점이 오게됨, 모듈화가 잘된 코드는 편하게 유지 보수 할 수 있다.
> 웹팩
// hello.js
const word = "Hello";
export default word;
// world.js
const word = "world";
export default word;<!-- test.html-->
<!DOCTYPE html>
<html lang = "en">
<body>
<div id = "print"></div>
<script type = "module">
import hello from "./hello.js";
import world from "./world.js";
document.querySelector("print").
innerHTML = hello + " " + world;
</script>
</body>
</html>서로 다른 기능을 하는 함수를 각각의 모듈로 구현해서 사용하고 있다면, 사용하는 페이지가 하나일지라도 각각의 모듈(js) 파일을 따로따로 네트워크로 요청하게 된다. (개발자 도구 네트워크 환경을 보면 두개의 js파일이 네트워크에서 다운로드 된다. 모든 리소스를 따로 다운받는 다면 다운로드 시간이 너무 길고 웹팩은 이를 줄이기 위해서 등장했다.)
5. 모듈 / 웹팩 더 알아보기
> 웹팩
- Browserify
- Parcel
- 바벨
> 참고자료
- https://ko.javascript.info/modules-intro
'IT 도서 리뷰 > 개발자가 되기 위해 꼭 알아야 하는 IT 용어' 카테고리의 다른 글
| [PART1] 웹/디자인 - TERMS 15 (2) | 2024.11.01 |
|---|---|
| [PART1] 웹/디자인 - TERMS 14 (2) | 2024.10.28 |
| [PART1] 웹/디자인 - TERMS 12 (0) | 2024.10.12 |
| [PART1] 웹/디자인 - TERMS 11 (2) | 2024.10.03 |
| [PART1] 웹/디자인 - TERMS 10 (2) | 2024.09.29 |