1. 번들링
1-1. 번들링이란?
번들링은 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다.
그럼 프론트엔드 개발자 입장에서의 번들은 무엇일까? 바로 "사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음"을 의미한다.
사용자가 브라우저를 열고 주소를 입력하면, HTML, CSS, JavaScript 파일을 그대로 전송하는 것이 아니라, 번들링한 파일을 전송하게 된다.
2. 웹팩
2-1. Webpack이란?
Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다.
모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.
공식문서 https://webpack.kr/
빌드와 번들링
- 빌드: 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업
- 번들링: 파일을 묶는 작업 그 자체를 말한다. 여기서 파일은 의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함 되어 있는 모듈을 의미한다. 즉, 번들링은 모듈 간의 의존성 관계를 파악해 그룹화 하는 작업
Webpack의 필요성
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
Webpack이 없다면 각 자원들을 일일히 서버에 요청해 얻어와야 하지만, Webpack이 있다면 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다. - 개발자가 원하는 최선의 개발 방식 선택할 수 있게 지원해준다.
예를 들어 Webpack loader를 사용하면 일부 브라우저에서 지원하지 않는 JavaScript ES6의 문법들을 ES5로 번환해주는 babel-loader를 사용할 수 있게 된다.
긍정적으로~✍️(◔◡◔)