[JS] 번들러란 무엇인가?

 

React로 프로젝트를 만들다 보면 자주 보는 친구들이있습니다. Webpack, parcel..

프로젝트를 개발하면서 직접적으로 만질 일이 (아직까지는) 많지 않아서 그냥 지나쳐버리곤 했는데

 

기초가 부족한 것 같아 차근차근 공부를 시작하니 번들러에 대해서 하나도 알지 못하고 있었던 것 같아, 이번 포스팅을 통해서 해당 개념을 다시금 잡아보려 합니다.

 

그래서 번들러가 뭔데?

간단하게, 여러 파일들을 하나로 묶어주는 역할을 합니다. 아마, 남자들은 번들이라는 의미를 다른 플랫폼에서 많이들 들어봤겠네요

대충 게임 싸게 묶어서 판다는 뜻

이거 생각하면 어렵지 않습니다. 여러 파일들을 묶어서(번들로) 관리하게 해주는 도구라고 생각하면 됩니다.

 

그럼 왜 만들어졌는데?

옛날 웹이야 크기도 작고, 파일도 몇개 되지 않아서 큰 문제가 되지 않았으나 웹이라는 생태계가 점점 커짐과 동시에 한 프로젝트에 들어가는 파일들이 상당히 많아졌습니다. 그 중에서도 가장 큰 문제는 다음 두 가지 였는데,

 

구성하는 파일들이 많아지다보니까 느려진다.

해당 웹 페이지의 구성 파일들이 많아지다보니, 이를 모두 전송하는데 너무나 많은 시간이 걸렸습니다.

많은 양의 데이터를 전송해야하는건 데이터를 받는 사용자 입장에서도, 데이터를 전송하는 업자 입장에서도 엄청난 부담이었습니다.

 

이름이 너무 많이 중복된다

구성 파일들이 많아진다는건, 중복된 이름의 파일이 생길 수도 있음을 말합니다.

한 사람이 모두 개발하는게 아니고, 여러 사람이 개발에 참여하기때문에 이러한 중복 문제가 빈번하게 일어났습니다.

 

이외 등등..

 

그런 당신을 위해 준비했습니다

이러한 문제들로, 위에 말했던 번들러들이 등장하게 되었습니다.

번들러들은 라이브러리마다 차이는 있겠으나, 파일들을 효율적으로 묶어주는 번들링이라는 작업을 하게됩니다.

 

대표적인 번들러인 Webpack은 서로 연관있는 JS 파일들을 하나의 번들로 묶어줍니다.

그럼, 번들링을 하면 어떤 장점이 있을까요?

 

네트워크 코스트 절감

이전처럼 각각의 파일을 모두 송/수신 하지 않고, 같은 타입의 파일들을 묶어서 송/수신하게 됩니다.

또, Webpack 4 이상부터는 코드 압축과 같은 기능들도 지원하니 사용자는 더욱 쾌적함을 느낄 수 있습니다.

 

구형 브라우저 지원

Webpack의 경우 Loader가 ES6 형식의 자바스크립트 파일을 ES5로 변환하여 사용가능하게 합니다.

이를 통해 크롬과 같은 최신형 브라우저에서도, 익스플로러같은 구형 브라우저에서도 사용이 가능합니다.