CRA (Craete-React-App) CLI 도구를 이용해 React 초기 환경 세팅을 자동으로 해줘서 매우 편한데 대표적으로 Webpack, Babel이 있다. '알아서 세팅해주니 좋네'보단 why에 포커스를 두자.
📌 웹팩
Webpack은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러(static module bundler)이다.
Webpack은 애플리케이션을 구성하는 다양한 자원(HTML, CSS, JavaScript, 이미지 등)을 모듈로 보고 의존 관계를 가진 모듈을 하나의 번들로 묶어준다. 이렇게 번들링된 자원은 브라우저에서 로딩할 수 있는 형태가 되며, 이를 이용하여 웹 애플리케이션을 실행할 수 있다.
중요한 것은 자바스크립트만 모듈이 아니라 웹 어플리케이션 동작에 필요한 구성요소 모두 하나의 모듈이다.
📌 웹팩 그래서 왜 사용하나?
등장 배경
그전에 웹팩의 등장 배경에 대해 알아 볼 필요가 있다.
과거에는 자바스크립트 파일을 <script> 태그로 웹 페이지에 직접 로드하는 방식이 일반적이었다.
<!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>Webpack Demo</title>
</head>
<body>
<script src="src/app.js"></script>
<script src="src/test.js"></script>
</body>
</html>
아래의 코드는 app.js에서 전역 변수 num을 선언했고, test.js는 변수 num을 참조하고 있다.
// app.js
var num = 10;
function getNum() {
console.log(num);
}// test.js
console.log(num);
브라우저 콘솔을 살펴보면 이처럼 10이 출력된다.
각 js파일을 하나의 HTML 파일 안에서 로딩했기 때문에 전역 공간에 선언된 변수 num을 참조하기 때문이다. 그렇다는건 다른 누군가가 변수 num이 이전에 선언되었다는 사실을 모르고 중복 선언을 한다면 값이 바뀌게 된다.
이처럼 스크립트 파일 로드 방식은 코드의 복잡도가 증가하고, 유지보수가 어려워지는 문제가 발생하게 된다.
이러한 문제점을 해결하기 위해 IIFE(즉시실행함수)를 이용해 자체 스코프를 가지게 외부에서 접근하지 못하도록 은닉화하였고, 이 방식으로 파일 모듈화를 실현한 것이 commonJS, AMD다.
하지만 모듈 시스템의 등장에도 불구하고, 웹 애플리케이션은 여전히 스크립트 파일을 로드하는 방식을 사용하였기 때문에 이러한 문제를 해결하기 위해 웹팩과 같은 모듈 번들러가 등장한다.
웹 개발 작업 자동화 도구
현대의 자바스크립트는 많은 발전을 하면서 웹 프론트엔드 개발의 규모가 커지게 되고 이를 보다 효율적으로 처리하기 위한 도구들이 필요해졌다. Gulp, 웹팩과 같은 자바스크립드 빌드 도구들이 등장하게 되고 이로 인해 개발 생산성 향상과 높은 성능의 웹 애플리케이션을 만들 수 있다.
빠른 로딩 속도와 높은 성능
다양한 모듈을 하나의 파일로 번들링 함으로서 웹 페이지 자원 요청 횟수를 줄여 초기 로딩시간을 줄일 수 있고, 코드 스플리팅으로 자바스크립트 파일을 분산 관리하여 로딩시간을 최소화 함으로서 사용자 경험을 향상 시킬 수 있다.
웹팩 API에 대해선 공식문서에 잘 나와있으니 참조
https://webpack.kr/guides/entry-advanced/
참조
https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html
'TIL' 카테고리의 다른 글
| grid item이 전체 column을 독점하려면? (0) | 2023.11.28 |
|---|---|
| Webpack 환경 변수 (0) | 2023.11.26 |
| REST API + RESTful API (0) | 2023.05.02 |
| 'module' is not defined. eslint (0) | 2023.05.01 |
| [TIL] git remote update (0) | 2021.10.24 |
