웹팩이란?
웹팩은 React, Vue, angular와 같은 최신 프론트엔드 프레임워크나 라이브러리에서 대부분 쓰인다고 해도 무방하다.
이는 모듈 번들러로 개발자가 웹 어플리케이션을 만들때 html, css, javascript, image 등이 모두 모듈에 해당한다.
이런 분산된 모듈들을 하나로 묶어줘서 결과물을 반환해주는 역할을 한다.
모듈: 어떠한 기능을 수행하는 작은 코드 단위
모듈 번들링: 여러 개의 모듈(파일)들을 하나의 파일로 병합하여 결과물을 내주는 동작
웹팩이 필요한 이유
- 파일 단위의 자바스크립트 모듈 관리의 필요성
- 개발자를 위한 자동화 기능
- 더 빠른 속도와 성능
파일 단위의 자바스크립트 모듈 관리
자바스크립트는 입문자의 관점에서 꽤 편리하게 사용할 수 있다.
const a = 5;
console.log(a); //5
const logText = () => {
console.log(a); //5
}
logText();전역변수를 값을 가질때 접근성이 뛰어나다.
코드를 작성할때는 편리하다.
하지만 이런 웹 어플리케이션 개발 후 문제가 발생할 수 가 있다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="test1.js"></script>
<script src="test2.js"></script>
</body>
</html>//test1.js
let a = 5;
const showNum = () => {
console.log(a);
}//test2.js
let a = 10;
const showNum = () => {
console.log(a);
}index.html 에서 test1과 test2의 자바스크립트 파일을 다운받아서 사용한다고 해보자.
결과는 아래와 같이 나온다. 이는 변수의 유효범위에서 발생하는 문제이다.
원하는 값이 나오지 않을 수도 있고 에러를 발생해주기는 하지만 어디까지나 코드를 작성하고 실행한 시점에서 알려준다.
개발자를 위한 자동화 도구
웹 어플리케이션을 만들기 위해서 코딩을 하는 과정 중에 결과를 확인하기 위해 매번 코드를 저장하고 브라우저의 새로고침을 누를 필요가 없다.
이 밖에도
- HTML,CSS,JS 의 압축
- IMAGE 압축
등이 있다.
개발자가 보다 어플리케이션 개발에 집중할 수 있도록 자동화 도구의 필요성이 느껴진다.
더 빠른 속도와 성능
빠른 인터넷 속도와 더불어 현대의 동적인 웹 생태계에서 5초안에 유저에게 어떤 피드백을 주지 못하면
유저가 떠나게 된다.
그렇다면 브라우저에서 서버로 요청을하고 응답을 받기까지 로딩 속도를 높여야한다.
브라우저마다 서버로 한번에 HTTP 요청을 보낼 수 있는 수가 정해져있다.
우리가 잘아는 크롬이나 사파리 안드로이드,iOS등은 횟수가 6으로 정해져 있다.
그렇다면 우리는 최대한 횟수를 줄이면서 한 요청으로 많은 모듈을 다운받아야 한다.
그 많은 모듈을 하나의 파일로 압축 또는 번들링, 빌드 해주는 역할을 하는 것이 바로
웹팩이다.
이러한 점을 고려하여 React에서는 자체적으로 lazy-loading을 가지고 있다.
next.js에서도 next/dynamic으로도 경험이 가능하다.
또한 웹팩은 모든 자원들을 미리 로딩하지 않고 필요할 때 요청하는 것을 권장한다.
참고
웹팩이 필요한 이유 | 웹팩 핸드북
웹팩의 등장 배경 웹팩이 등장한 이유는 크게 3가지입니다. 파일 단위의 자바스크립트 모듈 관리의 필요성 웹 개발 작업 자동화 도구 (Web Task Manager) 웹 애플리케이션의 빠른 로딩 속도와 높은 성
joshua1988.github.io
https://web.dev/i18n/ko/code-splitting-with-dynamic-imports-in-nextjs/
Next.js에서 동적 가져오기를 사용한 코드 분할
web.dev
https://nextjs.org/docs/advanced-features/dynamic-import
Advanced Features: Dynamic Import | Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
nextjs.org
https://webpack.js.org/guides/lazy-loading/#root
Lazy Loading | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
