웹팩 등장 배경에 대한 이해
Programming 2024. 2. 13. 22:15이 글은 아래 Radin님의 글을 요약하였습니다.
https://velog.io/@radin/webpack-1
velog
velog.io
------------------------------------------------------------------------------------------------------
# Webpack에 대한 이해
1. 전역 스코프 공유 문제
자바스크립트는 script 태그로 외부 스크립트 파일을 가져올 수 있지만 파일마다 독립적인 스코프를 갖지 않는다. 분리된 파일을 합쳐 하나의 객체로 만든다. 그렇기 때문에 동일한 함수명이나 변수명을 사용하면 충돌하므로 스코프와 의존성 관리 문제를 해결할 수 없어 모듈화 구현이 어려웠다.
| <html> <body> <script src="./math.js"></script> <script src="./app.js"></script> </body> </html> |
2. IIFE를 활용한 스코프 분리
정의 즉시 실행하는 JS의 함수는 즉시실행함수(IIFE, Immediately Invoked Function Expression)라고 한다. 이것을 이용하면 전역 스코프 공유 문제를 해결할 수는 있지만 여전히 모듈화가 어렵다.
| var math = (function () { ...(중략)... })(); |
3. CommonJS와 AMD
2009년에 등장한 CommonJS 덕분에 비로소 각 파일의 독립적인 스코프를 구현이 가능해졌다. exports 키워드로 모듈을 만들고 require() 함수로 모듈을 import 할 수 있게 되었다. 전역변수와 지역변수를 분리하여 모듈을 독립으로 실행할 수 있게 되었다. 하지만 모든 파일이 로컬에 존재해야 하므로 동기적으로 동작한다. 필요한 모듈 모두를 내려 받을 때까지 아무것도 할 수 없어 성능이 이슈가 있다. AMD(Asynchronous Module Definition)은 CommonJS의 이러한 단점을 보완한다.
4. ESM(EcamScript Modules)
2015년, ES6에는 정식으로 모듈 시스템이 도입되었다. import와 export 키워드로 모듈화가 가능하게 되었으나 CSS와 이미지 파일을 포함한 모든 파일을 네트워크를 통해 가져와야 하므로 통신에 대한 부하가 크다는 단점이 있다.
| export default App; import App from './App.js' |
| import a from './a.js' import b from './b.js' import c from './c.js' |
5. Webpack 등장
앞에서 언급된 문제점을 해결하기 위해 웹팩이 등장했다. 웹팩은 여러 모듈을 모아 번들링하여 하나의 파일로 병합 및 압축해주는 도구인 모듈 번들러의 한 종류이다. 이에 따라 웹팩은 아래의 문제를 해결하고자 한다.
1) 자바스크립트 변수 유효 범위: ES6 문법과 모듈 번들링을 통해 스코프 및 변수 유효 범위의 문제를 해결한다.
2) 브라우저별 HTTP 요청 숫자 제약: 여러 파일을 합쳐 무분별한 네트워크 통신 요청을 감소시켜 브라우저별 HTTP 요청 숫자 제약을 회피한다.
3) Dynamic Loading: Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩함으로써 동적인 모듈 로딩을 제공한다.
결국 웹팩은 Javascript와 브라우저, 네트워크 환경의 부족함을 보완하기 위해 등장했다고 봐야 한다. 처음 프로그래밍 할 때 만 해도 웹팩은 막 생겨난 신생 프로젝트였는데 어느새 발전하여 웹에서 빠져서는 안 될 기술이 되어버렸다. 정말 격세지감을 느낀다.
'Programming' 카테고리의 다른 글
| DynamoDBMapper Java (0) | 2023.12.27 |
|---|---|
| SQL? NoSQL? NO! (1) | 2023.12.27 |
| Dynamo DB 특징 및 단점 (1) | 2023.12.27 |
| 격세지감 크로스플랫폼 (0) | 2023.12.09 |
| MySQL SQL Password Length 오류 (0) | 2022.06.30 |
