번들러란?(여러개의 파일들을 하나의 파일로 묶어줌)

(webpack, parcel 등이 있고 webpack을 주로 사용함)
우리가 파일 1개를 요청하고 응답하는데 서버가 1초가 걸린다고 가정해보자.
100개면 100초, 10000개면 10000초다.
여기에 수많은 사용자가 사이트를 이용할 경우, 응답을 제때 못하는 네트워크 병목현상을 초래할 수 있다.

파일들을 하나의 파일들에다 넣으면 네트워크 병목현상을 피할 순 있겠지만, 개발자 입장에서 수만줄의 코드를 유지보수해야하니 가독성 면에서 지옥일 것이다.
이를 해결코자 나온것이 번들러.

여러 js파일들을 하나의 js파일로,
여러 css파일들을 하나의 css파일로,
여러 png파일들을 하나의 png파일로,

webpack은 앱에 필요한 모든 모듈을 알아서 매핑해주며, 매핑된 결과를 가지고 하나 이상의 번들을 생성함.
모듈 : 프로그램 내부를 기능별 단위로 분할한 부분
코드를 여러개의 파일로 분리.

• 자주 사용 되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
• 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
• 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
• 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
• 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 - 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

모듈 단위 코딩

앞에서 이야기 한 것 같이 번들러를 사용하면 모듈 단위의 코딩이 가능합니다. 모듈 단위 코딩을 하게 되면 각 모듈이 독립적인 공간임으로 앞서 문제가 되었던 중복된 이름으로 인해 예상치 못한 에러가 발생하는 것을 막을 수 있습니다.

또한, 모듈 단위로 기능을 구분하여 코딩이 가능하기 때문에 코드의 가독성이나, 유지보수를 신경쓰며 코딩을 할 수 있습니다.

ES6 버전 이상의 스크립트를 사용 가능

webpack은 로더(babel-loader)를 통해

(*Babel : ES6 이상의 자바스크립트 문법을 ES5 버전의 자바스크립트 문법으로 변환시켜주는 트랜스파일러)

바벨을 사용할 수 있습니다. 이를 통해 ES5만 지원하는 오래된 브라우저에서도 ES6 이상의 문법으로 이루어진 JS 파일을 작동할 수 있게 해줍니다.

SASS를 사용 가능

webpack은 style-loader와 css-loader, sass-loader라는 로더를 사용하여 SASS를 CSS로 컴파일하여 사용할 수 있게 만들어줍니다.

요약

기술의 발전으로 웹 사이트의 규모가 커지면서 다양한 문제가 발생하였습니다. 이를 해결하기 위해 등장한 것이 Bundler입니다.

Bundler를 사용하게 되면 네트워크 병목 현상을 해결하고, 모듈 단위의 코딩을 통해 가독성과 유지보수 효율을 높일 수 있습니다. 또한, 로더를 통해 ES6, SASS 등을 변환하여 오래된 브라우저에서도 해당 문법을 읽을 수 있도록 해줍니다.