지금의 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발하는 방식이다. 즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제점이 생긴다.
위의 문제들을 해결하기 위해 등장한 것이 모듈 번들러로 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만드는 도구이다.
의존성이란...?
1. 의존은 변경에 의해 영향을 받는 관계를 의미한다.
2. 한 클래스가 다른 클래스의 메서드를 실행할 때 이를 '의존한다'라고 한다.
3. A가 B를 사용해야만 A의 역할을 수행 할 수 있는 경우이다.
오버헤드란...?
프로그램의 실행흐름 도중에 동떨어진 위치의 코드를 실행시켜야 할 때, 추가적으로 시간, 메모리, 자원이 사용되는 현상이다.
트랜스 파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하고, 이를 해주는 것이 트랜스 파일러이다. 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에, 이를 ES5 코드로 변환시키는 과정이 필요하기 때문에 필요하다. ES6+ 기능 뿐만 아니라 JSX를 자바스크립트로 변환시킨다거나(Babel) 타입스크립트를 자바스크립트로 변환을 시키는 역할(타입스크립트 트랜스 파일러)도 트랜스 파일러의 기능 중 하나이다.
*보통 프론트엔드 프레임워크, 라이브러리를 사용해서 개발할 때, 모듈 번들러에 트랜스 파일러를 추가해서 사용하는 방식을 사용한다.