webpackFrontend/webpack & babel2023. 8. 21. 10:42
Table of Contents
webpack?
- 웹팩은 엄청 많이 쓰이는 오픈 소스 모듈 번들러 라이브러리이다.
- 번들러(Bundler)?
번들러는 여러 개로 나뉜 모듈을 하나로 묶어주는 도구이다.
의존성이 있는 것들을 찾아서 그룹핑을 해주는 도구! - 웹팩은 IIFE를 사용해서 번들링을 해서 스코프 충돌에 대한 걱정 없이 안전하게 스크립트 파일들을 연결하거나 결합한다!
- dependency graph를 생성하여 빌드
- 번들러(Bundler)?
- 거대한 자바스크립트 소스코드와 대규모 의존성을 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 되었다.
- 이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 네트워크 쪽의 코스트도 신경써야 한다!
사용하지 않을 때 문제점
1. 글로벌 환경으로 실행되기 때문에 변수 충돌의 가능성
- 아래처럼 lodash를 글로벌 환경으로 로딩한 후 div 태그 안에 Hello World 텍스트를 넣어서 body 태그 안에 넣는 자바스크립트 파일을 만든 후 body 태그 안에 넣어보자.
- 대부분의 페이지 방식의 php, jsp, asp 같은 서버사이드 렌더링에서 사용하는 방식이다.
index.js
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'World'], ' ');
return element;
}
document.body.appendChild(component());index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>- lodash에서 _ 변수를 사용하는데 두번째 이후로 로딩하는 자바스크립트 파일에서 만약 _ 를 다시 정의하면 변수의 충돌이 발생해서 오작동이 일어난다!
- 실제로 jquery에서 사용하는 $는 다른 라이브러리에서 많이 사용되기 때문에 충돌이 일어날 수도 있다!
- 위와 같은 문제를 해결하기 위해서 네임스페스 패턴이나 IIFE 패턴을 사용하여 충돌을 피하는 방법을 사용하게 된다.
2. 로딩 순서 의존성
- 만약 아래처럼 jquery와 jquery 로딩 순서를 바꿨다고 해보자
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack demo</title>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
</head>
<body>
</body>
</html>- 위처럼 순서를 바꾸면 오류가 발생한다!!
- 왜냐하면 jquery-ui가 jquery를 사용하기 때문이다 → 의존성이 있기 때문에 jquery가 먼저 로딩 되어야 한다.
- 이 부분이 모듈 환경으로 넘어간다면 npm이 jquery-ui를 먼저 설치하더라도 의존성이 있는 파일을 알아서 먼저 설치해주기 때문에 의존성을 해결할 수 있다!
3. 로딩 문제
- 페이지가 바뀔 때마다 이전 페이지에서 로딩했던 동일한 자바스크립트 파일들이 대부분 다시 로딩되어져야 한다.
- 모바일이 등장하면서 페이지가 바뀔때 마다 많은 자바스크립트와 css가 로딩이 되는것은 네트워크 트래픽 증가와 속도의 저하를 가져오게 되면서 SPA 프레임웍이 등장하게 된다.
'Frontend > webpack & babel' 카테고리의 다른 글
| webpack으로 React 프로젝트 빌드해보기 =) (0) | 2023.10.08 |
|---|---|
| Babel (0) | 2023.10.08 |
| Loader / Plugin (1) | 2023.10.08 |
| Entry(index.js) / Output (0) | 2023.09.03 |
| webpack과 babel 리액트 프로젝트 생성 (0) | 2022.06.04 |
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
