티스토리 뷰
웹팩이 등장한 이유는 모듈화 라는 키워드와 관련이 있습니다.
모듈화가 왜 필요했는지 이해해보기 위해 잠깐 역사공부를 해보자면
과거에는 자바스크립트의 역할이 단순했습니다.
html에 script태그를 넣는 것만으로 충분했습니다.
현대의 웹 애플리케이션에서 자바스크립트의 비중이 커지면서 기능이 복잡해지고 코드도 커졌습니다.
이렇게 커진 자바스크립트 파일을 하나의 파일로 작성하면 가독성 및 유지관리에 문제가 있습니다.
그래서 기능별로 파일을 나누고자 했습니다.
아래 코드처럼 자바스크립트 파일을 기능별로 나눠서 html파일에 script태그로 불러서 사용했다고 생각해볼게요.
script태그를 사용해서 외부의 스크립트 파일을 가져와서 사용할 수는 있지만 파일마다 독립적인 스코프를 가지고 있지 않고 모든 스크립트가 하나의 전역객체를 공유하고 있습니다.
그래서 math.js에서 선언식으로 만든 함수를 app.js에서 호출할 수 있고, 심지어 재할당도 가능합니다.
위에서는 마지막에 app.js를 불러왔기 때문에 app.js에서 선언한 sum=1이 적용되었습니다.
자바스크립트 파일이 100개라면 변수명을 겹치지 않게 쓰는게 엄청 어려울겁니다.
그래서 es6부터 모듈이란 개념을 사용할 수 있게 되었습니다.
(처음 js 배울때부터 자연스럽게 import했던게 사실 es6때부터 가능한거였다니... 그전엔 대체 얼마나 거친 삶을 사신겁니까..ㄷㄷ)
ES6 모듈 사용
위와 같이 모듈을 사용하면 파일마다 각자의 스코프를 사용하게 되어서 기능별로 변수명 관리가 가능해집니다.
이젠 모듈이라는 것을 이용해 자바스크립트 파일을 기능별로 나눠서 작성할 수 있게 되었습니다.
근데 자바스크립트의 양이 점점 많아지면서 또 다른 문제가 발생했습니다.
모듈파일이 너무 많아서 http요청이 오래걸립니다. 우리가 주로 사용하는 http 요청에는 한번에 받아올 수 있는 파일의 갯수가 정해져 있어서 파일 갯수가 많아지면 로딩이 오래걸리게 됩니다. 요청하는 파일의 크기와 별개로 갯수가 많으면 비효율적입니다.
그래서 요청수를 줄이기 위해 모듈을 하나로 압축하고 합쳐주는(번들링) 모듈 번들러 인 '웹팩'이 필요합니다.
참고로 웹팩이 번들링 하는 파일은 js 뿐만아니라 html과 css파일도 번들링을 해줍니다.
웹팩을 사용해서 많은 파일들(모듈)을 병합하고 압축해서 하나의 번들로 만들면
브라우저가 애플리케이션을 실행시키기 위해 읽어야 하는 파일이 줄어들기 때문에 로딩시간이 빨라집니다.
즉, 네트워크 요청 자체가 줄어듭니다.
cra프로젝트에서 build 해보시면 build폴더에 js,css 파일 하나씩만 있는거 보셨죠? 그게 웹팩 덕분이였군요..
이제 이 이미지가 이해되네요.
두번째 이유는 모듈간의 의존성문제를 해결합니다.
서로 의존관계에 있는 모듈을 알아서 계산해서 번들링 해줍니다.
그래서 우리가 번들링을 어떻게 할지 신경쓰지 않고 모듈단위로 개발할 수 있도록 해줍니다.
덕분에 코드의 가독성도 높아지고 스코프에 신경쓰지 않고 개발할 수 있습니다.
Code Splitting
이렇게 하다보니 또 다른 문제가 발생했는데요,
자바스크립트가 커도 적당히 커야되는데 너무너무 큰 프로젝트의 경우에는
모든 자바스크립트 모듈을 하나로 합치는 것도 문제입니다.
애플리케이션이 시작할때 js번들링 파일을 가져올텐데, 사이즈가 커서 이 파일을 읽는데 오래 걸릴 수 있습니다.
초기 로딩속도가 늦어지는거죠.
이런 경우에 웹팩의 설정을 통해 코드를 나눠서 필요할 순간에 필요한 코드만 불러올 수 있습니다.
이것을 code splitting이라고 합니다.
바벨은 뭐죠?
자바스크립트 트랜스파일러입니다.
1.크로스 브라우징
크로스 브라우징이라는 이슈를 해결하기 위해 ES6 이상의 자바스크립트나 jsx, 타입스크립트 코드를 하위버전의 자바스크립트 코드로 변환시켜 모든 브라우저에서 동작할 수 있도록 하는 역할을 합니다.
크로스 브라우징?
브라우저마다 지원하는 수준이 달라서 똑같은 코드를 작성해도 보여지는 모습이 달라집니다. 이러한 차이를 최소화해서 브라우저, 환경에 영향을 최소한으로 받고 어디서나 제대로 작동시키기 위해 최적화 하는 작업을 말합니다. 크로스 브라우징 이슈는 코드의 일관성을 망가트리고 혼란스럽게 만드는 요소중 하나입니다.
그래서 바벨은 모든 브라우저에서 호환되는 하위버전으로 바꿔주는 도구입니다.
2.폴리필(polyfill)
바벨을 사용한다고 해서 promise같은 최신 함수를 사용할 수 있는 것은 아닙니다.
바벨은 변환 만 해줍니다.
즉, promise처럼 es6이후에 추가된 함수는 실행할 수 없습니다. 이에 대한 방안이 polyfill입니다.
폴리필은 프로그램이 처음 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 object prototype에 붙여줍니다.
(상속해서 사용할 수 있게 하나봅니다.)
참고자료
[JS] Webpack을 쓰는 이유
Webpack은 여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler)이다. Webpack을 쓰는 이유는 무엇일까? 표준화된 모듈화 기법이 등장한 것은 ES2015부터인데, Webpack…
ingg.dev
https://tecoble.techcourse.co.kr/post/2021-06-30-webpack-intro/
웹팩 이해하기 - 1
그 동안 React.js로 개발을 진행할 때는 항상 CRA(create-react-app)*를 사용하여 개발 환경을 설정하였다. 그래서 CRA…
tecoble.techcourse.co.kr
Babel이란 무엇인가?
오늘은 바벨에 대해서 이야기 해 보려고 한다. 바벨이 무엇이며, 왜 필요하고, 기본적인 사용법이 어떻게 되는지 등등에 대해서 설명해 보도록 하겠다. 먼저 크로스 브라우징(Cross Browsing)에 대해
devowen.com
'Javascript' 카테고리의 다른 글
| 자바스크립트 클로져 뿌시기 (0) | 2022.06.23 |
|---|---|
| 리덕스 / flux패턴, 순수함수, 불변성, 얕은복사(Shallow copy) (0) | 2022.06.19 |
| var,let,const 의 차이, 선언과할당, 호이스팅, 스코프, TDZ (0) | 2022.06.08 |
| 많이 쓰게 될 메소드 Array.from(), 유사배열과 배열 (0) | 2022.03.19 |
| todolist 모두 정리 (0) | 2022.02.28 |