[기초] 모듈 번들러와 트랜스파일러

모듈 번들러

• 모듈 번들러 : 번들링하는 툴(대표 : 웹팩)

• 번들링 : 개발 편의로 모듈로 분리해 개발을 하고 배포 전 하나의 파일로 묶는일

• 이로써 얻는 장점은 묶어진 만큼 서버에 요청하는 갯수가 줄어 사용자 경험도 향상시킬 수 있고 네트워크 비용도 줄일 수 있다.

• Webpack(웹팩)

  • 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 자바스크립트 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.

    

  • Webpack이 자바스크립트 파일을 번들링하기 전에 Babel을 로드하여 ES6+ 코드를 ES5 코드로 트랜스파일링하는 작업을 실행하도록 설정할 것이다. 그리고 Sass를 사용하는 경우, Sass 트랜스파일링도 Webpack에서 관리하도록 할 것이다.

트랜스파일러(바벨)

• 트랜스파일러 : 트랜스파일링하는 툴
• 트랜스파일링(Transpiling) : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위
• Babel(바벨) : ES6+ 코드를 ES5 코드로 트랜스파일링하는 작업
• 트랜스파일러가 필요한 이유는 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5 코드로 변환시키는 과정이 필요하다. 트랜스파일러는 이 작업을 수행해준다. 사실 ES6+의 기능 뿐만 아니라
  • 리액트의 JSX를 자바스크립트 코드로 변환시킨다거나 타입스크립트를 자바스크립트로 변환시키는 등의 역할도 트랜스파일러의 기능 중에 하나이다. ES6+나 JSX를 변환시키는 트랜스파일러로는 바벨(Babel)이 있으며 타입스크립트를 변환시키는 도구로는 타입스크립트 트랜스파일러가 있다.
  • 보통 프론트엔드 프레임워크 및 라이브러리를 사용해서 개발할 때 모듈 번들러에 트랜스파일러를 추가하는 방식을 사용한다.