1. Webpack?
출처:webpack공식
웹팩은 무엇일까?
그전에 Bundler는 무엇일까?
2. Bundler?
(Bundler없이)완성된 웹사이트를 로딩을 하면 만드는데 필요했던 js나 이미지 등 여러 파일들을 전부 하나씩 로드를 해온다..
즉, 서버와의 로딩이 많을 수록 앱은 느리게 작동
추가로 수많은 js파일들이 서로같은 변수나 함수의 이름을 사용할때 ! 충돌!
요런 문제들을 해결하기 위해 등장한것이 바로 Bundler!
(여러개의 파일들을 묶어주는 도구)
- Webpack
- Broserify
- Parcel
- Rollup
등등
다시 Webpack!
그중 웹팩을 공부해볼것이고, 웹팩을 이용하면 하나의 js파일에 js파일 뿐만이 아니라, css나 여러 이미지 등 모든걸 하나로 합치고! 자동화 할 수 있다.
(믹서기..?)
3. Module?
출처:js.info
개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
즉 모듈이란? 자바스크립트를 이용하여 만들게 되는 app의 규모가 커지게되면서 여러 충돌도 일어나게 되었고
즉 파일을 분할해야할 필요성이 생기며 탄생한 분할파일 그자체이다.
또한 모듈은 대개 클래스 하나 혹은 특정 목적을 가진 복수의 함수로 구성된 라이브러리이다.
추가+ JavaScript에서의 모듈이란, ES2015(ES6) 이후부터 제공하는 import / export 키워드를 통해 스크립트의 변수나 함수를 타 스크립트에서 이용할 수 있도록 기능을 공유하는 것이다.
module을 이용한 번들링
hello.js 와 world.js는 export 해주었다.
<html>
<head> </head>
<body>
<h1>Hello, Webpack!</h1>
<div id="root"></div>
<script type="module">
import hello_word from "./source/hello.js";
import world_word from "./source/world.js";
document.querySelector("#root").innerHTML = hello_word + " " + world_word;
</script>
</body>
</html>🛠단점
여러 파일을 다 받아와야하니 파일 개수가 많아지면...
네트워크 커넥션이 많아질수록 사용자,제공자 입장에서 더많은 컴퓨팅 파워 사용
서비스 이용자 입장 : 서비스 속도 down
서비스 제공자입장 : 컴퓨터 자원 up >> money up
4. Webpack을 사용하면?
Refactoring
리팩터링(refactoring)은 소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 주로 가독성을 높이고 유지보수를 편하게 한다. 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다. 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 바꾸고 개선하는 유지보수 행위이다.
리팩터링의 잠재적인 목표는 소프트웨어의 설계, 구조 및 구현을 개선하는 동시에 소프트웨어의 기능을 보존하는 것이다. 리펙터링은 코드의 가독성을 향상시키고 복잡성을 감소시키는 효과를 가지며, 이러한 이점은 소스 코드의 유지 보수성을 개선하고 확장성을 개선하기 위해 더 단순하고, 깔끔하거나, 표현력이 뛰어난 내부 아키텍처 또는 객체 모델을 만들 수 있게 한다. 그리고 소프트웨어 엔지니어는 더 빠르게 수행되거나 더 적은 메모리를 사용하는 프로그램을 작성해야 하는 지속적인 과제에 직면해 있기에 성능 향상이 리팩터링의 또다른 목표가 된다.
웹팩을 사용하면 얻을 수 있는 효과는?
구동되는 방법은 그대로 유지하면서 내부의 코드를 더욱 효율적으로 바꿀 수 있다.
코드의 모습은 유지하되 구형 브라우저에서 사용가능
여러개의 파일을 하나로 묶어주는 bundelr기능
