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

모듈은 여러 기능들에 관한 코드들이 한데 모여있는 파일로서 다음과 같은 용도로 사용된다.

유지보수성
- 기능들이 모듈화가 잘 되어 있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 편하게 할 수 있다.
네임스페이스화
- 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드가 길어지다 보면 네임이 겹치는 경우가 발생한다. 이 때 모듈화를 하면, 각 모듈만의 네임스페이스를 가지기 때문에 중복되는 변수를 줄일 수 있다.
재사용성
- 똑같은 코드를 반복하여 사용하지 않고 모듈로 분리시켜서 재사용할 수 있다.

현대의 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발하는 방식이다.

즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제들이 발생한다.

위 문제들을 해결하기 위해 등장한 것이 모듈 번들러로, 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만드는 도구이다.

이미지 압축, 최소화(Minification) 등의 여러가지 기능들도 제공하며 유명한 번들러로는 Webpack, Parcel, Rollup 등이 있다.

트랜스파일링(Transpiling)이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하며, 이것을 수행하는 것이 트랜스파일러이다.

트랜스파일러가 필요한 이유는, 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5로 변환시키는 과정이 필요한데, 트랜스파일러는 이 작업을 수행해준다.

ES6+의 기능 뿐만 아니라 리액트를 JSX의 자바스크립트 코드로 변환시킨다거나, 타입스크립트를 자바스크립트로 변환시키는 등의 역할도 트랜스파일러의 기능 중에 하나이다.

ES6+나 JSX를 변환시키는 트랜스파일러로는 바벨(Babel)이 있으며, 타입스크립트를 변환시키는 도구로는 타입스크립트 트랜스파일러(tsc 명령어 이용)가 있다.

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

티스토리툴바