모듈 번들러, 트랜스 파일러

프론트엔드 개발은 모듈단위로 파일을 엮어서 개발을 진행한다.

이 모듈단위로 개발을 진행하며 아래와 같은 문제가 발생한다.

 

1. 모듈은 서로 의존성을 띄는데 이 모듈 사이의 우선순위는 어떻게 정할 것인가

2. 모듈이 많아질수록 HTTP 요청이 많아지게 되는데, 이러면 오버헤드의 문제는 어떻게 해결할 것인가

3. ES6스펙의 코드를 어떻게 처리 할 것인가

 

위와 같은 문제를 해결하기 위해 모듈 번들러가 등장했다. 각각의 의존성을 해결하여 하나의 자바스크립트 파일로 만들어주는 도구이다. 모듈 번들러로 유명한 번들러로 webpack, parcel, rollup이 있다.

 

 

 

트랜스 파일러는 특정 언어로 작성된 코드를 비슷한 언어로 변환해주는 도구이다.

 

- ES6를 ES5로 변환시켜준다

- react JSX를 자바스크립트로 변환해준다.

- 타입스크립트를 자바스크립트로 변환해준다.

 

ES5로 변환이나 JSX를 자바스크립트로 변환해주는 트랜스 파일러로 Babel이 유명하고, 타입스크립트를 자바스크립트로 변환해주는 트랜스 파일러로는 타입스크립트 트랜스 파일러 (tsc 명령어 이용)가 있다.

 

* 보통 트랜스 파일러를 모듈 번들러에 추가해서 사용한다.

 

 

 

baeharam/Must-Know-About-Frontend