FE

번들러(Bundler)와 트랜스파일러(Transpiler)

SH_Roh 2022. 4. 1. 16:17
반응형

🤔 번들러(Bundler)를 사용해야 하는 이유

초기의 웹 페이지와 서비스들의 규모는 그렇게 크지 않았다. 때문에 이를 구성하는 HTML이나 자바스크립트 파일의 크기도 상대적으로 작았고, 해당 서비스를 유지하는데 큰 무리가 없었다.

 

그러나 기술의 발전으로 컴퓨터 성능이 좋아지고, 네트워크 속도도 빨라지면서 웹 애플리케이션의 규모 또한 커져갔다. 이로 인해 파일의 양은 점차 늘어났고, 그에 따라 다양한 문제를 야기하였다.

 

1. 중복된 이름으로 인한 에러

대규모 웹 페이지의 경우 수 백, 수 천개의 자바스크립트 파일이 있고 여러 사람들이 관리하다보니 함수명, 변수명을 똑같이 짓는 경우가 생겨 예상치 못한 에러가 발생할 수 있다.

 

2. 파일로 인한 문제

사용자가 요청을 하면 서버는 웹 애플리케이션을 구성하는 파일들을 보내게 된다. 웹을 구성하는 파일의 양이 많다면 사용자의 요청에 응답하는 시간이 길어진다.

서버가 파일 1개를 요청하고 응답하는데 1초가 걸린다고 가정했을 때, 100개의 파일을 응답하는데는 100초, 1000개의 파일을 응답하는 데는 1000초의 시간이 걸리게 된다.

 

거기에 수많은 사용자가 웹 사이트를 이용할 경우, 응답을 제 때 하지 못해 네트워크 병목현상이 일어날 수도 있다.

하나의 파일 안에 모든 스크립트를 작성하면 이런 문제를 해결할 수 있겠지만, 유지보수 측면에서 봤을 때는 상당히 좋지 못 한 방법이다.

 

😎 번들러의 등장!

https://webpack.js.org/

이런 문제들을 해결하기 위해 번들러(Bundler)가 등장하였다. 번들러의 대표적인 역할은 여러 개의 파일을 하나의 파일로 묶어주는 것이다. 대표적으로 webpack, parcel, rollup 등이 있다.

번들러의 장점

1. 네트워크 병목현상 해결

번들러는 여러 개의 파일들을 묶어 하나의 번들로 만들어 줄 때, 종속성을 알아서 확인하여 사용하지 않은 파일은 포함하지 않는다. 그에 따라, 파일의 크기를 줄여 페이지 로딩을 빠르게 하고, 네트워크 병목현상을 최소화 한다.

 

2. 모듈 단위 코딩

번들러를 사용하면 모듈 단위의 코딩이 가능하다.

모듈 단위 코딩을 하게 되면 각 모듈이 독립적인 공간이기 때문에 앞서 문제가 되었던 중복된 이름으로 인한 예상치 못한 에러가 발생하는 것을 막을 수 있다.

또한 모듈 단위로 기능을 구분해 코딩이 가능하기 때문에 코드의 가독성이나 유지보수를 신경쓰며 개발할 수 있다.

 

3. ES6 버전 이상의 스크립트를 사용 가능

webpack은 로더(babel-loader)를 통해 ES6+의 자바스크립트 문법을 ES5 버전의 자바스크립트 문법으로 변환시켜주는 트랜스파일러를 사용할 수 있다. 이를 통해 ES5만 지원하는 오래된 브라우저에서도 ES6+ 문법으로 이뤄진 JS 파일을 작동할 수 있게 해준다.

 

4. SASS를 사용 가능

webpack은 style-loader와 css-loader, sass-loader라는 로더를 사용해 SASS를 CSS로 컴파일하여 사용할 수 있게 만들어준다.

 


 

🧐 트랜스파일러(Transpiler)란?

트랜스파일(transpile)은 어떤 특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것을 말하고, 이를 해주는 것이 트랜스파일러(transpiler)이다. 종종 컴파일(compile)과 같은 개념으로 사용하기도 하지만, 약간의 차이가 있다.

 

- 컴파일은 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 의미한다.

 ex) c언어로 작성된 소스코드를 기계어로 변환하는 과정

 

- 트랜스파일은 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화(Abstraction)를 가진 다른 언어로 변환하는 것을 말한다.

 

TypeScript Transpile

 

  • Type이 있는 Javascript -> Javascript
  • typescript로 작성한 파일은 브라우저에서 동작하지 않기 때문에 타입스크립트 트랜스파일러로 트랜스파일링해줘야 한다.

 

SASS Transpile

 

  • scss -> css
  • sass는 브라우저가 인식할 수 없기 때문에 css로 변환하는 작업이 필요하다.

 

Babel Transpile

 

  • ES6 Javascript -> ES5 Javascript
  • ES6+나 JSX를 변환시키는 트랜스파일러로 바벨이 있다.

보통 프론트엔드 프레임워크 및 라이브러리를 사용해서 개발할 때 모듈 번들러에 트랜스파일러를 추가해서 사용하는 방식을 사용한다.

 

참고

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/bundler-transpiler.md

https://velog.io/@eastshine94/Bundler-왜-Bundler을-사용해야하는가

https://ooz.co.kr/416

 

 

 

반응형