모듈과 번들러 (Module Bundler) 넌 누구니?!
리액트로 개발하는 프론트엔드 개발자들은 리액트에만 집중하고 웹팩, 바벨, 번들링 도구들이 어떻게 돌아가고 동작하는지는 모르고 지나간다. 나를 포함 프론트엔드 개발 환경을 이해하기 위해서는 꼭 알아야 된다고 들어서 이번에 정리해 보려고 한다.
Webpack과 babel에 들어서기 앞서 모듈 + 번들러에 대해서 알아보자!
모듈이란?
모듈(Module)이란 프로그래밍 관점에서 특정 기능을 갖는 파일 하나하나, 특정 기능을 갖고 있는 작은 코드 단위를 의미한다. 우리가 개발을 하다보면 가독성과 유지보수 향상을 위해 파일을 여러 개로 분리를 하는데, 이때 분리된 파일 각각을 모듈이라고 부른다.
모듈이 필요한 이유
브라우저 내에서 자바스크립트는 여러 파일로 분리해도 하나의 파일 안에 있는 것처럼 전역을 공유한다. 그렇기 때문에 호출되는 순서가 중요하다. 하지만 이렇게 개발하다 규모가 커치면 오류를 찾기 힘들고 유지보수가 어려워진다. 그래서 파일 단위로 변수를 관리하기 위해서 모듈이 필요하다.
웹 환경은 발전하는 컴퓨터의 성능과 관계없이 요청과 응답으로 이루어져 있기 때문에 파일이 늘어나면 늘어날 수록 요청과 응답에 걸리는 시간도 비례하기 때문이다.
번들러?
따라서 우리는 모듈화된 파일 구조는 유지하면서 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있는 환경을 만들어주는 것이 필요하다.
이를 수행하는 것이 바로 번들러 (Bundler)이다. 대표적인 번들러에는 Webpack, Rollup, Parcel 등이 있으며, 이들은 서로 연관성있는 여러 파일 즉, 모듈들을 하나의 번들 파일로 묶어주는?합쳐주는 역할을 한다.
모듈 번들러가 필요한 이유
모듈을 이용하는 것이 좋지만 모든 파일을 네트워크 통신을 통해 가져와야 한다. 즉, 파일 하나하나 요청하고 가져온다면 로딩 속도는 늦어질 것이며 브라우저에서 파일단위 모듈 시스템을 이용하는 것은 네트워크 비용 낭비를 유발할 수 있다.
이러한 로딩 속도 문제를 해결하기 위해 모듈 번들러가 나오게 됐다.
출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다
https://velog.io/@ellie12/번들러-웹팩-바벨
https://devlog.jwgo.kr/2018/12/03/webpack-babel-react/
https://velog.io/@dbsbest10/Webpack-과-Babel이란-무엇일까
https://velog.io/@inust33/2주차-개념-스터디-웹팩과-바벨에-대해
https://velog.io/@dea8307/모듈-번들러-webpack과-babel