현대 웹 개발은 굉장히 복잡하기 때문에, 개발자가 코드에만 집중할 수 있도록하는 다양한 프레임 워크와 라이브러리가 존재한다. 예를 들어, CRA는 리액트 개발 환경 구축 없이, 빌드를 자동화 해준다. 자바스크립트 버전이나 Lint, 컴파일에 신경 쓰지 않고 웹 개발이 가능하다.
하지만, 자동으로 구축된 개발 환경의 빌드 과정을 알고 모르는 것은 차이가 크다. 자동 설치된 문서가 프로젝트에 필수적인지 알 수 없어 문제가 발생할 수 있다.
번들러
과거 웹 개발과 다르게, 상호 작용이 많은 서비스들이 생기면서 방대한 양의 코드와 여러 모듈화된 파일들을 관리하기가 어려워졌다. 때문에 다음과 같은 문제가 발생한다.
- 전역 범위를 갖는 수백 개의 자바스크립트 파일의 중복 선언
- 모듈화 된 여러 자바스크립트 파일로 인한 느린 로딩
- 수동적인 웹 개발 루틴 ( 파일, 이미지 압축, CSS 전처리기 변환 등 )
이 문제들을 해결하기 위해 번들러가 등장한다.
번들러는 애플리케이션을 구성하는 모든 자원들을 하나로 합쳐주는 도구이다.
번들러를 사용하면 다음과 같은 효과를 얻을 수 있다.
- 모듈 단위의 코드 작성
- 네트워크 병목 완화 ( 최적화 )
- 웹 개발 루틴 자동화
대표적인 번들러로 웹팩부터 Rollup, Parcel, Browserify 등이 있다.
웹팩
웹팩은 가장 많이 쓰이는 모듈 번들러다.
모듈 번들러
모듈은 특정 기능을 갖는 코드의 작은 단위다. 마찬가지로, 웹 애플리케이션을 구성하는 특정 기능의 자원 ( JS, HTML, CSS, Font ... )을 모두 모듈이라고 한다. 번들러는 이 모든 파일을 하나의 JS 파일로 압축한다. 덕분에, 서버와 여러 번 통신할 필요가 없고, 최적화로 인하여 로딩 속도도 빨라진다.
과거에는 모든 JS 파일의 변수를 확인하여 중복 선언을 스스로 피해야 했기 때문에 모듈 단위의 개발이 매우 어려웠다. 하지만, 웹팩은 번들링을 통해 이 작업을 대신 수행해주기 때문에 모듈 단위 개발이 훨씬 더 편리해졌다.
트랜스파일
자바스크립트는 시간을 거쳐 ES6, ES7 등 새로운 스펙이 등장한다. 하지만, 몇몇 브라우저는 최신 스펙에 맞춰 빠르게 호환성 업데이트가 되지 않는다. 그래서 최신 버전의 자바스크립트 코드를 하위 버전으로 변환시켜 각각의 브라우저에 대응하는 과정이 필요하다. 이를 트랜스파일이라고 한다. 웹팩 안에 babel이라는 트랜스파일러가 이를 담당한다. 트랜스파일은 다른 언어에 코드로 변환하는 컴파일의 개념과 다르다.
