Webpack & Babel

Webpack

웹팩은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다.

 

번들러(Bundler)의 탄생 배경

원시시대의 웹사이트

웹의 초창기 떄는 규모가 매우 작았다. 따라서 웹을 구성하는 HTML이나 JS파일의 크기가 지금에 비해 훨씬 작았고, 서비스의 유지보수도 그렇게 어렵지 않았다. 하지만 점점 기술이 발전하면서 파일 하나당 코드의 양과 웹을 구성하는 파일의 수 또한 커지게 되었으며, 여기저기서 문제들이 발생했다. 대표적인 문제점은 아래와 같다.

1. 중복된 이름으로 인한 충돌, 위험
   - 대규모 웹페이지의 경우, 엄청난 개수의 JS파일로 구성되며,
     여러 사람이 웹서비스 개발에 참여하므로 서로 만든 함수명과 변수명이 겹치는일이 일어나기 마련이다.
   
   
2. 파일 전송 속도 문제
   - 사용자가 브라우저에서 URI를 입력하면 서버는 그에 해당하는 파일을 사용자에게 제공해 준다.
     웹 어플리케이션을 구성하는 파일의 양이 많을수록 사용자에게 해당 파일을 제공하는 시간이 오래 걸리게 된다.
   - 파일 한개 당 크기도 크다면 사용자는 요청한 웹 서비스를 받기까지 상당히 오랜시간을 기다려야 한다. 
     그렇다고 파일 하나에 모든 스크립트를 작성하기엔 추후 유지보수 측면에서 최악이다.

 

번들러의 등장

기본적으로 위의 문제들을 해결하기 위해, 여러개의 파일을 하나로 묶어주는 "번들러"가 등장하게 된다.
대표적으로 webpack, parcel, rollup이 존재한다. 이 중에선 webpack이 주로 사용된다.

번들(Bundle)
- 소프트웨어 및 일부 하드웨어와 함께 작동하는데 필요한 모든 것을 포함하는 Package이다.
- 각각의 모듈들에 대해 의존성 관계를 파악하여 하나 또는 여러개의 그룹(번들)로 볼 수 있다.

 

번들링했을때의 장점

1. 같은 타입(html, css, js)의 파일을 묶어서 요청 / 응답을 받기 때문에 네트워크적으로 비용이 줄게 된다.
   
   
2. 여러개의 파일을 묶어 하나의 번들로 만들때 파일끼리의 연관관계를 알아서 확인하여 사용하지 않은 파일은 포함하지 않기 때문에, 번들의 크기를 줄여 페이지 로딩을 더욱 빠르게 한다.
   
   
3. 번들러를 사용하면 모듈 단위 코딩이 가능해진다. 각 모듈이 독립적인 공간이므로 앞에서 문제가 됐던 변수명 중복으로 인한 에러를 막을 수 있다. 또한 코드의 가독성과 유지보수의 편리함을 향상시킨다.
   
   
4. Webpack은 로더(babel-loader)를 통해 ES6 이상의 JS 문법을 ES5 버전의 JS 문법으로 변환시켜줄 수 있다.
   이를 통해서 ES5만 지원하는 오래된 브라우저에서도 ES6이상의 문법으로 이루어진 JS파일을 실행할 수 있게 한다.

 

 

---

Babel

대표적인 자바스크립트 트랜스파일러이다.
(트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른언어로 변환시키는 것이다. 
이를 해주는 것이 트랜스파일러이다.)

 

트랜스파일링이 왜 필요한가??

모든 브라우저가 ES6의 기능을 제공하지 않기 떄문에 ES5코드로 변환시키는 과정이 필요하기 때문이다.

 

 

---

정리

바벨은 최신 JS문법으로 쓰여진 코드가 업데이트 되지 않은 브라우저에서도 작동할 수 있도록 구형 문법으로 변경해주는 역할을 한다면, 웹팩은 그렇게 변경된 파일들을 이제 최종적으로 모아서(번들링해서) 배포하기 좋게끔 정리해주는 역할을 한다고 할 수 있다. (react프레임워크를 사용하다보면 필요성을 자동으로 느끼게된다고 한다)

 

---

출처
https://velog.io/@timosean/Web-%EB%B2%88%EB%93%A4%EB%9F%ACBundler%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%ED%95%84%EC%9A%94%EC%84%B1

[Web] 번들러(Bundler)의 개념과 필요성

https://velog.io/@dbsbest10/Webpack-%EA%B3%BC-Babel%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

Webpack 과 Babel이란 무엇일까?